Web 3D interactiva: cuándo tiene sentido y qué exige en rendimiento y SEO

Una web 3D interactiva es una página que dibuja una escena tridimensional en tiempo real dentro del navegador, con WebGL y casi siempre con Three.js (herramientas como Spline ayudan a diseñar la escena), y deja que el visitante la mueva o juegue con ella. Tiene sentido cuando la experiencia es parte del mensaje: una marca que quiere ser recordada, un producto que se entiende mejor girándolo, un portfolio. Estorba cuando el visitante viene a algo rápido, como pedir cita, ver un precio o llamar, y le haces esperar a una escena para conseguirlo.

Lo sabemos porque actiondev.es es una web 3D: la portada es un puerto de Vigo donde manejas una grúa. Es nuestro escaparate y nuestro laboratorio, y lo que aprendimos construyéndola es lo que aplicamos cuando un cliente nos pide diseño web con 3D y motion en Vigo. Aquí van las cifras y los tropiezos, no solo lo bonito.

Qué es una web 3D y qué no

Con «web 3D» se busca de todo, desde programas para modelar hasta visores de objetos. Para una marca, hay tres niveles:

• Un objeto 3D en una página normal. Un producto que se gira con el dedo o un logo con volumen. Poco peso, mucho efecto, y el resto de la página sigue siendo texto.
• Una portada o un fondo en 3D. La escena acompaña y el contenido va encima. Es lo más habitual en webs de marca.
• Una experiencia completa. La navegación es la escena: se anda, se juega, se elige. Es lo que hicimos en nuestra web y lo que más cuidado exige.

Hay un cuarto caso que no necesita WebGL: la profundidad hecha con CSS. El tablero de corcho de nuestro blog es CSS 3D: los papeles tienen perspectiva y sombra, pero el texto sigue siendo HTML que se lee, se enlaza y se indexa.

Cuándo una web 3D suma y cuándo estorba

Suma cuando la marca vive de la experiencia: un local de ocio que vende noches, una marca de moda o de diseño que quiere ser recordada, un portfolio, o un producto o un inmueble que hay que ver por todos lados, como en un showroom virtual. Ahí la sensación forma parte de lo que se compra.

Estorba cuando:

• El visitante viene a hacer algo concreto y con prisa: reservar, llamar, ver un horario.
• La mayor parte del tráfico llega desde móviles de gama media o con datos limitados.
• El contenido tiene que leerse: precios, condiciones, fichas.
• No hay presupuesto para cuidar el rendimiento. Una escena 3D mal optimizada es peor que ninguna.

Nuestra regla es sencilla: el 3D nunca puede ser el único camino para hacer lo importante. En nuestra web, los canales de contacto están siempre a la vista, sin necesidad de jugar.

Nuestra web 3D como laboratorio

actiondev.es tiene cuatro escenas, cada una con un problema distinto:

• La portada. Un puerto de Vigo en estilo cómic: mueves una grúa, cargas un contenedor en el barco y el barco te lleva a esa sección. El cielo cambia según la hora del visitante: noche, amanecer, día o atardecer.
• Los proyectos. Una sala recreativa con una máquina por proyecto. Andas por el pasillo y, al elegir una, la cámara se acopla a su pantalla y el caso se enciende dentro.
• Las reseñas. Una plaza inspirada en el parque de Castrelos, con un muñeco por cada reseña de Google, de día o de noche.
• El contacto. El portal real de nuestra oficina en la Rúa Colón: la cabina abre WhatsApp, el buzón abre el correo y el portero automático sirve para pedir que te llamemos.

Puedes recorrer la sala de proyectos y la plaza de las reseñas desde un ordenador. Desde el móvil verás otra cosa, y más abajo explicamos por qué.

La grúa, el barco, la sala recreativa, la plaza y la calle se generan en código, sin modelos 3D descargados. Las imágenes se reservan para lo que no se mueve, como el fondo de la portada: una ilustración de entre 160 y 220 KB para cada momento del día.

Rendimiento: lo que medimos

En laboratorio (Lighthouse, build de producción, perfil de escritorio, septiembre de 2026), las siete rutas medidas sacan 100 en accesibilidad, buenas prácticas y SEO, y 100 en rendimiento salvo la portada, que se queda en 90 con un LCP de 1,9 segundos. Ese es el precio del puerto.

Lo que más nos enseñó no fue el peso de la página, sino algo que no se ve en una prueba rápida: compilar los shaders, los pequeños programas que la tarjeta gráfica necesita para pintar cada material. La primera vez que alguien entraba en una escena, eso dejaba la página congelada: 3,4 segundos en el contacto, 2,4 en los proyectos y 1 en las reseñas, medido en un Mac con chip M4.

