Starbucks

Starbucks quería hacer algo diferente durante el mes de abril para que el Mes de la Tierra fuera algo memorable, así que se les ocurrió la idea de plantar árboles. Por cada compra reutilizable, los socios de Starbucks donarán la mitad de un árbol, y la otra mitad será donada y plantada por Starbucks.

"Cuantos más reutilizables compres, más árboles plantaremos". Además, querían una página de aterrizaje atractiva que animara al usuario a donar. El objeto principal de la página sería el vaso reutilizable, convirtiéndolo en el centro de atención. También necesitaba la funcionalidad de contar en tiempo real el número de árboles donados gracias a la compra de vasos reutilizables, permitiendo a los usuarios saber lo cerca que está el objetivo.

El objetivo:

El modelo 3D

Para generar un sitio web atractivo creamos un modelo 3D del vaso reutilizable de Starbucks, que expresa dinamismo y energía al girar sobre su eje para mostrar las caras del vaso, y al mismo tiempo informar sobre los beneficios de la iniciativa para el medio ambiente.

La barra de progreso

Partiendo de la afirmación de que cada compra de un vaso reutilizable significa un árbol plantado, el cliente quiere que sus usuarios puedan saber cuántos árboles se han plantado durante el Mes de la Tierra.

Para ello, se propuso crear una barra de carga que indicara cuántos árboles se han donado, estos datos serían proporcionados por el cliente y se actualizarían en tiempo real, por lo que deben ser campos dinámicos.

El Reto:

El reto surgió de la necesidad de generar una ilustración llamativa para el vaso reutilizable, la propuesta de utilizar un modelo 3D representa un desafío para colocarlo en un entorno de desarrollo basado en HTML y JavaScript.

Además de colocar el modelo en el HTML, se necesitaba tener animaciones que jugaran con el flujo de navegación del usuario.

Nuestra Solución:

La primera prueba de concepto:

Tras una intensa investigación sobre librerías y renderizadores de JavaScript para objetos 3D, se utilizó la implementación ThreeJS como posible solución, siguiendo su documentación aquí en la primera prueba de concepto.

Para realizar esta primera prueba fue necesario importar la librería ThreeJS, inicialmente, se importó a través de DNS, sin embargo, posteriormente se descargaron las librerías localmente en el proyecto para mejorar el rendimiento

Con la librería implementada, procedimos a crear un archivo con formato JS y a renderizar el objeto. Según la documentación, primero necesitamos crear una escena donde se va a colocar nuestro objeto, una cámara y un renderizador. 

Escenario:

varscene = newTHREE.Scene(); // Initialize the scene.

Cámara:

varcamera = newTHREE.PerspectiveCamera(

 75, // Field of view.

 window.innerWidth / window.innerHeight, // Aspect ratio (w/h.

 0.1, // Near plane.

 1000// Far plane.

);

Renderizador:

varrenderer = newTHREE.WebGLRenderer({ antialias:true }); // Initialize the renderer WebGLRenderer.

renderer.setSize(window.innerWidth, window.innerHeight); // Set the size of the renderer to the size of the window.

El render se añade al cuerpo del HTML para generar una etiqueta <canvas></canvas>. Dentro de la etiqueta, el objeto se renderiza y se muestra en la página.

document.body.appendChild(renderer.domElement); //This is a <canvas> element the renderer uses to display the scene to us.

En este punto debemos generar el objeto que queremos mostrar, en este caso se crea una malla (que luego será sustituida por el vaso reutilizable de Starbucks), según la documentación de Three.js "una Malla es una clase base que hereda de Object 3D y se utiliza para instanciar objetos poligonales combinando una Geometría con un Material (textura)."

vargeometry = newTHREE.BoxGeometry(1, 1, 1);

varmaterial = newTHREE.MeshLambertMaterial({ color:0xf6f6f6 });

varmesh = newTHREE.Mesh(geometry, material);

Y por último, la función que renderiza el proyecto, en esta añadimos la malla a la escena, y para renderizar la escena y la cámara.

varrender = function () {

   requestAnimationFrame(render);

   scene.add(mesh);

   renderer.render(scene, camera);

};

render();

Implementación del modelo 3D:

Basado en la documentación de ThreeJS, el tipo de archivo recomendado para implementar mallas personalizadas es en formato GLFT. El formato GLFT es esencialmente un archivo JSON que almacena toda la información para cargar la malla tridimensional, a veces puede venir con la textura incrustada en la malla o adjuntada como un archivo PNG.

El equipo de diseño desarrolló el modelado 3D en Blender y lo exportó en el formato previamente seleccionado.

El archivo GLTF en el previsualizador https://gltf-viewer.donmccurdy.com/

Se crea la siguiente función para añadir el archivo al proyecto: 

// Load the gltf file.

varloader = newGLTFLoader();

varmesh;

loader.load("./assets/starbucks_cup.gltf", function (gltf) {

   mesh = gltf.scene; // Get the scene from the gltf file.

   mesh.scale.set(1, 1, 1); // Scale the mesh, X, Y, Z.

   mesh.position.set(0, -4.3, 0) // Position the mesh, X, Y, Z.

   mesh.rotation.set(0.35, 4.7, 0) // Rotate the mesh, X, Y, Z.

   scene.add(gltf.scene); // Add the object to the scene.

   render();

});

Fíjate en cómo se aplica el reescalado, la rotación y el posicionamiento a la malla, para conseguir la mejor visualización del modelo.

Fuentes de luz:

Para observar correctamente el modelado 3d es necesario crear fuentes de luz artificial, ThreeJS dispone de varias clases y funcionalidades para generar diferentes tipos de luces cada una con sus diferentes propiedades, entre las que se encuentran: HemisphereLight, AmbientLight, PointLight, y muchas otras. Para más información, sobre la documentación de las fuentes de luz aquí.

Implementación de la barra de progreso:

La lógica utilizada fue construir dos series de contenedores que funcionan como envoltorios, el contenedor padre sería el fondo rectangular para la barra de carga y el contenedor hijo sería el rectángulo que aumenta de tamaño para dar la impresión de que la carga aumenta.

Primer concepto de prueba de la barra de carga.

Para la carga, tomamos los datos de la Meta y el Progreso de los árboles donados, desde una Hoja de Cálculo de Google que se consume vía API en formato JSON. De esta manera, el cliente puede actualizar el progreso del programa.

Calcula dos datos: la meta y el progreso, en base a la meta se coloca el ancho de la barra de carga, y además se calcula el dato del progreso y se utiliza para dividir el porcentaje de árboles donados para llenar la barra de carga.

Barra de carga con estilo añadido.

Integraciones:

• tresjs

• GLTFLoader.js

• three.module.js

• Google Analytics

El resultado

Una vez completadas las instrucciones de diseño de las partes interesadas, las pruebas de los conceptos de diseño de la interfaz y los wireframes preparados por el equipo de diseño de la interfaz de usuario, comenzó el desarrollo del frontend. Las secciones de información llevaron el desarrollo básico de HTML y CSS junto con la funcionalidad Scroll Snap para mejorar la experiencia del usuario en el flujo del sitio y la propiedad flex-box. 

El sitio web se subió a un repositorio de GitHub para el control de versiones y se vinculó al servicio de alojamiento de Netlify con su respectivo dominio web configurado https://hagamoselcambiojuntos.com