Diseño UI/UX Inmersivo con Three.js y WebGL

La web plana está muriendo. Los usuarios de 2026 esperan experiencias que respondan, que respiren, que se sientan vivas. Three.js nos permite crear interfaces que trascienden las limitaciones del DOM tradicional y se adentran en el territorio del arte interactivo.

El Renacimiento del WebGL

Durante años, WebGL fue territorio exclusivo de demos técnicas y juegos experimentales. Pero la combinación de hardware más potente, APIs más maduras y el auge del "creative coding" ha democratizado el 3D en la web. Hoy, desde portfolios personales hasta landing pages de startups de IA, el 3D es la nueva frontera del diseño digital.

Three.js: El Puente entre Arte y Código

Three.js abstrae la complejidad de WebGL en una API de alto nivel que se siente casi declarativa. No necesitas entender matrices de transformación o shaders GLSL para crear algo impresionante (aunque ayuda).

Anatomía de una Escena Básica

Toda experiencia 3D en Three.js se compone de tres elementos fundamentales: una escena (el contenedor), una cámara (el punto de vista) y un renderer (el motor de dibujo).

import * as THREE from 'three';

// 1. Escena: El universo donde viven tus objetos
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

// 2. Cámara: Los ojos del usuario
const camera = new THREE.PerspectiveCamera(
  75,                                    // FOV
  window.innerWidth / window.innerHeight, // Aspect ratio
  0.1,                                   // Near clipping plane
  1000                                   // Far clipping plane
);
camera.position.z = 5;

// 3. Renderer: El pintor que dibuja cada frame
const renderer = new THREE.WebGLRenderer({ 
  antialias: true,
  alpha: true  // Fondo transparente para integrarse con el DOM
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

Geometrías Procedurales y Arte Generativo

Lo verdaderamente emocionante de Three.js no es renderizar cubos estáticos, sino crear formas que responden a datos, tiempo y comportamiento del usuario. Esto es arte generativo.

Ejemplo: Esfera Reactiva al Audio

Imagina una esfera cuya superficie se deforma en tiempo real según las frecuencias del audio que está reproduciendo el usuario:

// Crear geometría con suficientes vértices para deformar
const geometry = new THREE.IcosahedronGeometry(2, 64);
const material = new THREE.MeshStandardMaterial({
  color: 0x00ffff,
  wireframe: true,
  emissive: 0x001111
});
const sphere = new THREE.Mesh(geometry, material);

// En el loop de animación, deformar según datos de audio
function animate() {
  requestAnimationFrame(animate);
  
  const positions = geometry.attributes.position;
  const frequencies = audioAnalyser.getFrequencyData();
  
  for (let i = 0; i < positions.count; i++) {
    const vertex = new THREE.Vector3().fromBufferAttribute(positions, i);
    const freqIndex = Math.floor((i / positions.count) * frequencies.length);
    const amplitude = frequencies[freqIndex] / 256;
    
    // Normalizar y escalar
    vertex.normalize().multiplyScalar(2 + amplitude * 0.5);
    positions.setXYZ(i, vertex.x, vertex.y, vertex.z);
  }
  
  positions.needsUpdate = true;
  renderer.render(scene, camera);
}

Shaders: El Lenguaje del GPU

Para efectos verdaderamente únicos, necesitas hablar directamente con la GPU usando shaders GLSL. Un shader es un pequeño programa que se ejecuta en paralelo para cada vértice o cada píxel de tu escena.

Shader de Ruido Orgánico

Este fragment shader crea un patrón de ruido que se anima suavemente, perfecto para fondos ambientales:

// Fragment Shader
uniform float uTime;
uniform vec2 uResolution;

// Función de ruido simplex (simplificada)
float noise(vec2 p) {
  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  vec2 uv = gl_FragCoord.xy / uResolution.xy;
  
  // Crear capas de ruido a diferentes escalas
  float n = 0.0;
  n += 0.5 * noise(uv * 4.0 + uTime * 0.1);
  n += 0.25 * noise(uv * 8.0 - uTime * 0.15);
  n += 0.125 * noise(uv * 16.0 + uTime * 0.2);
  
  // Mapear a colores cyan/magenta
  vec3 color = mix(
    vec3(0.0, 1.0, 1.0),  // Cyan
    vec3(1.0, 0.0, 1.0),  // Magenta
    n
  );
  
  gl_FragColor = vec4(color * 0.3, 1.0);
}

React Three Fiber: El Matrimonio Perfecto

Para proyectos modernos con React, React Three Fiber (R3F) es el estándar. Permite declarar escenas 3D como componentes JSX, integrándose perfectamente con el ecosistema React.

import { Canvas, useFrame } from '@react-three/fiber';
import { useRef } from 'react';

function AnimatedBox() {
  const meshRef = useRef();
  
  useFrame((state, delta) => {
    meshRef.current.rotation.x += delta * 0.5;
    meshRef.current.rotation.y += delta * 0.3;
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="cyan" />
    </mesh>
  );
}

export default function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <AnimatedBox />
    </Canvas>
  );
}

Optimización: El Arte de los 60 FPS

Una experiencia 3D que tartamudea es peor que no tener 3D. Estas son las técnicas esenciales para mantener el rendimiento:

• Level of Detail (LOD): Reducir la complejidad de objetos lejanos.
• Instancing: Renderizar miles de objetos idénticos en una sola draw call.
• Frustum Culling: No renderizar objetos fuera del campo de visión.
• Texture Atlases: Combinar múltiples texturas en una para reducir cambios de estado.
• RequestAnimationFrame throttling: Limitar a 30 FPS en dispositivos móviles.

"El mejor efecto visual es el que el usuario no nota conscientemente, pero que hace que la experiencia se sienta mágica."

Recursos Esenciales

Para profundizar en el mundo del 3D web, estos recursos son invaluables:

• Three.js Journey: El curso definitivo por Bruno Simon (vale cada euro).
• Shadertoy: Comunidad de shaders con miles de ejemplos interactivos.
• pmndrs: El colectivo detrás de R3F, Drei, y otras herramientas esenciales.
• The Book of Shaders: Introducción visual a la programación de shaders.