← Volver a Recursos

🪐 Sistema Solar Interactivo

Simulador 3D WebGL · Cámara libre · 9 planetas · Cinturón de asteroides · Fases lunares

Three.js WebGLOrbitControlsTierra y LunaFases lunaresQuiz
🪐 Cargando Three.js…
velocidad1.0x
arrastra · scroll zoom

Haz clic en un planeta para ver información · * Plutón = planeta enano

Hazlo tú mismo con IA

✍️ Cómo recrear este simulador paso a paso

6 prompts en orden. Pega cada uno en ChatGPT, Claude o Gemini y aplica la respuesta antes de pasar al siguiente. No necesitas saber programar — solo copiar, pegar y ejecutar.

Crea un archivo HTML único con un simulador 3D del sistema solar usando Three.js cargado desde CDN. Este es el primer paso: solo la escena base.

TECNOLOGÍA:
- Three.js r128: https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js
- OrbitControls: https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js
- Cargar ambos con <script> y esperar a que estén disponibles antes de inicializar

ESCENA BASE:
- WebGLRenderer con antialias:true, fondo color #060B1A, tamaño 100% ventana
- PerspectiveCamera(55, aspecto, 0.1, 5000), posición inicial (0, 120, 290)
- OrbitControls con enableDamping:true, dampingFactor:0.06, minDistance:40, maxDistance:900
- Redimensionado automático con window.addEventListener('resize', ...)

SOL:
- SphereGeometry(12, 32, 32) con MeshBasicMaterial color 0xFFB300
- Halo interior: esfera radio 17, MeshBasicMaterial BackSide, color 0xFF8C00, opacity 0.18, transparent
- Halo exterior: esfera radio 23, BackSide, color 0xFF5500, opacity 0.07
- PointLight(0xfff8e1, 3.5) en el origen para iluminar planetas
- AmbientLight(0x111133, 0.9)

ESTRELLAS:
- BufferGeometry con 4500 puntos distribuidos aleatoriamente en una esfera hueca (r entre 900 y 1800)
- PointsMaterial color blanco, size 1.1, sizeAttenuation: false

ANIMACIÓN:
- requestAnimationFrame loop
- controls.update() en cada frame
- renderer.render(scene, camera)

El resultado debe ser una pantalla negra con estrellas y el Sol brillante en el centro, cámara orbitable.

💡 Consejo: Trabaja en un único archivo index.html y abre el paso anterior en la IA con el contexto: "Tengo este código HTML, añade lo siguiente:" seguido del prompt. Así cada paso se construye sobre el anterior.