La solución fue compilarlos todos en paralelo detrás de la pantalla de carga, sin pintar un solo fotograma hasta terminar, y arrancar la animación de entrada después. A eso se suman otras decisiones que se notan:

• Descargas solo cuando hacen falta. El motor de físicas de la portada pesa unos 2,2 MB. No se pide al pasar el ratón por un enlace, solo al ir de verdad a la portada, y nunca por adelantado en pantallas táctiles o con el ahorro de datos activado.
• Un vídeo cada vez. En la sala recreativa solo reproduce vídeo la máquina que miras, con un pequeño retraso para no descargar uno por cada máquina que pasas, y nunca si el sistema pide reducir el movimiento.
• Menos trabajo para la tarjeta gráfica. El mobiliario de la plaza se dibujaba pieza a pieza, unas 145 llamadas de dibujo; ahora se fusiona en una sola geometría por material.
• Resolución con techo. Ninguna escena pinta a más de 1,5 veces la densidad de píxeles de la pantalla, y la plaza baja a 1 si el equipo no llega.
• Transiciones más cortas. La persiana que tapa cada cambio de página pasó de 885 a unos 600 milisegundos: con la escena ya cargada, era el 80 % de la espera.

El móvil: otra versión, sin 3D

Aquí está la lección más cara. En una prueba de laboratorio de principios de octubre (Lighthouse en perfil móvil, con el procesador ralentizado cuatro veces), la página de contacto sacaba un 45 en rendimiento, con más de nueve segundos de bloqueo. En un móvil de gama media, eso es una página que no responde.

Por eso, en un teléfono, la portada, los proyectos, las reseñas y el contacto se sirven desde una versión móvil sin Three.js: la misma información y los mismos enlaces, pero con texto, imágenes de los proyectos y botones grandes en lugar de escenas. Las tabletas siguen viendo la versión de escritorio.

Si tu web 3D va a recibir mucho tráfico móvil, presupuesta las dos versiones desde el principio. Adaptar la escena al móvil a posteriori sale peor y más caro que diseñar las dos a la vez.

SEO con una web 3D

Google no lee lo que se pinta dentro de un canvas. Todo lo que tiene que indexarse tiene que estar también en el HTML:

• La portada lleva su H1 y un menú con todos los servicios al principio del contenido, en un texto que leen buscadores y lectores de pantalla y que aparece al navegar con el teclado.
• La sala de proyectos tiene en el HTML la lista completa, con un enlace a cada caso, detrás del botón «Ver lista».
• La plaza incluye el texto de las reseñas en el HTML, aunque en pantalla se lean al tocar cada muñeco.
• Cada escena se anuncia como una imagen con su descripción para lectores de pantalla.
• La versión móvil lleva el mismo título, descripción, URL canónica y datos estructurados que la de escritorio, y todos sus enlaces.

Y las páginas que tienen que posicionar por búsquedas concretas, como las de servicios, no llevan 3D: son texto, casos y preguntas frecuentes.

Accesibilidad: siempre hay una salida sin jugar

Un juego no puede ser una barrera. En la portada, el botón «Ir sin jugar» lleva directo a proyectos, reseñas y contacto. La grúa se maneja con el teclado (flechas o las teclas A, D, W y S, y la barra espaciadora para enganchar) y la sala recreativa también (flechas para andar y girar, Intro para elegir una máquina y Escape para salir).

Si el sistema pide reducir el movimiento, la sala, la plaza y la calle lo respetan: la cámara no hace la entrada animada, sus movimientos se convierten en cortes y la sala no reproduce vídeos. Y los enlaces legales están en todas las pantallas 3D, también en las que no tienen pie de página.

Qué necesita tu marca para una experiencia 3D

Si después de todo esto sigue teniendo sentido, esto es lo que hay que decidir antes de modelar nada:

• Qué tiene que sentir o hacer el visitante, en una frase. Si no cabe, el 3D va a decorar y poco más.
• Cuál es el camino corto para quien no quiere jugar, y dónde está.
• Qué verá quien entra desde el móvil.
• Qué texto tiene que estar en el HTML para que Google entienda la página.
• Con qué recursos se cuenta (modelos, ilustraciones, sonido) y cuánto pesan.

Action Development es un estudio con oficina en la Rúa Colón, 20, de Vigo, que diseña y programa webs con escenas 3D en Three.js, empezando por la suya. Si te lo estás planteando, cuéntanos qué quieres transmitir y te diremos con franqueza si el 3D suma en tu caso o si distrae de lo que quieres vender.