Cómo crear una cuadrícula 3D de cubos ondulantes en Three.js paso a paso

Three.js sigue siendo una de las librerías más flexibles para generar experiencias tridimensionales interactivas en la web. El desarrollador creativo Franky Hung, de Hong Kong, compartió un proyecto en el que recrea un fondo 3D minimalista con cubos que reaccionan como olas al movimiento del cursor. A continuación, analizamos cómo se construye esta escena y qué aprendizajes deja para quienes trabajan con gráficos, animaciones y desarrollo frontend avanzado.

En su publicación original disponible en Codrops, Hung relata cómo surgió la idea de generar una cuadrícula tridimensional de cubos que se comportan como una superficie líquida. Inspirado por una animación vista en Pinterest, decidió replicar el efecto con Three.js y un enfoque de código limpio, optimizado y visualmente cautivante.

Según Fuente original, la información se basa en Building an Interactive Wave Propagation Cube Grid with Three.js.

cuadrícula 3D interactiva en Three.js: Estructura inicial del proyecto con Vite y organización de archivos

El entorno de construcción elegido fue Vite, una herramienta moderna de empaquetado que acelera la carga y el hot reload. El archivo principal script.js se encarga de inicializar la escena, vincularla al elemento canvas del documento HTML y ejecutar la lógica interactiva. Hung recomienda agrupar todo lo relativo a Three.js dentro de una carpeta específica para mantener la arquitectura ordenada.

El planteo sigue un esquema similar al de los boilerplates creados por Bruno Simon, referente en formación sobre Three.js. Cada archivo cumple un propósito: algunos administran la iluminación, otros el control del tiempo y los materiales, y otros la lógica de interacción con el puntero.

Creación de la cuadrícula de cubos y optimización de instancias

En lugar de renderizar cientos de objetos independientes, Hung utiliza instancing para reducir las llamadas de dibujo a una sola. Aunque el ejemplo solo muestra unas decenas de cubos grandes, el principio permite escalar fácilmente a cientos sin penalizar el rendimiento.

Los materiales elegidos son MeshPhongMaterial, suficientes para lograr sombras realistas sin necesidad de iluminación físicamente precisa. Al configurar las propiedades castShadow y receiveShadow como verdaderas, cada cubo proyecta y recibe sombras de sus vecinos, reforzando la sensación de profundidad.

Control de iluminación y sombras suaves

La calidad visual depende de la correcta configuración de las luces. En la función setLighting(), el tamaño del mapa de sombras (shadow.mapSize) determina la nitidez del sombreado. Reducir su resolución mejora el rendimiento, pero puede afectar el detalle. Para suavizar los bordes, se aumenta el radio del mapa de sombras y se habilita el sombreado global en el renderizador.

Interactividad: convertir el movimiento del puntero en ondas

El siguiente paso es darle vida a la cuadrícula. Para que los cubos reaccionen ante el movimiento del mouse, se implementa una clase MouseTrail que traduce las coordenadas bidimensionales del cursor a posiciones tridimensionales sobre el plano de la cuadrícula. El método clásico en Three.js para esto es el Raycaster, que proyecta un rayo desde la cámara hacia la dirección del puntero y detecta su intersección con un plano invisible.

El resultado de esa intersección son las coordenadas x y z del punto sobre el plano, las cuales se almacenan junto con valores adicionales como la edad y la distancia recorrida desde el último evento. Esta información se organiza en un DataTexture, un tipo especial de textura que permite manipular directamente los valores de píxeles en la GPU.

Cada actualización del puntero añade un nuevo punto al rastro de movimiento, pero solo cuando el desplazamiento supera cierta distancia mínima, evitando la saturación de datos. Este sistema se mantiene activo durante la animación, alimentando continuamente al shader con información actualizada del recorrido del cursor.

Cómo se generan las ondas a partir del rastro del puntero

El efecto visual de las olas se logra modificando el vertex shader del material por defecto. A través de la función onBeforeCompile de Three.js, Hung inyecta código GLSL personalizado en el shader original sin necesidad de escribirlo desde cero. Dentro de este shader se calcula la distancia de cada cubo a los puntos del rastro y se aplica una función gaussiana que determina la altura de la deformación.

