🖼️ Museo 3D

Genera un museo 3D visitable a partir de fotos de cuadros y compártelo con tus alumnos en tiempo real — sin servidores, sin bases de datos, todo en el navegador.

---

¿Cómo funciona?

Profe sube fotos → se genera el museo → alumnos se conectan P2P → exploran juntos

1. El profesor abre /create.html, arrastra sus fotos de cuadros y pulsa Generar Museo.
2. Se genera un código de 6 letras y un QR que los alumnos escanean (o reciben la URL directamente).
3. Los alumnos abren la página principal, introducen el código y se conectan directamente al navegador del profesor vía WebRTC (sin pasar por ningún servidor tuyo).
4. Todos exploran el mismo museo 3D en sus dispositivos, incluyendo gafas Oculus / Quest gracias a WebXR.

---

Características

🏛️ Museo procedural	1–8 cuadros → corredor; 9–20 → 2 corredores; +20 → cuadrícula de salas
🖼️ Cuadros reales	Las imágenes del profesor se transmiten y aparecen en los marcos
🔗 P2P puro	WebRTC via PeerJS — los datos nunca salen de los navegadores de los participantes
🥽 WebXR / Oculus	Compatible con Meta Quest y cualquier headset WebXR
🚶 Movimiento libre	WASD + ratón en escritorio; thumbstick + teleport en VR
🧱 Sin paredes falsas	Colisión real: no se puede salir del museo
☀️ Tema claro	Estilo museo moderno, paredes blancas, suelo cálido, luces de techo

---

Tecnología

Capa	Herramienta
3D / WebXR	A-Frame 1.7.1
Movimiento VR	aframe-extras 7.5.0
P2P / WebRTC	PeerJS 1.5.4
QR codes	qrcode (npm)
Build	Vite 6

Sin backend propio. El único servicio externo es el servidor de señalización gratuito de PeerJS, usado únicamente para el intercambio inicial de IPs. Las imágenes y el layout del museo viajan directamente entre navegadores.

---

Instalación y desarrollo

# Requiere Node ≥ 18 (recomendado: nvm)
npm install
npm run dev         # servidor de desarrollo en http://localhost:5173

Páginas

URL	Descripción
/	Página de alumno — introduce el código de sala
/create.html	Página de profesor — sube fotos y genera el museo

Build de producción

npm run build       # genera /dist
npm run preview     # sirve /dist en red local

---

Estructura del proyecto

museo/
├── index.html          # Página alumno (join)
├── create.html         # Página profesor (crear museo)
├── student.html        # Redirect → /
├── styles/
│   ├── student.css
│   └── teacher.css
├── src/
│   ├── teacher.js          # Controlador de la página del profesor
│   ├── student.js          # Controlador de la página del alumno
│   ├── museum-generator.js # Genera el layout JSON del museo
│   ├── museum-renderer.js  # Construye la escena A-Frame
│   ├── peer-host.js        # WebRTC — lado profesor
│   ├── peer-guest.js       # WebRTC — lado alumno
│   ├── transfer-protocol.js# Chunked image transfer over DataChannel
│   ├── qr-generator.js     # Genera el QR con la URL de alumno
│   └── components/
│       ├── painting-frame.js  # Componente A-Frame para marcos de cuadros
│       └── player-rig.js      # Componente A-Frame para el jugador
├── vite.config.js
└── package.json

---

Uso en clase

1. El profesor abre http://<tu-ip>:5173/create.html (o la URL de producción).
2. Sube entre 1 y 30 fotos de cuadros.
3. Pulsa Generar Museo → aparece el QR y el código de sala.
4. Los alumnos escanean el QR con su móvil o introducen el código en la página principal.
5. En cuanto se conectan, reciben el museo automáticamente y pueden explorarlo.
6. El profesor puede entrar al museo pulsando Entrar al Museo y explorar junto a sus alumnos.

---

Licencia

MIT