Cargando
Demos en vivo

Páginas web 3D: ejemplos, ordenados por lo que hace el 3D

Aquí tienes páginas web en 3D que puedes abrir ahora mismo, en el ordenador o en el móvil. Están ordenadas por el papel del 3D en la página —enseñar un objeto, llevarte por un lugar, ser un pequeño mundo, crear ambiente detrás del texto—, porque esa es la decisión que tendrás que tomar si quieres una, más que el estilo.

Actualizado el

En cada tipo verás para qué sirve, en qué fijarte al abrir el ejemplo y qué suele fallar. Después, dónde encontrar cientos más y qué tienen en común las que funcionan. Si buscas la definición antes que los ejemplos, está en qué es una web inmersiva; y las formas en que una escena responde al cursor, al dedo o al sonido, en páginas web interactivas en 3D.

Un objeto que gira con el scroll

El tipo más habitual y el más fácil de hacer bien: un solo producto —una botella, un reloj, unos auriculares— dibujado en 3D en tiempo real, que gira, se abre o se desmonta al hacer scroll mientras el texto de al lado explica lo que estás viendo.

Le va bien a una marca con un producto estrella o a un lanzamiento. Abre Product —un frasco de perfume que gira bajo la luz en un estudio hecho en código— y fíjate en dos cosas: ¿está el objeto en pantalla desde el principio?, ¿cada parte del scroll te dice algo con palabras? Si no sabes decir en una línea qué enseña cada giro, la página es decoración.

Lo que falla: un modelo pesado que tarda segundos en aparecer en el móvil, y textos dibujados dentro del 3D, donde Google no los lee: su propia guía dice que no indexa el contenido que se muestra en un canvas.

Un lugar que se recorre

El scroll se convierte en un paseo: por una galería, por una casa, por un camino. El 3D no es un objeto sino un espacio, y cada parada del recorrido es una sección de la página.

Le va bien a los lugares y a quien enseña su trabajo: una casa rural o un hotel (Forest pone tus propias fotos en un escenario 3D), una vivienda en venta (Casa se monta alrededor de su modelo 3D), un estudio o un portfolio (Studio es una galería blanca con cada proyecto enmarcado e iluminado). Del último hay más en portfolio web en 3D.

En qué fijarte: si en todo momento sabes dónde estás y cuánto queda. Un paseo sin final a la vista es donde la gente abandona.

Un pequeño mundo para jugar

Las páginas web 3D más conocidas se parecen más a un videojuego. El portfolio de Bruno Simon es un mundo 3D que recorres conduciendo un cochecito y en el que vas encontrando sus proyectos. Messenger, del estudio Abeto, es un planeta pequeño donde, como dice su propia descripción, alguien tiene que hacer los repartos.

Vale la pena abrirlos para ver lo que puede hacer un navegador. Rara vez son el modelo para un negocio: piden tiempo y atención antes de decir nada, y mucho de lo que contienen vive dentro del 3D, no en texto que lea un buscador. Funcionan como escaparate para quien vende el propio 3D.

Una escena que crea ambiente detrás del texto

Aquí el 3D no lleva el contenido: está detrás —tela que se mueve, luz, partículas, una escena que reacciona a la música— y la página se lee como una normal por encima.

Le va bien a marcas donde el ambiente es el producto: un disco, una colección, un evento. Música mueve la escena con la canción, Moda pone tus fotos sobre tela en movimiento, Boda es una carta en 3D y Evento le da al evento su propia pantalla LED. Los estudios que lo hacen por encargo, como Lusion, lo enseñan en su propia web.

En qué fijarte: apaga mentalmente la escena. Si la página lo sigue diciendo todo, el 3D hace su trabajo sin estorbar.

Demos en vivo para abrir en el móvil

Cada una es una página que funciona, no un vídeo: ábrela también en el móvil. Son los kits de Promti —webs 3D de una página, cada una hecha para un tipo de negocio—, así que en la tuya irían tus textos, tus colores y tus fotos o tu modelo donde el kit los lleva.

Dónde ver cientos más

Awwwards, una web que premia el diseño web, agrupa las páginas que ha reconocido por técnica: tiene una galería de webs con WebGL y otra de webs 3D. Es la forma más rápida de ver lo que hacen los estudios este año.

La portada de three.js, la librería gratuita con la que se hacen la mayoría de estas webs, es en sí un muro de proyectos hechos con ella; útil si piensas en hacer una web 3D por tu cuenta.

Una costumbre al mirarlas: abre las que te gusten en el móvil, con datos móviles. Muchas páginas premiadas están hechas para una pantalla grande y una conexión rápida, y puede que tus clientes no tengan ninguna de las dos.

Qué tienen en común las que funcionan

Algo se mueve en los primeros segundos, y el nombre y la oferta se leen como texto sin esperar al 3D.

El scroll sigue siendo de quien visita. En las pruebas de NN/g sobre el scrolljacking —páginas que cambian el ritmo o la dirección del desplazamiento—, la mayoría de los participantes acabaron al menos algo desorientados, y en el móvil fue peor.

Al final hay una sola cosa que hacer: comprar, reservar, escribir. Y todo lo importante está también en texto, para Google y para quien tiene el movimiento reducido. Velocidad, SEO y 3D explica cómo mantener una web 3D rápida y encontrable.

Preguntas

¿Dónde puedo ver ejemplos de páginas web 3D?
Abre las demos en vivo de esta página y después las galerías de WebGL y de 3D de Awwwards, que reúnen las webs que ha reconocido. La portada de three.js también enseña proyectos hechos con la librería.
¿Cuál es la página web 3D más conocida?
No hay una lista oficial. El portfolio de Bruno Simon, en el que recorres un mundo 3D conduciendo un cochecito, es de los ejemplos que más se comparten, y las galerías de Awwwards enseñan las que ha elegido su jurado.
¿Una web 3D le sirve a un negocio?
Cuando el 3D enseña lo que se vende —un producto, un lugar, una colección— y el texto se lee sin él, sí. Cuando es un juego que hay que aprender antes de encontrar el precio, estorba. Qué es una web inmersiva explica cuándo compensa.
¿Puedo tener una web 3D como estas?
Sí, de tres formas: hacerla tú con three.js, partir de un kit de Promti por 500 € de una vez, o encargarla: una web 3D a medida empieza en 750 €. Cuánto cuesta una web 3D compara los caminos.
¿Las páginas web 3D funcionan en el móvil?
Pueden, si están hechas para ello: un modelo ligero, el texto en HTML y el scroll propio del navegador. Abre cada ejemplo de aquí en el móvil: la diferencia entre las que se pensaron para él y las que no se ve enseguida.