Skip to content

README.es.md

Latest commit

 

History

History
160 lines (112 loc) · 4.87 KB

README.es.md

File metadata and controls

160 lines (112 loc) · 4.87 KB
Raw

🌐 3D Viewer — Custom Autorotation

Demo en vivo

🇬🇧 Read in English


Visor 3D interactivo en el navegador con controles de escena personalizables en tiempo real. Carga cualquier modelo GLTF/GLB y explóralo con rotación automática, iluminación dinámica y mucho más.

🎬 Demo

Demo rotación modelo 3D Demo menú de controles

✨ Características

  • 🎮 Modelo 3D interactivo — Carga y renderiza cualquier modelo en formato GLTF/GLB
  • 🔄 Autorotación personalizable — Activa/desactiva la rotación automática y ajusta su velocidad
  • 🖱️ OrbitControls — Gira, haz zoom y desplaza el modelo libremente con el ratón
  • 💡 Iluminación dinámica — Controla el color e intensidad de la luz ambiental y direccional
  • 🎨 Fondo personalizable — Cambia el color del fondo de la escena en tiempo real
  • 🔍 Control de zoom — Ajusta el nivel de zoom mediante un slider
  • 📱 Responsive — Se adapta automáticamente al tamaño de la ventana
  • 🍔 Menú lateral animado — Panel de opciones con hamburger menu elegante

🗂️ Estructura del Proyecto

3D-Viewer-Custom-Autorotation/
│
├── 📄 index.html        # Estructura HTML + menú de opciones de escena
├── 📜 script.js         # Lógica Three.js: escena, cámara, luces y controles
├── 🎨 styles.css        # Estilos del visor y del menú lateral
└── 📁 assets/
    └── (modelos GLTF/GLB aquí)

🚀 Instalación y Uso

1. Clona el repositorio

git clone https://github.com/UnaPinyaMas/3D-Viewer-Custom-Autorotation.git
cd 3D-Viewer-Custom-Autorotation

2. Lanza un servidor local

⚠️ Los modelos GLTF requieren un servidor HTTP. No abras el index.html directamente desde el explorador de archivos.

Con VS Code (Live Server):

Instala la extensión "Live Server" → clic en "Go Live"

Con Python:

python -m http.server 8080

Con Node.js:

npx serve .

3. Abre en el navegador

http://localhost:8080

🎛️ Panel de Controles

Haz clic en el botón hamburguesa (☰) para abrir el panel lateral:

Control Descripción
🎨 Color de fondo Cambia el color del fondo de la escena
💡 Luz Ambiental Ajusta color e intensidad de la iluminación global
🔦 Luz Direccional Ajusta color e intensidad de la luz direccional
🔍 Zoom Controla el nivel de zoom de la cámara
🔄 Autorotación Activa o desactiva la rotación automática
⚡ Velocidad de Rotación Ajusta la velocidad del giro automático

🛠️ Tecnologías Utilizadas

Tecnología Versión Uso
Three.js v0.146.0 Motor de renderizado 3D WebGL
GLTFLoader v0.146.0 Carga de modelos 3D en formato .gltf / .glb
OrbitControls v0.146.0 Control de cámara con el ratón
HTML5 / CSS3 — Interfaz y estilos
JavaScript ES6 — Lógica de la aplicación

🔄 Usar tu propio modelo 3D

Pon tu modelo GLTF/GLB dentro de la carpeta assets/ y actualiza la ruta en script.js:

loader.load(
  'assets/tu-modelo/scene.gltf', // 👈 Cambia esta ruta
  function (gltf) { ... }
);

La cámara se posicionará automáticamente según el tamaño del modelo usando su bounding box.

⚙️ Cómo Funciona Internamente

1. Se inicializa la escena Three.js con WebGLRenderer (antialiasing activado)
2. Se añaden luces: ambiental + direccional, ambas configurables
3. GLTFLoader carga el modelo 3D desde la ruta especificada
4. La cámara se posiciona automáticamente mediante BoundingBox del modelo
5. OrbitControls permite interactuar (rotar, zoom, pan) con damping suavizado
6. El bucle de animación (requestAnimationFrame) actualiza y renderiza cada frame
7. El menú lateral modifica la escena en tiempo real mediante event listeners

Hecho por Piña 🍍