proyecto · 2024

Diseño web 3D lanzamiento New Cosmos

Dyresel preparaba el lanzamiento de su piloto New Cosmos SPL 2030 y disponía de un recurso valioso: el modelo 3D del producto. La página web de presentación se construyó a partir de él. El piloto se forma en pantalla, se ilumina y muestra sus características, sus medidas y sus variantes a medida que el visitante avanza.

Diseño web 3D lanzamiento New Cosmos
Cliente
Dyresel
Fabricante de sistemas eléctricos e iluminación para vehículos industriales
Agencia
Aspid Marketing
Concepto creativo y dirección de campaña
Desarrollo
Estudi Zeta
Año
2024
Stack
  • HTML
  • Threjs
  • GSAP
  • Lenis
Ver web

Un lanzamiento con el modelo 3D como punto de partida

Un piloto de señalización es un producto técnico. Su valor está en el diseño, en la calidad de la luz, en unas medidas concretas y en una gama de variantes, y todo eso suele quedar repartido entre una ficha técnica y unas fotografías. Para el lanzamiento del New Cosmos SPL 2030, Dyresel quería una presentación a la altura del producto.

El punto de partida lo dio el propio proceso de fabricación: existía un modelo 3D del piloto. Ese archivo, pensado para diseñar y producir, podía tener una segunda vida como pieza central de la web de lanzamiento. La propuesta de Estudi Zeta fue llevarlo al navegador y construir la página alrededor de él.

Una página web 3D donde el producto se construye en pantalla

La web se desarrolló con Three.js, la tecnología que permite mostrar y animar modelos 3D directamente en el navegador, sin instalar nada y desde cualquier dispositivo. Al entrar en la página, el piloto se va formando en pantalla al ritmo del visitante.

Características y medidas presentadas sobre el propio modelo

Las características aparecen junto al modelo, cada una con su icono, en el momento del recorrido que le corresponde. Las medidas del piloto se muestran directamente sobre el producto, con la claridad de un plano y la presencia de la pieza real.

El resultado ordena la lectura: quien visita la página recibe los datos de la ficha técnica, y cada dato llega cuando el modelo lo está mostrando.

Las variantes de color, presentadas una a una

La gama de variantes cierra el recorrido. Cada versión del piloto se muestra como una capa y da paso a la siguiente a medida que se avanza, de modo que el visitante recorre el catálogo entero del producto sin abandonar la página ni perder el hilo de la presentación.

La misma web 3D en el móvil

La experiencia en móvil conserva todo el recorrido: la formación del modelo, la iluminación, las características, las medidas y las variantes funcionan igual que en escritorio, adaptadas al formato vertical de la pantalla. La web 3D completa viaja en el bolsillo, lista para mostrarse en una reunión o en una feria.

Diseño web 3D a un lanzamiento de producto

Una página web 3D convierte el lanzamiento en una presentación visual única. Distribuidores, ingenieros y clientes examinan el producto desde cualquier lugar, con la información técnica en su contexto y el producto en movimiento.

Otros proyectos