Índice de contenido
- ¿Por qué aprender Three.js hoy?
- Three.js vs WebGL: qué simplifica realmente
- Conclusiones
- Presentación
- Primeros pasos
- Proyecto: Jardín
- Aspectos Generales
- Proyecto: Agregar figuras geométricas bajo demanda
- Proyecto: Interactucar con una escena
- Proyectos
- Proyecto: Luces
- Proyecto: Materiales
- Geometría
- Cámaras
Curso en Legacy (No tendrá más actualizaciones)
En este curso aprenderás a trabajar con Three.js desde cero con JavaScript, cuando termines el curso podrás crear proyectos sencillos en base a figuras geométricas en 3D animados con iluminación, variados e interactivos.
Esquema del Curso de Three.js
Vamos a trabajar mediante la CDN de Three.js y una web en HTML en la cual vamos a realizar cada uno de los proyectos con el objetivo de conocer los fundamentos de Three.js
No necesitas tener conocimientos previos, salvo conocer las bases de HTML, CSS y JavaScript.
Aprender Three.js hoy es una de las formas más rápidas de entrar al mundo del 3D en la web sin pelearte con WebGL ni con APIs demasiado técnicas. Cuando creé mis primeras figuras 3D en el navegador, me sorprendió lo natural que se sentía: era como si mis conocimientos de desarrollo web, de repente, hubieran desbloqueado una dimensión más.
Y si vienes de crear modelos en Blender—como es mi caso—Three.js es literalmente el puente perfecto para llevar tu contenido al navegador y hacerlo interactivo.
¿Por qué aprender Three.js hoy?
Lo que puedes crear desde el primer día
Aunque suene ambicioso, con muy poco código puedes:
- Renderizar figuras 3D
- Añadir luz y sombras realistas
- Crear animaciones simples
- Generar movimiento con el mouse o el scroll
- Integrar modelos 3D externos
Recuerdo que mi primera escena fueron unas simples figuras geométricas, pero verlas rotar dentro del navegador fue un pequeño momento “wow”. No parecía JavaScript; parecía magia.
Three.js vs WebGL: qué simplifica realmente
WebGL es poderoso, sí, pero su curva de aprendizaje es casi vertical.
Three.js elimina casi toda esa fricción:
- No tienes que escribir shaders desde cero.
- No tienes que gestionar buffers ni render loops manuales.
- Todo se basa en objetos, escenas y materiales… justo lo que un desarrollador espera.
Y aun así, puedes profundizar cuando quieras.
El valor de combinar Blender + Three.js
Algo que me cambió la forma de aprender fue esto:
“Si empiezas desde cero, usa Blender aunque sea para lo básico.”
Comprender materiales, texturas e iluminación de manera visual acelera muchísimo tu dominio dentro de Three.js.
Además, cargar tus modelos .glb o .gltf en una escena web es altamente satisfactorio—especialmente si creías que el 3D y la web eran dos mundos totalmente separados.
Conclusiones
A nivel técnico aprenderás ha trabajar con las siguientes características en Three.js:
- Sobre Three.js
- Escena, cámaras, figuras e iluminación
- Animar figuras aplicando operaciones geométricas y variar el color
- Tipos de luces
- Tipos de figuras geométricas soportadas
- Interactuar con la escena
- Obtener información sobre la escena
- Trabajar con combinación de materiales
- Aplicar sombras