Japón está reescribiendo la web con Three.js: por qué estos sitios 3D “te vuelan la cabeza” (y cómo lo hacen)

Minimalismo zen por fuera, hiper-técnico por dentro. Una nueva hornada de estudios y makers en Japón está transformando la web en espacios inmersivos, fluidos y sorprendentemente rápidos gracias a Three.js, la librería 3D en JavaScript creada para que cualquiera —con un poco de disciplina— pueda llevar gráficos en tiempo real al navegador. No son demos sueltas: son landing pages, portfolios, brand experiences y microsites que hinchan menos el bundle que muchas webs “planas”, y aun así despliegan escenas 3D interactivas, partículas, shaders y animaciones a 60 fps.

La receta no es un secreto. Está publicada, documentada y viva en GitHub (mrdoob/three.js), con un objetivo deliberadamente sobrio: “una librería 3D ligera, fácil de usar, cross-browser y de propósito general”. Hoy Three.js se apoya en WebGL y WebGPU como motores de render (con SVG y CSS3D como addons), y su ecosistema —Examples, Docs, Manual, Forum, Discord— es lo bastante maduro como para que diseño y código vayan de la mano desde el primer boceto.

Los japoneses con ThreeJS están creando páginas web que te vuelan la cabeza: pic.twitter.com/GJgQ3u3ov5

— Miguel Ángel Durán (@midudev) October 3, 2025

El “estilo japonés” aplicado al 3D web

Quien haya navegado sitios japoneses recientes reconocerá patrones repetidos:

• Simplicidad deliberada en UI, con tipografías limpias y mucho aire… para que el escenario 3D lleve el peso expresivo.
• Microinteracciones precisas: el 3D responde al scroll, al puntero, a la orientación del móvil. Nada sobra: cada reacción tiene una razón.
• Aprovechamiento de WebGPU donde está disponible, con fallback automático a WebGL: se eleva la calidad de materiales y post-processing sin castigar baterías.
• Cargas progresivas y texturas comprimidas (KTX2/BasisU), geometrías glTF optimizadas y análisis de bundle al milímetro: belleza sí, pero con disciplina de rendimiento.

El resultado “vuela la cabeza” no por llenar la pantalla de efectos, sino por hacer que todo fluya a la primera, incluso en máquinas de gama media. La clave: buena artesanía de assets y métricas cuidando cada milisegundo.

Qué es Three.js (y por qué se ha convertido en el estándar de facto)

• Ligera y modular. Core simple para escena, cámara, luces, materiales y render loop. Lo complejo llega como addons y utilidades.
• Dos backends de render modernos: WebGL (universal) y WebGPU (nuevo estándar con mejores shaders, compute y pipelines).
• Ecosistema pedagógico. La carpeta Examples es casi un curso: partículas, post-processing, PBR, instanciación, raycasting, gizmos, loaders GLTF/DRACO/KTX2, etc.
• Curva de entrada razonable. Con unas decenas de líneas se tiene algo visible, animado y escalable.

El hello world de la repo es revelador: crea escena, cámara, mesh y bucle de animación en pocas líneas. Ese “esqueleto” sostiene desde un cubo girando hasta una experiencia AAA bien optimizada.

import * as THREE from 'three';

const width = window.innerWidth, height = window.innerHeight;

// Cámara
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
camera.position.z = 1;

// Escena
const scene = new THREE.Scene();

// Geometría y material
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Render
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

// Animación
renderer.setAnimationLoop((t) => {
  mesh.rotation.x = t / 2000;
  mesh.rotation.y = t / 1000;
  renderer.render(scene, camera);
});
Lenguaje del código: JavaScript (javascript)

¿Y WebGPU? Three.js abstrae lo suficiente para que el salto sea gradual. En navegadores compatibles, los renderers WebGPU ya permiten materiales físicamente correctos más complejos y postprocesado eficiente, manteniendo el mismo modelo mental.

Cómo lo están logrando: técnica con cabeza (y métricas)

El “secreto” japonés no es ningún truco mágico: procedimiento y medición.

1. Assets impecables.
   • glTF 2.0 como formato canónico, con instancing y LOD.
   • Compresión de geometrías con Draco y de texturas con KTX2/BasisU.
   • Baked lighting cuando no hace falta iluminación dinámica.
   • Atlas de texturas para reducir draw calls.
2. Carga por etapas.
   • Skeleton de UI antes del 3D; prefetch de lo crítico; lazy-load del resto.
   • Indicadores sutiles de progreso que no bloquean la interacción.
   • Fallbacks gráficos precomputados para hardware flojo.
