Realidad Virtual en Desarrollo Web 2025: WebXR y el Metaverso Empresarial

• Three.js: La base fundamental para gráficos 3D en web. Versión 160+ con mejoras de rendimiento WebXR.
• A-Frame: Framework declarativo que simplifica el desarrollo VR. Ideal para prototipos rápidos.
• Babylon.js: Motor 3D completo con herramientas visuales. Excelente para proyectos complejos.
• React Three Fiber: Wrapper de Three.js para React. Perfecto para integrar VR en apps existentes.

Estructura del Proyecto:

project/
├── index.html
├── js/
│   ├── main.js
│   ├── vr-controls.js
│   └── product-loader.js
├── models/
│   └── products.glb
└── textures/
    └── environment.hdr

import * as THREE from 'three';
import { VRButton } from 'three/addons/webxr/VRButton.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

class VRShowroom {
  constructor() {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer({ antialias: true });

    this.init();
  }

  init() {
    // Configurar renderer para VR
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.xr.enabled = true;
    document.body.appendChild(this.renderer.domElement);

    // Añadir botón VR
    document.body.appendChild(VRButton.createButton(this.renderer));

    this.setupScene();
    this.loadProducts();
    this.startRenderLoop();
  }

  setupScene() {
    // Iluminación
    const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(10, 10, 5);

    this.scene.add(ambientLight, directionalLight);

    // Suelo
    const floorGeometry = new THREE.PlaneGeometry(20, 20);
    const floorMaterial = new THREE.MeshLambertMaterial({ color: 0x808080 });
    const floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.rotation.x = -Math.PI / 2;
    this.scene.add(floor);
  }
}

// Sistema de raycast para interacciones VR
setupVRInteractions() {
  this.raycaster = new THREE.Raycaster();
  this.intersections = [];

  // Controladores VR
  this.controller1 = this.renderer.xr.getController(0);
  this.controller1.addEventListener('selectstart', this.onSelectStart.bind(this));
  this.controller1.addEventListener('selectend', this.onSelectEnd.bind(this));
  this.scene.add(this.controller1);

  // Visual feedback
  const geometry = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(0, 0, -1)
  ]);
  const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x0000ff }));
  this.controller1.add(line);
}

onSelectStart(event) {
  const controller = event.target;
  controller.userData.isSelecting = true;

  // Detectar objeto seleccionado
  this.raycaster.ray.origin.setFromMatrixPosition(controller.matrixWorld);
  this.raycaster.ray.direction.set(0, 0, -1).transformDirection(controller.matrixWorld);

  const intersects = this.raycaster.intersectObjects(this.products, true);
  if (intersects.length > 0) {
    this.showProductInfo(intersects[0].object);
  }
}