Three.js: qué es y cuándo conviene usar 3D en una web

Qué es Three.js y qué resuelve

Three.js es una biblioteca JavaScript para desarrollar escenas 3D en el navegador. Proporciona abstracciones como escenas, cámaras, geometrías, materiales y renderizadores, habitualmente sobre WebGL. No es un sistema de páginas web ni un sustituto de Astro, HTML y CSS.

// Con un proyecto que ya tenga el paquete three instalado
import * as THREE from "three";
const escena = new THREE.Scene();
const camara = new THREE.PerspectiveCamera(65, 1, 0.1, 100);
const cubo = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial({color: 0x72aa66}));
escena.add(cubo);

Este fragmento crea objetos; para mostrarlos todavía se necesita configurar un renderer y el canvas. Consulta el manual oficial.

Casos donde una escena 3D aporta valor

Un configurador de producto, un recorrido espacial o la explicación de una pieza industrial pueden beneficiarse de interacción tridimensional. En cambio, una sección comercial con texto y un botón rara vez necesita cargar una escena compleja solo para decorar. Debe existir una pregunta del usuario que el 3D ayude a responder.

Arquitectura y rendimiento

Conviene definir qué se carga, cuándo aparece, cómo se reduce la resolución en móviles y si el render puede detenerse al no estar visible. Optimiza modelos y texturas, limita luces y sombras y mide memoria, CPU, INP y LCP. No hagas render en cada fotograma si la escena es estática y no hay cambios.

Accesibilidad y alternativa sin WebGL

Los controles deben ser accesibles por teclado cuando sea posible y ofrecer etiquetas y contenido textual equivalente. Debe haber una alternativa útil cuando WebGL falla, se desactiva JavaScript o el usuario prefiere movimiento reducido. SEO necesita contenido HTML que explique el producto: una escena de canvas no sustituye información indexable.

Preguntas frecuentes