Llevando la interacción web al siguiente nivel: Mi experiencia añadiendo 3D a la 10K Zaragoza

El proyecto de la web de la 10K Zaragoza es uno de esos retos que te ilusionan desde el minuto uno. La base de la web ya estaba diseñada por otro equipo de desarrollo, pero la empresa Corre en Zaragoza me contrató para unirme al equipo técnico con un objetivo muy claro: darle un extra de interacción y sorprender al usuario.

¿Cómo logramos eso? Todo empezó, como las mejores ideas, con una ronda de preguntas y un brainstorming conjunto. Cada miembro del equipo fue aportando su visión y sus propuestas.

Por mi lado, siempre he hecho mis pinitos en el mundo del 3D. Hace años trabajaba bastante con 3D Studio Max, así que cuando llegó mi turno lo tuve claro: ¿y si añadimos un visor interactivo de la camiseta oficial en 3D directamente en la web? La propuesta encajó a la perfección y al equipo le pareció una idea increíble.

Volviendo a los orígenes: De 3D Studio Max a Blender

Con la luz verde del equipo, me puse manos a la obra junto a los compañeros de diseño. Mi primera parada fue Blender. Tuve que desempolvar conocimientos que hacía años que no usaba. Fue un proceso nostálgico pero intenso, recordando cómo funcionaban los pilares básicos del mundo tridimensional: posicionar la cámara, configurar las luces, trabajar con las texturas, los materiales y el movimiento en escena.

Cogí un objeto específico que sirviera como base para nuestra camiseta y comencé a aplicar los materiales para conseguir el acabado realista que buscábamos.

De Blender a la Web: La magia de Three.js y React

A la vez que peleaba con los vértices y texturas en Blender, empecé a trabajar en la parte del código. El objetivo era claro: coger ese modelo y renderizarlo en el navegador dándole al usuario la capacidad de interactuar con él.

Empecé haciendo pruebas con el modelo "en desnudo" (sin texturas complejas ni luces dinámicas) usando Three.js, la librería estándar por excelencia para renderizado 3D en la web. Sin embargo, dado que estábamos trabajando en un entorno moderno con React, pronto di el salto a React Three Fiber (R3F).

Aquí es donde la experiencia técnica se volvió realmente interesante. Uno de los mayores retos fue cambiar mi forma de pensar. Si te interesa la parte más técnica de este cambio de paradigma, te recomiendo leer mi artículo sobre React Three Fiber y la Programación Declarativa en 3D donde explico las diferencias con Vanilla Three.js.

Pero para que te hagas una idea rápida de lo elegante y declarativo que es trabajar con R3F, este es un pequeño fragmento de cómo se construye la escena:

<Canvas>
  <ambientLight intensity={1.2} />
  <RotatingLights />
  <Suspense fallback={<Loader />}>
    <ModelFactory url="/models/t-shirt.obj" color={colorSeleccionado} />
  </Suspense>
</Canvas>

Arquitectura y Optimización del Visor (TShirt3DPage)

Para llevar este desarrollo a producción en la web oficial, no podíamos simplemente volcar el renderizador 3D en la pantalla. Un visor tridimensional carga scripts pesados y modelos geométricos que pueden arruinar las métricas de rendimiento iniciales (FCP) y penalizar el SEO.

Por ello, implementamos una estructura desacoplada con optimizaciones clave:

1. Carga Diferida (Lazy Loading) de la Escena

El componente principal de la página (TShirt3DPage.jsx) importa el visor dinámicamente. Así, el navegador prioriza la descarga del HTML estructurado y las etiquetas SEO (manejadas con react-helmet-async) antes de cargar e inicializar WebGL:

// TShirt3DPage.jsx - Importación dinámica
const TShirtViewer = lazy(() => import('../components/3d/TShirtViewer'));
 
export const TShirt3DPage = () => {
  return (
    <>
      <Helmet>
        <title>Camiseta Oficial 3D - 10K Zaragoza 2026</title>
        <meta name="description" content="..." />
      </Helmet>
      {/* El visor solo se monta si está visible y en diferido */}
      <Suspense fallback={<Loader />}>
        <TShirtViewer color="#ffffff" />
      </Suspense>
    </>
  );
};

2. Normalización de Escala y Posicionado Automático

Dado que los diseñadores modelan a escalas arbitrarias en Blender, programamos un analizador (SceneProcessor) que lee el "bounding box" geométrico real del modelo para escalarlo y centrarlo automáticamente en pantalla, sin importar su tamaño de exportación original:

