Libro Three.js: Construyendo Mundos en 3D, De los Fundamentos a la Interactividad

¿Por qué aprender Three.js es una habilidad indispensable hoy en día?

La web ha dejado de ser plana. El desarrollo 3D en el navegador está revolucionando el comercio electrónico, la educación, los videojuegos y los portafolios interactivos. No importa si quieres crear un visualizador de productos o una experiencia artística: saber crear entornos 3D te diferencia del resto de desarrolladores.

Pero empezar con WebGL desde cero es extremadamente difícil. Las matemáticas son complejas y la sintaxis es muy tediosa. Los tutoriales desactualizados te enseñan prácticas antiguas y la documentación oficial puede ser abrumadora para principiantes.

Este libro es diferente.

¿Qué aprenderás en este libro?

Este libro cubre el camino completo para dominar Three.js, organizado en 4 bloques progresivos:

Bloque 1: Fundamentos y Entorno 3D

• Configuración de un entorno de desarrollo moderno con Node.js y Vite.
• Los pilares de la web 3D: Escena, Cámara y Renderizador.
• Diferencias entre PerspectiveCamera y OrthographicCamera.
• El grafo de escena y cómo manipular objetos mediante scene.traverse().
• Creación y posicionamiento de tus primeras figuras geométricas.

Bloque 2: Geometrías, Materiales y Apariencia

• Exploración del catálogo de geometrías predefinidas (Esferas, Conos, Cilindros, Tubos).
• Materiales básicos frente a materiales que reaccionan a la luz (Lambert, Phong).
• MeshDepthMaterial: Cómo visualizar la profundidad de campo.
• Combinación de materiales y efectos de Blending.
• Efectos globales: Implementación de niebla (THREE.Fog) en tu universo.

Bloque 3: Iluminación Avanzada y Sombras

• Tipos de luces: AmbientLight, PointLight, SpotLight y DirectionalLight.
• El uso de "Helpers" para depurar visualmente la posición de las luces.
• Activación y optimización de sombras en el renderizador.
• Ajuste de intensidad, decaimiento (decay) y alcance (distance) de la luz.
• Animación de luces móviles utilizando patrones de pivote.

Bloque 4: Animaciones, Matemáticas e Interactividad

• El loop de renderizado continuo con requestAnimationFrame.
• Matemáticas para la animación: uso de Math.sin() y Math.cos() para trayectorias.
• Creación de escenas caóticas y dinámicas generando figuras bajo demanda.
• dat.GUI: Integración de interfaces para controlar parámetros en tiempo real.
• TrackballControls: Cómo permitir al usuario navegar por la escena libremente.

¿Por qué este libro y no otro?

✅ Actualizado a 2026

No perderás el tiempo descargando scripts manualmente. Todo el contenido está basado en los estándares modernos de ES Modules y el uso de Vite como empaquetador.

✅ Aprende haciendo mini proyectos reales

No es un manual técnico aburrido. Construirás un proyecto de un jardín iluminado, una cuadrícula matemática dinámica y escenas de animación caótica. Al terminar, tendrás varios proyectos visuales para tu portafolio.

✅ Escrito por un desarrollador activo, no un teórico

Trabajo a diario creando aplicaciones web interactivas. Lo que encontrarás aquí es el camino directo, saltándonos la teoría innecesaria y enfocándonos en lo que realmente funciona en el navegador.

✅ Progresivo y honesto

El libro empieza simple y va subiendo el nivel de complejidad matemática y lógica progresivamente. Te da la estructura exacta para que la curva de aprendizaje del 3D no sea un dolor de cabeza.

¿Para quién es este libro?

Este libro es para ti si:

• Ya sabes algo de JavaScript y HTML, y quieres dar el salto a los gráficos en 3D.
• Has intentado aprender WebGL nativo y te ha parecido demasiado complejo.
• Quieres añadir experiencias interactivas y modernas a tu portafolio de frontend.
• Eres desarrollador web y quieres prepararte para el futuro de las interfaces tridimensionales.
• Eres diseñador 3D y buscas una forma de llevar tus creaciones interactivamente a la web.
• Eres docente y buscas material estructurado y práctico sobre Three.js para tus alumnos.

Es recomendable tener conocimientos básicos de JavaScript (variables, funciones, bucles). Sin embargo, no necesitas ser un experto en matemáticas para entender y aplicar los conceptos de este libro.

Sobre el autor: Andrés Cruz Yoris

Andrés Cruz Yoris es Licenciado en Computación con más de 10 años de experiencia en el desarrollo de aplicaciones web. Trabaja diariamente con tecnologías modernas del lado del cliente como JavaScript, Vue.js y herramientas tridimensionales como Three.js, además de una sólida base en backend y desarrollo móvil nativo.

A lo largo de su carrera ha formado a miles de desarrolladores a través de su plataforma DesarrolloLibre.net y su academia online. Sus libros y cursos se caracterizan por ser directos, prácticos y honestamente orientados a lo que el mercado laboral realmente usa.

"Si te quedas solo con lo que ves en el aula o en el libro, estás condenado al fracaso. La tecnología no para, y tú tampoco deberías hacerlo. Aprende a pensar en 3D." — Andrés Cruz Yoris

Preguntas frecuentes

• ¿Necesito saber JavaScript para leer este libro?

   

  • Sí, es recomendable tener bases de JavaScript y manipulación del DOM (HTML). Si sabes declarar variables, crear funciones y entiendes los objetos, estás listo para empezar.

• ¿Es necesario comprar algún software de modelado 3D?

   

  • No. Todas las geometrías y escenas las crearemos escribiendo código directamente en Three.js. Solo necesitas Visual Studio Code y Google Chrome. Si ya usas Blender, ¡genial!, pero no es un requisito.

• ¿El contenido está actualizado?

   

  • Completamente. Usamos la arquitectura moderna de Node.js, NPM y Vite para el desarrollo, abandonando las viejas prácticas de incluir el script directamente y lidiar con problemas de caché o módulos.

• ¿Tengo que ser experto en matemáticas avanzadas?

   

  • En absoluto. Three.js hace el trabajo pesado por debajo. Aprenderemos un poco de trigonometría básica (seno y coseno) para las animaciones, pero te lo explicaré de una forma visual y directa.

• ¿Qué nivel de inglés necesito?

   

  • El libro está escrito completamente en español. Las funciones del API de Three.js están en inglés (Scene, Camera, Mesh), pero te explicaré cada una de ellas detalladamente.

Lleva tus interfaces web a la tercera dimensión

Cada día la web es más interactiva, más inmersiva y más visual. Aprender Three.js no solo te enseña a dibujar polígonos; te abre la mente a una forma completamente nueva de pensar como programador. Las marcas buscan constantemente desarrolladores que sepan destacar y construir cosas impresionantes.

No necesitas ser un genio de las matemáticas. Solo necesitas el libro correcto y la constancia de practicar.

El universo 3D lo programas tú, línea a línea.