Tutorial de Three.js: Una guía para principiantes

Three.js es una de las bibliotecas de JavaScript más populares para crear gráficos 3D en navegadores web. Construida sobre WebGL, simplifica el proceso de crear y mostrar gráficos 3D animados por ordenador en un navegador web sin necesidad de que aprendas WebGL de bajo nivel. Ya sea que estés buscando crear visualizaciones interactivas, juegos o experiencias web inmersivas, Three.js proporciona las herramientas que necesitas para dar vida a tus ideas.

Antes de sumergirnos en el desarrollo con Three.js, considera probar Apidog como una alternativa a Postman para tus necesidades de pruebas de API. Apidog ofrece una interfaz intuitiva con potentes funciones para el desarrollo, las pruebas y la documentación de API, todo ello sin la sobrecarga de funciones que muchos usuarios encuentran frustrante en Postman. Es una excelente herramienta complementaria al desarrollar aplicaciones web que interactúan con las API.

button

¡Ahora, comencemos nuestro viaje en Three.js!

1. Configurando tu entorno

Instalación

Hay varias formas de incluir Three.js en tu proyecto:

Opción 1: Usando npm (Recomendado)

npm install three

Luego, impórtalo en tu archivo JavaScript:

import * as THREE from 'three';

Opción 2: Usando una CDN

Añade esto a tu archivo HTML:

<script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>

Opción 3: Descargar e incluir localmente

Descarga la biblioteca desde el sitio web de Three.js, e inclúyela en tu HTML:

<script src="path/to/three.min.js"></script>

Estructura del proyecto

Para un proyecto básico de Three.js, necesitarás:

project-folder/
├── index.html
├── style.css
└── script.js

Tu archivo index.html debería incluir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mi aplicación Three.js</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.157.0/build/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. Comprendiendo los fundamentos

Three.js opera sobre algunos conceptos clave que son esenciales para entender:

Los componentes principales

Escena: Piensa en esto como un contenedor que guarda todos tus objetos, luces y cámaras.
Cámara: Define qué parte de la escena es visible (tu punto de vista).
Renderizador: Dibuja lo que la cámara ve en tu pantalla.
Objetos (Mallas): Los objetos 3D en tu escena, típicamente compuestos de geometría y material.
Luces: Fuentes de iluminación para tu escena.

Creando tu primera escena

Aquí tienes un ejemplo básico para crear un cubo giratorio:

// Create the scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(
    75,                                     // Field of view
    window.innerWidth / window.innerHeight, // Aspect ratio
    0.1,                                    // Near clipping plane
    1000                                    // Far clipping plane
);
camera.position.z = 5;

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

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

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

3. Haciendo tu aplicación adaptable

Para asegurar que tu aplicación Three.js se vea bien en todos los dispositivos, necesitas manejar el cambio de tamaño de la ventana:

// Handle window resizing
window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    // Update renderer
    renderer.setSize(width, height);
    
    // Update camera
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

4. Añadiendo materiales e iluminación

Las escenas básicas son solo el comienzo. Mejoremos la calidad visual con materiales y luces:

Materiales

// Standard material with reflection
const material = new THREE.MeshStandardMaterial({
    color: 0x0088ff,       // Blue color
    roughness: 0.5,        // Somewhat shiny
    metalness: 0.5,        // Somewhat metallic
});

// Phong material for simple shiny surfaces
const phongMaterial = new THREE.MeshPhongMaterial({
    color: 0xff0000,       // Red color
    shininess: 100,        // Very shiny
    specular: 0x111111     // Specular highlight color
});

Luces

// Add ambient light
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// Add directional light (like the sun)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// Add point light (like a light bulb)
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

5. Creando diferentes geometrías

Three.js viene con muchas geometrías incorporadas:

// Sphere
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.x = -3;
scene.add(sphere);

// Cylinder
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const cylinder = new THREE.Mesh(cylinderGeometry, material);
cylinder.position.x = 0;
scene.add(cylinder);

// Torus (donut)
const torusGeometry = new THREE.TorusGeometry(0.8, 0.3, 16, 100);
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.x = 3;
scene.add(torus);

6. Creando texto en Three.js

Se puede añadir texto a tu escena usando TextGeometry:

// First, load the font
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
    const textGeometry = new THREE.TextGeometry('Hello Three.js!', {
        font: font,
        size: 0.5,
        height: 0.1,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5
    });
    
    const textMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
    const text = new THREE.Mesh(textGeometry, textMaterial);
    
    // Center the text
    textGeometry.computeBoundingBox();
    const textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
    text.position.x = -textWidth / 2;
    
    scene.add(text);
});

7. Dibujando líneas

Puedes crear líneas en Three.js para wireframes o visualización de rutas:

// Create points for the line
const points = [];
points.push(new THREE.Vector3(-2, 0, 0));
points.push(new THREE.Vector3(0, 2, 0));
points.push(new THREE.Vector3(2, 0, 0));

// Create the line geometry
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

// Create material
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });

// Create the line
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

8. Interacción y controles

Para permitir a los usuarios interactuar con tu escena 3D, puedes añadir controles:

// Import OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Create controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Add smooth damping effect
controls.dampingFactor = 0.05;

// Update the animation loop
function animate() {
    requestAnimationFrame(animate);
    
    // Update controls
    controls.update();
    
    renderer.render(scene, camera);
}

9. Cargando modelos 3D

Puedes importar modelos creados en software como Blender:

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

const loader = new GLTFLoader();
loader.load(
    'path/to/model.gltf',
    // Called when loaded
    function(gltf) {
        scene.add(gltf.scene);
    },
    // Called during loading
    function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    // Called on error
    function(error) {
        console.error('An error happened', error);
    }
);

10. Depuración y consejos de rendimiento

Panel de estadísticas

import Stats from 'three/examples/jsm/libs/stats.module.js';

const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
    requestAnimationFrame(animate);
    stats.begin();
    
    // Your animation code here
    
    stats.end();
    renderer.render(scene, camera);
}

Consejos de rendimiento

Usa BufferGeometry en lugar de Geometry (que está obsoleto)
Reutiliza materiales y geometrías cuando sea posible
Establece renderer.powerPreference = 'high-performance' para un mejor uso de la GPU
Usa Object3D.frustumCulled = true para ocultar objetos fuera de la vista de la cámara
Optimiza la complejidad del modelo usando menos polígonos donde sea posible

Conclusión

Ahora has aprendido los conceptos básicos de Three.js, desde la configuración de tu entorno hasta la creación de escenas 3D interactivas. Esto es solo el comienzo: Three.js ofrece una amplia gama de funciones para crear impresionantes experiencias web en 3D.

Para profundizar tus conocimientos, explora la documentación oficial de Three.js y la galería de ejemplos. La comunidad también está activa en foros y GitHub, proporcionando recursos y soporte para desarrolladores de todos los niveles.

Recuerda, la mejor manera de aprender es experimentando. Comienza con proyectos simples y avanza gradualmente hacia escenas más complejas. ¡Con práctica y paciencia, estarás creando impresionantes experiencias web en 3D en poco tiempo!

¡Feliz codificación con Three.js!

button