3. Optimización de render.
   • InstancedMesh para elementos repetidos (hojas, partículas).
   • Frustum culling/occlusion tricks y control de pixel ratio según batería y temperatura.
   • Post-processing minimalista y medido (bloom suave, DOF sutil, tone mapping correcto).
   • Tamaño de bundle bajo control (código y assets). Tip: si clonas la repo completa de Three, el histórico pesa ~2 GB; usa --depth=1 para evitarlo.
4. Accesibilidad y SEO (sí, con 3D también).
   • Contenido semántico fuera del lienzo 3D: títulos, descripciones, alt text para snapshots.
   • Controles accesibles (teclado), modo reducción de movimiento y pausa del loop si la pestaña pierde foco.
   • Indexables que sobreviven sin WebGL/WebGPU (capturas, server-side de fallback, texto).
5. Telemetría real.
   • FID/LCP/CLS con y sin 3D.
   • FPS, CPU/GPU frame time y uso de memoria en producción.
   • Estrategias de degradación progresiva automáticas si el FPS cae de 30.

Piezas que marcan diferencia

• Loaders nativos (GLTFLoader, KTX2Loader, DRACOLoader) bien acompañados de utilidades.
• Raycaster y Pointer events para picking preciso.
• AnimationMixer para clips y timelines reutilizables.
• PMREMGenerator para entornos PBR limpios.
• Nodes & shaders: shader chunks y node materials para estilos propios sin reinventar el pipeline.

Quien busca una capa declarativa puede sumar React Three Fiber o utilidades como PostProcessing; pero en Japón se ve a menudo un vanilla Three.js muy cuidado, porque da control total y menos sobrecarga.

Tres patrones “muy Japón” que puedes replicar mañana

1. Hero 3D reactivo al scroll.
   Con setAnimationLoop y un pequeño easing, el scroll controla la cámara y los uniforms del shader. Sutileza ante todo: no marear, guiar.
2. Catálogo de producto en 3D comprimido.
   Un solo glTF con variantes por morph targets o material swapping; texturas KTX2, anotaciones en CSS sobre el canvas, raycast para hotspots.
3. Storytelling con timelines.
   Pocas escenas, transiciones suaves de cámara y post-fx medidos. El 3D acompaña al relato; no compite con el texto.

Checklist de rendimiento (pegado al monitor)

• Texturas < 4K, comprimidas (KTX2).
• Geometrías draco + instancing si hay repetición.
• PixelRatio dinámico en móvil.
• Pocos post-fx, y sólo si suman.
• Desactivar sombras donde no aportan; si se usan, bake cuando sea viable.
• Límites de draw calls y triángulos definidos por viewport objetivo.
• Telemetría de FPS y tiempos por frame en producción.
• Fallback claro si no hay WebGL/WebGPU.

Por dónde empezar (sin tropezar)

• Explora los Examples de la repo; copia uno y sustitúyelo por tus assets.
• Monta Vite (o similar) y activa análisis del bundle.
• Importa glTF con GLTFLoader y comprime con Draco + KTX2.
• Ensaya post-fx con un solo efecto (bloom sutil).
• Perf first: mide desde el minuto uno.

Si vas a clonar el repositorio, recuerda: el histórico completo ronda 2 GB; para evitarlo, usa:

git clone --depth=1 https://github.com/mrdoob/three.js.git
Lenguaje del código: PHP (php)

Por qué “los japoneses” destacan ahora

Porque han cruzado tres disciplinas a la vez: dirección de arte con criterio, optimización sin concesiones y desarrollo que respeta los límites del dispositivo. No es magia; es oficio. Y Three.js les da el marco justo para que ese oficio luzca en cualquier navegador moderno.

---

Preguntas frecuentes

¿Three.js usa WebGL o WebGPU?
Ambos. WebGL es el estándar universal y estable; WebGPU ya está disponible en navegadores modernos y ofrece más calidad y rendimiento. Three.js abstrae los dos.

¿Puedo tener buenas Core Web Vitals con 3D?
Sí, si cargas por etapas, controlas texturas y post-fx, ajustas pixel ratio y mantienes LCP basado en contenido HTML visible antes del canvas.

¿Qué formato de modelos conviene?
glTF 2.0 con Draco para geometrías y KTX2 para texturas. Es el estándar web actual y tiene soporte directo en Three.js.

¿Y si mi público no soporta WebGL/WebGPU?
Prepara fallbacks (imágenes o vídeo pre-render), conserva HTML semántico y no bloquees la UX si el canvas no inicia. La experiencia debe degradar con gracia.

---

Repositorio oficial: github.com/mrdoob/three.js · Ejemplos y documentación dentro del proyecto.