Desarrollar un pequeño mundo con Three JS

Desarrollar un pequeño mundo con Three JS

Hace dos semanas, lanzamos una pequeña app de Spotify en apoyo del increíble nuevo álbum de Metronomy, Small World. La aplicación invita a los fans a descubrir las "ocho maravillas de Small World de Metronomy" conectándose con su Spotify para que podamos determinar la frecuencia con la que han transmitido en la playlist de Spotify de Small World. Cuanto más a menudo aparezca Metronomy en su Top 50 de canciones recientemente transmitidas, más maravillas se revelarán. Se trata de una pequeña y divertida aplicación con las ilustraciones de Lee O' Connor que pretende fomentar y recompensar el streaming. También ha sido la primera aplicación de Spotify que he creado desde que Spotify exige que todas las integraciones se sometan a aprobación. Por suerte, el proceso fue bastante sencillo y nuestra aplicación fue aprobada en un día. Creo que puede ser útil tener un contacto allí, pero hay que familiarizarse con todas las normas de la plataforma antes de crear la activación.


Small Three JS 3D World

Three.js es un favorito del código abierto y por una buena razón. Transformó por completo la forma en que manejamos el 3D en la web y ha evolucionado constantemente desde el lanzamiento de la r1 en 2013. Desarrollar un mundo 3D usando la librería es realmente muy simple y aún así se siente como una adición mágica cuando se sale de los confines 2D de la web. Primero establezcamos una base.


La base

En primer lugar, necesitaremos una scene que contenga nuestro mundo.


Entonces, podemos añadir perspective camera y posicionarla un poco hacia atrás.


A continuación, añadiremos renderer que representará nuestra escena, asegurándonos de poner alpha en true para que tenga un fondo transparente. Más adelante añadiremos un sencillo gradiente de cielo en CSS. Vamos a dimensionar el renderizador para que se ajuste a la ventana de nuestro navegador y luego lo añadiremos al <body>.


Por último, configuraremos un orbit control para que los usuarios puedan hacer zoom, desplazarse y girar la cámara.


Ahora, ¡añadamos nuestro world!


World

En primer lugar realizaremos el load y la textura del mundo con las ilustraciones de Lee O' Connor. A continuación, estableceremos sphere geometry y el material. La geometría y el material se utilizan para iniciar la mesh del world, que se añade a la escena.


A continuación, añadiremos algunas clouds.


Clouds

Manejaremos estas clouds de la misma manera que manejamos el world, excepto que haremos el radio de la esfera un poco más grande para que se asiente sobre la esfera del mundo. Además, nos aseguraremos de que el material sea transparente para que podamos ver el mundo a través de los huecos de las clouds.


Ahora, vamos a renderizar y animar nuestro pequeño world.


Animación

Renderizar nuestra escena es tan fácil como hacer requesting con un cuadro de animación y llamar al método de render de nuestro renderizador. Para la animación, rotaremos el mundo en una dirección y nuestra nube en la otra, un poco más rápido.


Bien hecho. ¡Tienes un pequeño mundo girando! También vamos a manejar la actualización de nuestra cámara y el renderizador cuando el usuario cambia el tamaño del navegador.


Resize

Dado que nuestra cámara y el renderizador se configuraron utilizando la anchura y la altura iniciales del navegador, cualquier cambio de tamaño del navegador causará problemas visuales en nuestra escena. Para remediar esto, podemos escuchar cualquier cambio de tamaño y luego actualizar el aspecto de la cámara, la matriz de proyección y el tamaño del renderizador.


Background

Y por último, pero no menos importante, vamos a añadir un bonito degradado de blanco a azul a nuestro fondo <body> utilizando radial gradient CSS. Me gusta esto porque añade un agradable ambiente alrededor de nuestro pequeño mundo.


¡Gracias por llegar hasta aquí!


Reactions

2

0

0

2

Access hereTo be able to comment

TheWhiteCode.com is not the creator or owner of the images shown, references are: