Cómo crear una galería 3D interactiva con desplazamiento usando Blender, Three.js

El desarrollo web inmersivo avanza hacia experiencias cada vez más interactivas. Un ejemplo destacado es la creación de galerías tridimensionales que reaccionan al desplazamiento del usuario. En este caso, el proyecto propone combinar Blender, Three.js y GSAP para lograr un recorrido visual fluido, donde la cámara se mueve sobre una trayectoria personalizada mientras las imágenes cobran vida con movimiento y profundidad.

El tutorial publicado por Codrops presenta una propuesta creativa para construir una galería 3D guiada por scroll. Utiliza un camino de cámara diseñado en Blender, renderizado en Three.js y animado con GSAP (GreenSock Animation Platform). La combinación de estas herramientas logra una experiencia visual similar a un movimiento de cámara de cine que avanza a medida que el usuario se desplaza por la página.

Según Fuente original, la información se basa en Building a Scroll-Driven 3D Gallery Using a Blender Camera Path with Three.js and GSAP.

galería 3D con scroll en Three.js y GSAP: Diseñar la trayectoria en Blender: el punto de partida creativo

Todo comienza dentro de Blender, donde se crea la curva que definirá el recorrido de la cámara. Al añadir una curva Bézier y moldearla en modo edición, el desarrollador decide la composición y el ritmo de la experiencia: puede optar por una espiral envolvente, una onda suave o un trayecto con giros pronunciados. Esta curva se exporta luego como un archivo JSON que conservará las coordenadas necesarias para su reconstrucción dentro del entorno de Three.js.

La exportación requiere un paso adicional: adaptar el sistema de coordenadas de Blender al de Three.js. En Blender, el eje Z apunta hacia arriba, mientras que en Three.js el eje vertical es Y. Si no se realiza esta conversión, la cámara se movería de manera incorrecta dentro del espacio tridimensional. Un pequeño script en Python ejecutado desde el área de Scripting de Blender remapea los ejes para asegurar una interpretación adecuada.

Reconstrucción de la curva y la escena en Three.js

Con el archivo exportado, Three.js puede recrear el camino y generar la escena. Se configura el renderizador, la cámara y los elementos de iluminación, y se aplica un leve efecto de niebla para acentuar la sensación de profundidad. A partir de la curva obtenida, se definen puntos de ubicación exactos donde se colocarán las imágenes, distribuidas de forma equidistante para mantener un flujo visual coherente.

Para lograr esta reconstrucción, se emplea la clase THREE.CatmullRomCurve3, que interpola suavemente los puntos contenidos en el archivo JSON. Esta curva permite obtener tanto la posición como la dirección en cada punto, información esencial para orientar correctamente los planos donde se proyectarán las texturas. De esa forma, cada imagen se alinea naturalmente con la curva, evitando giros bruscos o transiciones abruptas.

Ubicación y comportamiento de las imágenes en la galería

El proyecto utiliza 500 planos que actúan como portadores de imágenes. Cada uno toma una textura de una colección precargada, evitando cargas duplicadas que saturen la memoria gráfica. Esta optimización permite que la experiencia sea fluida incluso en equipos de prestaciones medias.

Los planos se distribuyen a lo largo del eje de la curva utilizando un valor de progreso normalizado entre 0 y 1 (llamado t). La posición lateral y la profundidad presentan ligeras variaciones aleatorias para dar un aspecto orgánico, aunque sin romper la continuidad. Asimismo, se emplea un vector normal calculado a partir de la tangente de la curva, lo que garantiza que cada desviación lateral sea coherente con la orientación del recorrido.

Para añadir dinamismo, cada plano incluye un valor de escala animado mediante gsap.quickTo(), una función que permite modificar propiedades en tiempo real sin crear nuevas transiciones en cada frame. De este modo, el sistema puede actualizar cientos de escalas simultáneamente sin comprometer el rendimiento.

La animación del recorrido: desplazamiento con scroll

La pieza central de la experiencia es la cámara, que avanza sobre la curva según el desplazamiento del usuario. En lugar de moverla directamente en el espacio global, se parametriza su posición a través del mismo valor t, que va de 0 a 1. Así, cada avance del scroll representa un incremento de t, generando la sensación de un viaje continuo dentro del entorno 3D.

