Cómo aprender Three.js desde cero: guía completa para principiantes

DJC > Tutorial

Three.js es la librería más popular para desarrollar gráficos 3D en la web utilizando JavaScript y WebGL. Gracias a su potencia y facilidad de uso, permite crear experiencias interactivas, visualizaciones, videojuegos, simulaciones y modelos 3D directamente en el navegador.

En esta guía aprenderás paso a paso cómo empezar con Three.js, desde los conceptos básicos hasta ejemplos prácticos, con una estructura pensada para posicionar en motores de búsqueda.

¿Qué es Three.js?

Three.js es una librería de JavaScript que facilita el uso de WebGL, permitiendo renderizar gráficos 3D sin necesidad de trabajar directamente con shaders o código gráfico de bajo nivel.

Beneficios de usar Three.js

  • Curva de aprendizaje más baja comparada con WebGL puro.
  • Comunidad activa y amplia documentación.
  • Compatible con todos los navegadores modernos.
  • Permite crear experiencias 3D profesionales.

Qué puedes crear con Three.js

  • Videojuegos 3D.
  • Visualizaciones de datos.
  • Modelos y productos interactivos.
  • Animaciones y simulaciones.
  • Fondos y efectos visuales avanzados.
  • Aplicaciones WebXR (VR y AR).

Requisitos previos

Para seguir este tutorial de Three.js necesitas conocimientos básicos de:

  • JavaScript
  • HTML
  • CSS

No se requieren conocimientos avanzados de matemáticas o gráficos, aunque ayudan en etapas intermedias.

Cómo instalar Three.js

Opción 1: Usar CDN (ideal para pruebas)

<script src="https://unpkg.com/three@0.165.0/build/three.min.js"></script>

Opción 2: Instalar vía NPM (recomendado para proyectos)

npm install three

Crear tu primera escena en Three.js

A continuación se muestra un ejemplo funcional para comenzar a trabajar con Three.js. Puedes copiarlo en un archivo HTML y abrirlo en tu navegador.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Three.js: Primera escena</title>
  <style>
    body { margin: 0; overflow: hidden; }
  </style>
</head>
<body>

<script src="https://unpkg.com/three/build/three.min.js"></script>
<script>
  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 3;

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshNormalMaterial();
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }

  animate();
</script>

</body>
</html>

Conceptos fundamentales de Three.js

1. Escena (Scene)

Es el contenedor principal donde se añaden todos los objetos 3D, luces y cámaras.

2. Cámara (Camera)

Define la perspectiva desde la cual se observa la escena. La más utilizada es PerspectiveCamera, ya que simula la visión humana.

3. Renderizador (WebGLRenderer)

Convierte tu escena 3D en gráficos visibles en el navegador utilizando WebGL.

4. Mallas (Mesh)

Son objetos formados por una geometría (forma) y un material (apariencia).

Ejemplos de geometrías disponibles:

new THREE.BoxGeometry()
new THREE.SphereGeometry()
new THREE.PlaneGeometry()

Cómo añadir luces en Three.js

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(3, 3, 3);
scene.add(light);

Tipos de luces más usadas:

  • AmbientLight
  • DirectionalLight
  • PointLight
  • SpotLight

Cómo usar OrbitControls para mover la cámara

OrbitControls permite rotar, hacer zoom y desplazar la cámara con el ratón.

<script src="https://unpkg.com/three/examples/js/controls/OrbitControls.js"></script>

const controls = new THREE.OrbitControls(camera, renderer.domElement);

Cómo cargar modelos 3D en Three.js (GLTF/GLB)

Los formatos recomendados son GLTF y GLB.

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('/model.glb', (gltf) => {
  scene.add(gltf.scene);
});

Animaciones en Three.js

Para reproducir animaciones dentro de modelos GLTF:

mixer = new THREE.AnimationMixer(model);
const action = mixer.clipAction(gltf.animations[0]);
action.play();

Dentro del ciclo de animación:

const delta = clock.getDelta();
mixer.update(delta);

Física en Three.js

Three.js no incluye un motor de física incorporado, pero se integra fácilmente con librerías como:

  • Cannon-es
  • Ammo.js
  • Rapier.js

Ejemplo básico:

import * as CANNON from "cannon-es";

Recursos recomendados para aprender Three.js

Documentación oficial: https://threejs.org/docs/

Editor visual: https://threejs.org/editor/

Ejemplos oficiales: https://threejs.org/examples/

Sitios educativos recomendados:

  • Three.js Journey
  • Three.js Fundamentals

Proyecto final recomendado para practicar

Para consolidar los conocimientos, es recomendable crear un mini proyecto que incluya:

  • Cámara con controles
  • Varias geometrías y materiales
  • Iluminación
  • Un modelo 3D cargado en GLTF
  • Interacción con el usuario
  • Animaciones

Por ejemplo: un mini juego 3D simple o un visor de modelos interactivo.

DJC > Tutorial