Objetivos de aprendizaje
- Qué son Three.js y React Three Fiber y para qué sirven.
- Crear una escena 3D interactiva describiéndosela a Claude Code.
- Publicarla para compartirla con tus alumnos.
Conceptos clave
En cristiano: Three.js y React Three Fiber. Three.js es la biblioteca estándar para dibujar gráficos 3D en el navegador. React Three Fiber (R3F) es una forma más cómoda de usar Three.js dentro de aplicaciones web modernas. Tú no tienes que aprender ninguna de las dos: se las describes a Claude Code y él escribe el código.
Idea clave. A fecha de 2026, Three.js (versión r185) y React Three Fiber (v9) siguen siendo el estándar para 3D en la web. Es tecnología madura y muy bien soportada: lo que construyas hoy seguirá funcionando.
Requisitos
Solo Claude Code y Node.js. Este proyecto no necesita IA local: es una aplicación web 3D. La IA (Claude Code) se usa para construirla, no para ejecutarla.
Paso a paso
cd ~/proyectos-ia mkdir simulacion-3d cd simulacion-3d claude
Describe la escena que quieres. Ejemplo (adáptalo a tu asignatura):
Escribe esto a Claude Code
Crea una web con una simulación 3D del sistema solar usando React Three Fiber (Three.js):
- El Sol en el centro y los planetas orbitando a distintas velocidades.
- Se puede girar la cámara y hacer zoom con el ratón.
- Al pasar el cursor por un planeta, muestra su nombre y un dato curioso.
- Un control para acelerar o pausar el tiempo.
- Explícame en el README cómo cambiar datos y colores.
Idea clave. Cambia la escena por lo que enseñes: una célula y sus orgánulos, las capas de la Tierra, un teorema geométrico, un motor... La técnica es idéntica; solo cambia lo que describes.
Ejecutar en tu ordenador
npm install npm run dev
Abre la dirección local y prueba a girar la escena con el ratón.
Comprueba que funciona. Deberías ver la escena 3D y poder rotarla y hacer zoom. Si al pasar el ratón aparecen los nombres y datos, la interacción funciona.
Cuidado. Si la escena va a tirones, suele ser por tener demasiados elementos o texturas muy grandes. Pide a Claude Code que “optimice el rendimiento” y reduzca detalles. Un portátil normal mueve escenas sencillas sin problema.
Guardar y reabrir el proyecto.
Proyecto: carpeta
simulacion-3d. Cerrar: Ctrl + C. Reabrir: cd ~/proyectos-ia/simulacion-3d y npm run dev. Cuando esté lista, en el capítulo “Publicar en la red” aprendes a subirla para que tus alumnos la abran desde un enlace.Si algo falla
- Pantalla en negro — mira si hay un error en la consola del navegador (clic derecho, “Inspeccionar”); cópiaselo a Claude Code.
- No gira la cámara — pide que añada los controles de órbita (“OrbitControls”).
- Muy pesada — reduce elementos y tamaño de texturas.
Reto para practicar
Añade botones para “visitar” cada planeta (que la cámara viaje hasta él) y un panel lateral con su ficha. Habrás convertido la simulación en una pequeña lección interactiva.
Siguiente misión recomendada
Si has guardado la evidencia de esta lección, continúa con «Un avatar que habla». Si no, repite la comprobación antes de avanzar.