Este documento presenta cuatro prompts especializados diseñados para obtener resultados óptimos al trabajar con Three.js y física 3D. Cada prompt está cuidadosamente estructurado para abordar desafíos específicos del desarrollo 3D y evitar los errores más comunes.
Estos prompts están optimizados para herramientas como lovable.dev y están diseñados para funcionar como "one-shot prompting", permitiéndote obtener implementaciones completas y de alta calidad en una sola iteración.
Cuándo usar este prompt: Para establecer una base sólida para cualquier proyecto Three.js, especialmente al iniciar un nuevo proyecto o cuando necesites una implementación robusta que siga las mejores prácticas.
Actúa como un arquitecto experto en desarrollo 3D con amplia experiencia en Three.js, WebGL y optimización de gráficos para web. Tu especialidad es crear implementaciones robustas que evitan los errores comunes y siguen las mejores prácticas de la industria.
## OBJETIVO
Necesito desarrollar una aplicación 3D con Three.js que [DESCRIPCIÓN_BREVE_DEL_PROYECTO]. La aplicación debe ser robusta, eficiente y seguir las mejores prácticas de desarrollo.
## REQUISITOS TÉCNICOS
- Compatibilidad con navegadores modernos (Chrome, Firefox, Safari, Edge)
- Rendimiento óptimo en dispositivos de gama media-alta
- Código modular y mantenible
- Implementación de patrones de diseño adecuados para aplicaciones 3D
## ESTRUCTURA DE LA IMPLEMENTACIÓN
Por favor, proporciona una implementación completa que incluya:
### 1. Configuración Básica
- Inicialización de escena, cámara y renderizador con configuraciones óptimas
- Sistema de gestión de eventos para redimensionamiento de ventana
- Bucle de renderizado eficiente con requestAnimationFrame
- Estructura de carpetas y organización de archivos recomendada
### 2. Gestión de Recursos
- Carga eficiente de modelos 3D y texturas con gestión de errores
- Implementación de sistema de carga progresiva y pantalla de carga
- Estrategias para evitar bloqueos durante la carga de recursos pesados
- Liberación adecuada de memoria cuando los recursos ya no son necesarios
### 3. Interacción y Controles
- Implementación de controles de cámara intuitivos (OrbitControls, TrackballControls, etc.)
- Sistema de selección y manipulación de objetos 3D
- Manejo adecuado de eventos de ratón, teclado y táctiles
- Feedback visual para interacciones del usuario
### 4. Optimización de Rendimiento
- Técnicas de culling y Level of Detail (LOD)
- Estrategias para minimizar draw calls
- Optimización de shaders y materiales
- Gestión eficiente de luces y sombras
### 5. Depuración y Monitoreo
- Implementación de herramientas de depuración (Stats.js, Dat.GUI)
- Estrategias para identificar y resolver cuellos de botella
- Manejo de errores y excepciones comunes en Three.js
## CONSIDERACIONES ESPECÍFICAS
- Evitar fugas de memoria mediante la correcta disposición de geometrías y texturas
- Implementar técnicas para prevenir el "z-fighting" en geometrías cercanas
- Asegurar que las transformaciones de objetos se realizan en el orden correcto
- Manejar adecuadamente los sistemas de coordenadas para evitar confusiones
- Implementar estrategias para mantener un frame rate constante
## FORMATO DE RESPUESTA
Proporciona el código completo con comentarios detallados explicando:
1. El propósito de cada sección
2. Las decisiones de diseño tomadas
3. Las optimizaciones implementadas
4. Cómo evitar errores comunes en cada parte
Incluye también un archivo HTML básico para cargar y ejecutar la aplicación, así como instrucciones para la instalación de dependencias necesarias.
## ERRORES COMUNES A EVITAR
- No liberar recursos correctamente (geometrías, materiales, texturas)
- Realizar operaciones costosas en el bucle de renderizado
- Ignorar el manejo de eventos de redimensionamiento
- Implementar controles de cámara que pueden desorientar al usuario
- Cargar modelos o texturas de alta resolución sin estrategias de optimización
- Crear demasiados objetos Three.js innecesariamente
- Actualizar la escena completa cuando solo cambian elementos específicos
Por favor, asegúrate de que la implementación sea robusta, eficiente y siga las mejores prácticas actuales de desarrollo con Three.js.
Cuándo usar este prompt: Cuando necesites implementar comportamientos físicos realistas en tu aplicación Three.js, como colisiones, gravedad, restricciones o cualquier simulación física.
Actúa como un ingeniero especializado en física para entornos 3D con experiencia profunda en la integración de motores de física con Three.js. Tu conocimiento abarca Ammo.js, Cannon.js, y otros motores de física para WebGL, así como las técnicas avanzadas para sincronización, detección de colisiones y optimización de rendimiento.
## OBJETIVO
Necesito implementar un sistema de física realista y eficiente para mi aplicación Three.js que [DESCRIPCIÓN_DEL_PROYECTO]. El sistema debe manejar correctamente colisiones, gravedad, restricciones y comportamientos físicos complejos mientras mantiene un rendimiento óptimo.
## REQUISITOS TÉCNICOS
- Motor de física recomendado: [Ammo.js/Cannon.js/Rapier/etc.]
- Compatibilidad con navegadores modernos
- Rendimiento objetivo: 60 FPS en dispositivos de gama media-alta
- Comportamiento físico preciso y predecible
## ESTRUCTURA DE LA IMPLEMENTACIÓN
Por favor, proporciona una implementación completa que incluya:
### 1. Configuración del Mundo Físico
- Inicialización del motor de física seleccionado
- Configuración óptima de parámetros (gravedad, precisión, iteraciones)
- Integración con el bucle de renderizado de Three.js
- Estrategias para timestep fijo vs. variable
### 2. Creación y Gestión de Cuerpos Rígidos
- Creación de cuerpos rígidos para diferentes geometrías (cajas, esferas, mallas complejas)
- Configuración correcta de propiedades físicas (masa, fricción, restitución)
- Sincronización precisa entre objetos Three.js y sus contrapartes físicas
- Manejo de cuerpos estáticos vs. dinámicos vs. cinemáticos
### 3. Detección y Respuesta a Colisiones
- Implementación de detección de colisiones eficiente
- Configuración de capas de colisión (collision masks)
- Obtención y procesamiento de información de contacto
- Implementación de callbacks para eventos de colisión
- Estrategias para evitar el "tunneling" a altas velocidades
### 4. Restricciones y Articulaciones
- Implementación de diferentes tipos de restricciones (punto a punto, bisagra, deslizador)
- Creación de sistemas articulados complejos
- Configuración de límites y motores para restricciones
- Técnicas para estabilidad en sistemas de restricciones complejos
### 5. Optimización de Rendimiento
- Configuración óptima de broadphase
- Uso eficiente de formas de colisión simplificadas
- Estrategias para objetos en reposo (sleeping)
- Técnicas para reducir la carga de cálculos físicos
- Paralelización de cálculos cuando sea posible
### 6. Depuración y Visualización
- Herramientas para visualizar cuerpos de colisión
- Técnicas para depurar problemas comunes de física
- Monitoreo de rendimiento del sistema de física
## CONSIDERACIONES ESPECÍFICAS
- Evitar problemas de "jitter" en objetos apilados o en reposo
- Manejar correctamente las diferencias entre unidades de Three.js y el motor de física
- Implementar estrategias para objetos que requieren precisión física vs. objetos que pueden usar aproximaciones
- Considerar la escalabilidad para escenas con muchos objetos físicos
- Implementar técnicas para física continua en objetos de alta velocidad
## ERRORES COMUNES A EVITAR
- Configuración incorrecta de la sincronización entre el motor de renderizado y el motor de física
- Uso de formas de colisión demasiado complejas para objetos dinámicos
- Valores inadecuados de masa, fricción o restitución que causan comportamientos irrealistas
- Falta de manejo de casos extremos (velocidades muy altas, penetraciones profundas)
- Cálculos físicos innecesarios para objetos fuera de la vista o lejos del área de interés
- Problemas de precisión numérica en simulaciones de larga duración
- Colisiones no detectadas debido a objetos que se mueven demasiado rápido entre frames
## FORMATO DE RESPUESTA
Proporciona el código completo con comentarios detallados explicando:
1. La configuración del sistema de física
2. La creación y gestión de cuerpos rígidos
3. La implementación de detección de colisiones
4. La creación y configuración de restricciones
5. Las estrategias de optimización implementadas
Incluye también ejemplos específicos para:
- Objetos que caen y rebotan con comportamiento realista
- Sistemas articulados (como péndulos o cadenas)
- Detección y respuesta a colisiones entre objetos
- Interacción del usuario con objetos físicos
## EJEMPLOS DE CASOS DE USO
Por favor, incluye implementaciones específicas para estos escenarios comunes:
1. Simulación de objetos apilables con física realista
2. Vehículo simple con suspensión y ruedas físicas
3. Sistema de cuerda o cadena usando restricciones
4. Interacción del usuario para empujar, levantar o lanzar objetos
5. Detección de colisiones para lógica de juego (como recolección de objetos)
Asegúrate de que la implementación sea robusta, eficiente y evite los problemas comunes asociados con la física en entornos 3D web.