DJC2 - Día 5 - Creando Videojuegos

DJC > Daily > DJC2

¿Qué es Three.js?

La librería que llevó los gráficos 3D del mundo gamer… directamente al navegador.

Three.js es una de las herramientas más importantes del ecosistema web moderno. Permite crear gráficos 3D en tiempo real, animaciones, experiencias interactivas y escenas completas —todo usando JavaScript y WebGL— sin instalar nada adicional.

Hoy es la base de:

  • visualizadores de productos en 3D,
  • webs con efectos cinematográficos,
  • videojuegos en el navegador,
  • presentaciones interactivas,
  • simulaciones científicas y arquitectónicas,
  • y experiencias inmersivas en VR/AR.

Su mayor fuerza es que simplifica el 90% del trabajo pesado que normalmente requiere programar 3D, permitiéndote concentrarte en la creatividad.

¿Qué puedes hacer con Three.js?

  • Renderizar modelos 3D (OBJ, GLTF, FBX, etc.).
  • Crear luces, sombras y materiales realistas.
  • Añadir físicas y animaciones.
  • Diseñar mundos completos navegables con el mouse.
  • Integrar efectos como partículas, neblina, reflejos y más.
  • Construir experiencias VR/AR directamente desde el navegador.

Ejemplo básico: una escena 3D con un cubo animado

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

camera.position.z = 3;

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

animate();

Esto crea:

  • Una escena 3D
  • Un cubo
  • Luz direccional
  • Una animación básica
  • Un renderizado en tiempo real

Todo con menos de 40 líneas de código.

¿Por qué usar Three.js?

  • No requiere motores pesados.
  • Funciona en cualquier navegador moderno.
  • Tiene una comunidad enorme.
  • Soporta shaders personalizados.
  • Es perfecto para proyectos interactivos o de alto impacto visual.
  • Se integra fácilmente con React, Svelte, Vue y frameworks como React Three Fiber.

En mi proceso actual, Three.js me permite:

  • Prototipar ideas visuales rápidamente.
  • Crear demos interactivas sin herramientas externas.
  • Integrar modelos 3D directamente en la web.
  • Experimentar con animaciones y efectos avanzados.
  • Preparar contenido visual atractivo para redes sociales.

Versiones

v0.1.0

  • ¿Qué es Three.js?

DJC > Daily > DJC2