Nut Valley
DiseñoDesarrollo3D
La historia de la marca gira en torno al frasco, pero el sitio lo mostraba en una escena Spline pesada. Extraímos el modelo original y lo pasamos a Three.js: el frasco gira al desplazarse y cambia de etiqueta con cada producto.
El reto
Nut Valley vende cremas de frutos secos sin azúcar ni aditivos, y el frasco es su mejor argumento. Pero la escena Spline pesaba casi 900 KB más un motor externo: cada visita dependía de otro servidor y descargaba recursos adicionales.
Cómo lo hicimos
04 · paso
- Paso 01
Extraer el modelo original
Un script local descompuso la escena Spline y extrajo las mallas originales del frasco y la tapa en glTF estándar. El navegador ya no necesita Spline ni un decodificador Draco.
- Paso 02
Cada etiqueta intacta
Extraímos seis estados de etiqueta y tres mapas de reflexión, byte a byte. Al desplazarse, el frasco gira y muestra la etiqueta del producto que se está leyendo: maní, chocolate o pistacho.
- Paso 03
Renderizar solo cuando se ve
Three.js se carga cuando la escena se acerca a la pantalla, se renderiza al desplazarse y se detiene fuera de vista o en una pestaña en segundo plano. Con ahorro de datos, movimiento reducido o sin WebGL, se muestra una foto del frasco.
- Paso 04
Una secuencia propia para el móvil
En pantallas estrechas, el frasco recorre el espacio entre la descripción y los beneficios del producto y sale de escena al llegar a testimonios y contacto, sin tapar textos.
Al volver hacia arriba se recuperan la misma posición y etiqueta: el estado depende del lugar en la página, no de un temporizador. También se mantiene al cambiar de idioma, cuando varía la altura de las secciones.
15 868triángulos en el modelo, los mismos que en la escena original
6estados de etiqueta
0solicitudes a Spline: modelo, texturas y Three.js se sirven con el sitio
3idiomas: hy, ru, en
Qué hicimos
04Migración del frasco 3D de Spline a Three.js
Escena controlada por scroll con cambio de etiquetas
Secuencia móvil y alternativa sin WebGL
Demo en vivo
Prueba el sitio
Desplázate por la página: el frasco gira y cambia de etiqueta con cada sabor.
Qué recibe el cliente
03El frasco en un formato estándar
El GLB se abre en cualquier herramienta compatible con glTF y puede usarse en otros proyectos.
El origen de cada archivo
Hashes, identificadores de la escena original e instrucciones para repetir la extracción.
Un sitio sin compilación
Páginas estáticas en tres idiomas con comprobaciones de enlaces, traducciones y modelo, compatibles con cualquier alojamiento.
Siguiente paso
¿No sabes qué necesitas?
Ari hace cuatro preguntas y el equipo te responde con un alcance y un precio.
Oficina en ErevánPróximamente…
Correo para proyectos:hello@arevian.studio