El parámetro uWaveWidth regula la amplitud de la onda, mientras que otras variables controlan la atenuación temporal y espacial. Cuanto más alejado esté un cubo del punto de impacto o más antiguo sea el evento, menor será su desplazamiento. También se aplica una modulación por frecuencia con función coseno para lograr oscilaciones sutiles y continuas.

Cuando múltiples ondas se cruzan, se calcula un promedio ponderado de alturas para evitar superposiciones bruscas que rompan la armonía visual. Además, se introduce un pequeño factor aleatorio llamado jitter, que altera mínimamente la posición de cada cubo para romper la simetría perfecta y aportar naturalidad.

Color y sombreado dinámico según la altura de la onda

El shader también transmite al fragment shader el valor de altura de cada cubo (vHeight), que luego se usa para mezclar entre un color base y un color de realce. De este modo, las crestas de las ondas se iluminan con tonos brillantes mientras las zonas bajas se tiñen de un matiz más oscuro, reforzando la sensación de movimiento y volumen.

Un detalle importante es que las deformaciones del shader principal deben replicarse en el shader de sombras. Para ello, cada InstancedMesh utiliza un customDepthMaterial con la misma lógica de desplazamiento, garantizando que las sombras sigan fielmente las ondulaciones de los cubos. Este paso evita artefactos visuales como parpadeos o sombras desalineadas.

Postprocesado con efectos de viñeta y aberración cromática

Para acentuar el estilo visual, Hung implementa un sistema de postprocesado mediante EffectComposer. Este componente permite encadenar distintos filtros a la imagen final, similar a una edición fotográfica en tiempo real. El efecto creado combina una ligera viñeta —que oscurece los bordes— con una aberración cromática que separa los canales de color rojo, verde y azul, aportando un aire retrofuturista a la escena.

El shader personalizado de este efecto ajusta la intensidad de la aberración en función de la fuerza de la viñeta, generando una transición suave que resalta el centro de la composición. El resultado es una atmósfera inmersiva que recuerda a la lente de una cámara analógica.

Compatibilidad móvil y comportamiento automático

Un desafío común en visualizaciones 3D interactivas es la ausencia de puntero en dispositivos táctiles. Para resolverlo, el proyecto incorpora un algoritmo que añade puntos aleatorios al rastro tras unos segundos de inactividad. Así se crean ondas automáticas cuando el usuario no interactúa, manteniendo el dinamismo visual incluso en pantallas sin mouse. Al detectar un toque o movimiento, el sistema retoma el control manual.

Esta solución mejora la experiencia en móviles y tablets, logrando que la animación siga siendo atractiva tanto en entornos de escritorio como en interfaces táctiles, algo esencial en diseño web contemporáneo.

Aprendizajes técnicos y oportunidades creativas

Más allá del resultado visual, el trabajo de Hung funciona como una guía práctica sobre cómo optimizar cargas gráficas en tiempo real y aprovechar las capacidades de la GPU directamente desde el navegador. Las técnicas de instanciación, sombreado personalizado y postprocesado son aplicables a proyectos de branding digital, presentaciones interactivas y entornos de comercio electrónico con alto componente visual.

La misma lógica puede integrarse en sitios WordPress mediante bloques personalizados o canvas embebidos, potenciando la experiencia de usuario y el posicionamiento SEO al incrementar el tiempo de permanencia en la página y la interacción con el contenido.

Cómo este tipo de experiencias influye en la visibilidad SEO de proyectos web

Si bien los efectos 3D no afectan directamente los factores de ranking, mejoran indicadores de engagement y retención, dos métricas que los motores de búsqueda interpretan como señales de calidad. Un fondo animado optimizado puede reducir la tasa de rebote y, junto con una estrategia de IA + SEO, reforzar la identidad de marca. En sitios de innovación tecnológica o portfolios creativos, integrar este tipo de recursos con tiempos de carga controlados y etiquetas alt adecuadas contribuye tanto a la experiencia del usuario como al rendimiento orgánico.

El ejercicio de Hung demuestra que la creatividad visual y la ingeniería de rendimiento pueden convivir. Al combinar shaders personalizados, interactividad fluida y efectos sutiles, es posible construir experiencias inmersivas sin sacrificar optimización ni compatibilidad.

El resultado final es una superficie tridimensional que responde a cada movimiento del usuario, evocando la calma de un océano digital. Una muestra clara de cómo la experimentación con librerías como Three.js puede abrir caminos para nuevas narrativas visuales en la web contemporánea.