Three.js Tutorial: Crea Gráficos 3D Interactivos con JavaScript
Three.js es una biblioteca JavaScript de código abierto que permite crear sitios web dinámicos e interactivos con gráficos 2D y 3D. Este tutorial, dirigido a quienes ya dominan JavaScript, facilita la introducción a Three.js y WebGL. No se requieren conocimientos previos de gráficos por computadora ni matemáticas avanzadas, solo una comprensión general de HTML, CSS y JavaScript.
Si te apasiona el desarrollo web y quieres añadir una capa de interacción e inmersión a tus proyectos, Three.js es la herramienta perfecta. En este tutorial, te guiaremos paso a paso desde los conceptos básicos hasta la creación de escenas 3D complejas, explorando las posibilidades que ofrece esta potente biblioteca.
Introducción a Three.js y WebGL
Three.js es una biblioteca de alto nivel construida sobre WebGL, una API de JavaScript que permite a los navegadores web renderizar gráficos 3D. La magia de Three.js radica en su capacidad para abstraer la complejidad de WebGL, simplificando el proceso de creación de gráficos 3D en el navegador.
Instalación y configuración
Para empezar a trabajar con Three.js, primero debes incluir la biblioteca en tu proyecto. Puedes hacerlo descargando el archivo JavaScript de la página web oficial de Three.js o utilizando un CDN:
html
<!DOCTYPE html>
<html>
<head>
<title>Three.js Tutorial</title>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
// Tu código Three.js
</script>
</body>
</html>
Escena, cámara y renderizador
Una escena en Three.js representa el espacio 3D donde se ubican todos los objetos. La cámara es el punto de vista desde el que se observa la escena, y el renderizador se encarga de dibujar la escena en el navegador.
«`javascript
// Crea una escena
const scene = new THREE.Scene();
// Crea una cámara
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Crea un renderizador
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
«`
Objetos 3D: Geometría y materiales
Una vez creada la escena, la cámara y el renderizador, puedes empezar a añadir objetos 3D. En Three.js, un objeto 3D se define mediante su geometría (forma) y material (apariencia).
«`javascript
// Crea una geometría de cubo
const geometry = new THREE.BoxGeometry(1, 1, 1);
// Crea un material de color rojo
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// Crea un objeto de malla (mesh) con la geometría y el material
const cube = new THREE.Mesh(geometry, material);
// Añade el cubo a la escena
scene.add(cube);
«`
Animación y renderizado
Para animar los objetos 3D, puedes utilizar un bucle de animación que se ejecuta cada cuadro del navegador. En este bucle, puedes actualizar la posición, rotación o escala de los objetos, así como otras propiedades.
«`javascript
function animate() {
requestAnimationFrame(animate);
// Actualiza la posición del cubo
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Renderiza la escena
renderer.render(scene, camera);
}
animate();
«`
Explorando las posibilidades de Three.js
Modelado de objetos 3D
Three.js ofrece una amplia gama de geometrías predefinidas para crear diferentes objetos 3D, como cubos, esferas, conos, cilindros, etc.
«`javascript
// Crea una esfera
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
// Crea un cilindro
const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
scene.add(cylinder);
«`
También puedes crear geometrías personalizadas utilizando la API de Three.js.
Materiales y texturas
Los materiales determinan la apariencia de los objetos 3D. Three.js ofrece una variedad de materiales, incluyendo:
- MeshBasicMaterial: Material básico sin iluminación.
- MeshLambertMaterial: Material que se ilumina con una fuente de luz.
- MeshPhongMaterial: Material que se ilumina con una fuente de luz y proporciona reflejos especulares.
- MeshStandardMaterial: Material PBR (Physically Based Rendering).
- MeshPhysicalMaterial: Material PBR con propiedades físicas más precisas.
Puedes añadir texturas a los materiales para darles un aspecto más realista.
«`javascript
// Carga una textura
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(«textura.jpg»);
// Crea un material con la textura
const material = new THREE.MeshBasicMaterial({ map: texture });
«`
Luces
La iluminación es esencial para crear escenas 3D realistas. Three.js proporciona diferentes tipos de luces:
- AmbientLight: Luz ambiental que ilumina todas las superficies por igual.
- DirectionalLight: Luz direccional que ilumina todas las superficies desde una dirección específica.
- PointLight: Luz puntual que ilumina todas las superficies alrededor de un punto específico.
- SpotLight: Luz de foco que ilumina todas las superficies desde un punto específico y con un ángulo determinado.
«`javascript
// Crea una luz ambiental
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// Crea una luz direccional
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);
«`
Interacción con el usuario
Puedes hacer que tus escenas 3D sean interactivas utilizando eventos del ratón o del teclado.
javascript
// Detecta eventos del ratón
window.addEventListener("mousemove", (event) => {
// Actualiza la posición de la cámara en función del movimiento del ratón
camera.position.x = event.clientX / window.innerWidth * 10 - 5;
camera.position.y = event.clientY / window.innerHeight * 10 - 5;
});
Optimización del rendimiento
Para garantizar que tus escenas 3D se rendericen de forma fluida, es importante optimizar el rendimiento de tu código Three.js. Algunas estrategias de optimización incluyen:
- Utilizar geometrías simplificadas.
- Utilizar materiales con menos propiedades.
- Reducir el número de objetos en la escena.
- Optimizar las texturas.
- Utilizar la caché de texturas.
Ejemplos de proyectos con Three.js
Three.js se utiliza en una gran variedad de proyectos, incluyendo:
- Visualizaciones de datos: Crea visualizaciones interactivas de datos complejos.
- Videojuegos: Desarrolla juegos 3D para navegadores web.
- Simulaciones: Crea simulaciones científicas o industriales en 3D.
- Diseño web: Añade gráficos 3D a tus sitios web para mejorar la experiencia del usuario.
Conclusión
Three.js es una potente biblioteca JavaScript que te permite crear gráficos 3D interactivos en el navegador. Con este tutorial, has aprendido los fundamentos de Three.js, desde la configuración básica hasta la creación de escenas 3D complejas. Ahora, puedes explorar las infinitas posibilidades que ofrece esta biblioteca para crear proyectos web dinámicos e innovadores. No dudes en experimentar con diferentes geometrías, materiales, luces y técnicas de interacción para llevar tu creatividad al siguiente nivel.