// SceneProcessor.jsx - Centrado automático
const { positionOffset, scale } = useMemo(() => {
  scene.updateMatrixWorld(true);
  const box = new THREE.Box3().expandByObject(scene);
  const center = new THREE.Vector3();
  box.getCenter(center);
  
  const size = new THREE.Vector3();
  box.getSize(size);
  
  const maxDim = Math.max(size.x, size.y, size.z);
  const targetSize = 2.2; // Escala ideal para el navegador
  const modelScale = maxDim > 0 ? targetSize / maxDim : 1;
 
  return {
    positionOffset: new THREE.Vector3(-center.x, -center.y, -center.z),
    scale: modelScale
  };
}, [scene]);

3. Iluminación Dinámica de Estudio

Para que la camiseta se viera premium y no "plana", creamos un set de luces de contra (RotatingLights) que rotan constantemente en cada render mediante useFrame, resaltando las texturas y sombras de las arrugas en el tejido:

// Componente para luces giratorias en TShirtViewer.jsx
function RotatingLights() {
  const groupRef = useRef();
  
  useFrame((state, delta) => {
    if (groupRef.current) {
      groupRef.current.rotation.y += delta * 0.4; // Giro perpetuo suave
    }
  });
 
  return (
    <group ref={groupRef}>
      <directionalLight position={[4, 2, 4]} intensity={3} color="#C4AA93" /> {/* Dorada */}
      <directionalLight position={[-4, 1, -4]} intensity={5} color="#5A2030" /> {/* Granate */}
      <directionalLight position={[0, 4, 0]} intensity={3} color="#ffffff" />
    </group>
  );
}

4. UX en Dispositivos Móviles: El Bloqueo de Interacción

En pantallas táctiles pequeñas, arrastrar un modelo 3D puede provocar que el usuario se quede atrapado dentro del visor sin poder hacer scroll en la página. Para solucionarlo, creamos una capa de activación manual: por defecto el Canvas tiene los eventos táctiles bloqueados (pointer-events-none) y muestra una capa translúcida para activarlo a demanda.

// Estructura condicional de gestos interactivos en TShirtViewer.jsx
const isInteractive = !isMobile || isActive;
 
return (
  <div className="w-full h-full relative">
    <div className={isInteractive ? 'pointer-events-auto' : 'pointer-events-none'}>
      <Canvas>
        <OrbitControls enabled={isInteractive} />
      </Canvas>
    </div>
    {isMobile && !isActive && (
      <div className="absolute inset-0 bg-black/10 flex items-center justify-center">
        <button onClick={() => setIsActive(true)}>Activar Vista 3D</button>
      </div>
    )}
  </div>
);

Los Retos Técnicos y Soluciones

Para llevar la experiencia de la camiseta a otro nivel, implementamos varias soluciones clave:

1. Escalado y Centrado Dinámico: En 3D, exportar un modelo a la escala perfecta para web es difícil. Programamos un procesador (THREE.Box3) que lee la "caja" matemática que envuelve a la camiseta y la escala automáticamente para que siempre encuadre perfecto en la pantalla del usuario.
2. Materiales Dinámicos: El usuario no solo rota la camiseta, sino que la web le aplica el color en tiempo real. R3F nos permite conectar el estado de React (ej: el color seleccionado) directamente a las propiedades del MeshStandardMaterial de la camiseta.
3. Iluminación de Estudio Dinámica: Para que la tela no se viera "plana" y pareciera un producto premium, creé un componente de luces rotatorias. Un conjunto de luces direccionales (doradas, granates y blancas) que giran perpetuamente alrededor de la prenda, resaltando sus arrugas y textura como en un escaparate real.

Conclusión

El verdadero valor de llevar el 3D al navegador no reside solo en la espectacularidad visual, sino en la mantenibilidad y el flujo de trabajo. Herramientas como React Three Fiber nos permiten tratar escenas complejas de Three.js con la misma soltura con la que gestionamos el estado de un botón o un modal en React.

El mayor aprendizaje de este proyecto ha sido confirmar que el puente entre el diseño puro (modelar y texturizar en Blender) y la programación declarativa está por fin unificado. Ajustar luces de estudio dinámicas, inyectar colores en tiempo real o recalcular la escala del modelo para que encaje en la pantalla ya no implica lidiar con matemáticas oscuras del DOM; es simplemente una extensión natural de nuestra UI.

Crear esta interacción para la 10K Zaragoza me ha demostrado que el salto evolutivo real en el desarrollo web actual es poder ofrecer una experiencia de producto inmersiva sin sacrificar rendimiento ni limpieza de código. ¡Y ver al usuario jugar con la prenda en la pantalla no tiene precio!