Lapras – Proyecto de práctica con Three.js

Este proyecto es una práctica personal con Three.js donde he explorado diversas funcionalidades clave de la biblioteca: creación de escenas, animación, movimiento de modelos 3D, manejo de luces y renderizado de escenas dentro de otras. El objetivo principal fue integrar una lámpara animada dentro de una Nintendo 3D y renderizar esa escena en el "pantalla" de la consola.

Tecnologías utilizadas

• Three.js: Biblioteca principal para la creación y renderizado de gráficos 3D.
• Vite: Herramienta de construcción para desarrollo rápido y eficiente.
• GLTFLoader: Para la carga de modelos 3D en formato GLTF.
• WebGLRenderTarget: Para renderizar una escena dentro de otra, simulando una pantalla 3D.
• OrbitControls: Para permitir la navegación interactiva en la escena 3D.

Características principales

• Creación de escenas: Definición de múltiples escenas para organizar y estructurar el contenido 3D.
• Animación de modelos: Implementación de animaciones básicas para dar vida a los objetos dentro de la escena.
• Movimiento de modelos: Posicionamiento y desplazamiento de modelos 3D en el espacio tridimensional.
• Renderizado de escenas dentro de otras: Uso de WebGLRenderTarget para renderizar una escena dentro de otra, simulando una pantalla 3D en la consola Nintendo.
• Iluminación dinámica: Aplicación de diferentes fuentes de luz para resaltar los elementos de la escena.

Estructura del proyecto

/src
  /models
    lamp.glb
    nintendo.glb
  /textures
  main.js
  sceneInside.js
  sceneOutside.js
  animation.js
index.html
vite.config.js
package.json

Instalación

1. Clona el repositorio:

   git clone https://github.com/J0nJuarez/Lapras.git

2. Navega al directorio del proyecto:

   cd Lapras

3. Instala las dependencias:

   npm install

4. Inicia el servidor de desarrollo:

   npm run dev

5. Abre tu navegador y visita http://localhost:3000 para ver el proyecto en acción.

Aprendizajes clave

• Uso de WebGLRenderTarget: Aprendí a renderizar una escena dentro de otra utilizando WebGLRenderTarget, lo que me permitió simular una pantalla 3D dentro de la consola Nintendo.
• Organización de escenas: Experimenté con la creación de múltiples escenas para organizar mejor los elementos y las animaciones dentro del proyecto.
• Interacción con modelos 3D: Implementé controles interactivos para manipular y visualizar los modelos 3D desde diferentes ángulos y posiciones.

Recursos adicionales

• Documentación de Three.js
• Vite – Guía de inicio rápido
• GLTFLoader – Carga de modelos GLTF