El movimiento se suaviza utilizando un sistema de valores objetivo y actual, donde targetT responde de inmediato al input y camProxy.t se anima con una transición elástica hacia ese destino. Esta técnica logra que la cámara reaccione rápido sin perder fluidez visual.

Para capturar el desplazamiento, el proyecto incorpora Observer, un plugin de GSAP que unifica los eventos de rueda, tacto y puntero en una única API. Gracias a esto, el comportamiento es coherente tanto en navegadores de escritorio como en dispositivos móviles.

Profundidad y enfoque: simulando una cámara real

Uno de los detalles que dotan de realismo a la composición es el efecto de enfoque dinámico. A medida que la cámara avanza, las imágenes cercanas aumentan de tamaño como si entraran en foco, mientras que las más alejadas permanecen discretas en el fondo. Este comportamiento se calcula en cada cuadro de animación comparando la distancia relativa entre la cámara y cada plano.

Cuando un plano se encuentra dentro de la zona de enfoque, su escala se ajusta progresivamente hasta alcanzar un valor máximo. El resto mantiene su tamaño original. Esta transición suave evita saltos visuales y da la impresión de un desplazamiento continuo dentro de un entorno tridimensional.

Además, el código contempla la naturaleza circular de la curva: el punto inicial y final son el mismo. Por ello, el sistema calcula siempre la distancia más corta entre dos posiciones de la cámara, garantizando que el efecto de enfoque sea uniforme en toda la trayectoria.

Funciones adicionales: cambio de trayectorias y desplazamiento automático

El proyecto contempla dos ampliaciones que demuestran la flexibilidad del enfoque. La primera es la posibilidad de cambiar de trayectoria entre cinco curvas distintas. Cuando el usuario selecciona una nueva, los planos se redistribuyen gradualmente mediante animaciones, sin cortes perceptibles. La segunda es un modo de desplazamiento automático, en el cual la cámara avanza sin necesidad de interacción, ideal para exhibiciones o portafolios audiovisuales.

Ambas funciones se integran sin alterar la arquitectura base. Gracias a la modularidad de Three.js y GSAP, agregar nuevas rutas o modos de interacción implica apenas extender el código original.

El rol de cada herramienta en la experiencia final

Blender sirve como entorno de diseño y modelado, donde nace la parte artística del proyecto. Three.js aporta la infraestructura técnica que traduce esa creación a un entorno web interactivo. Finalmente, GSAP actúa como el motor de animación que dota de suavidad y sincronía a los movimientos. El resultado final es un viaje visual controlado por el usuario, convertido en experiencia digital.

Una metodología adaptable a proyectos educativos y comerciales

Más allá del ejemplo puntual, esta metodología puede aplicarse en múltiples contextos. Estudios creativos pueden usarla para portfolios animados, agencias para presentaciones de productos en 3D, o instituciones educativas para enseñar conceptos de animación digital y programación interactiva. También resulta atractiva para proyectos de arte digital o para marcas que buscan experiencias inmersivas dentro de su sitio web.

Cómo esta técnica puede potenciar el SEO visual y la presencia digital

El uso de experiencias 3D interactivas no solo tiene valor estético. Desde una perspectiva de IA y SEO, este tipo de implementaciones aumenta el tiempo de permanencia en página y reduce la tasa de rebote, indicadores que los buscadores interpretan como señales de calidad. Aunque los motores de búsqueda no procesen el contenido tridimensional directamente, la interacción que genera mejora los datos de comportamiento del usuario y, en consecuencia, la visibilidad orgánica.

Además, al integrar correctamente metadatos, descripciones y optimización de scripts dentro de un entorno WordPress, se logra un equilibrio entre experiencia inmersiva y rendimiento técnico. Los proyectos web que combinan WordPress y SEO con animaciones Three.js bien configuradas pueden destacarse frente a sitios estáticos, especialmente cuando incluyen microinteracciones que incentivan la exploración.

En definitiva, una galería 3D impulsada por desplazamiento no solo demuestra dominio técnico, sino que también refleja una estrategia digital más amplia: ofrecer experiencias memorables que fortalezcan la identidad visual de una marca o creador.