← 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.