Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Three.js
Webdesign

Una Guía del Novato para Three.js

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)

La complejidad de la Web cambia diariamente y sus posibilidades crecen igual de rápido, particularmente con el renderizado 3D. WebGL(Librería de Gráficos Web) es una API de JavaScript para renderizar gráficos interactivos en 3D y 2D. Three.js de Ricardo Cabello es una librería creada sobre WebGL, lo que asegura que el código del autor es compatible en varios navegadores.

Three,js es a WebGL lo que jQuery es a JavaScript, ofrece sintaxis declarativa amada por muchos, y abstrae los dolores de cabeza del 3D en los navegadores, vamos a revisarlo, a tener una vista general de la sintaxis y ver como iniciar si eres nuevo en el juego de 3D.

Hacia lo Que Estamos Trabajando

Dale un vistazo al siguiente ejemplo en CodePen; usa tu ratón para arrastrar el modelo, usa la rueda del ratón para acercarlo o alejarlo.

1. Estableciendo la Escena

Vamos a estar trabajando en CodePen por la facilidad; empieza por enlazar a Three.js (CDN 126Kb) desde tu pestaña de JS.

Empezamos por crear una escena, similar a iniciar con una capa en Photoshop. Una escena es definida con una variable antes de escribir cualquier código. Así que, dentro de tu Panel de JS agrega:

¡Camara!

Con las cortinas levantadas y listos para nuestra presentación necesitaremos un modo de ver nuestra genialidad - hora de introducir una cámara. Hay un arreglo de cámaras que Three.js trae incluidas, como PerspectiveCamera, StereoCamera, OrthographicCamera y CubeCamera. Para nuestros propósitos vamos a usar la PerspectiveCamera ya que esta diseñada para semejar el modo en que miran los ojos humanos. Igual a como definimos la escena con una variable, hacemos lo mismo para definir una cámara:

Nuestra PerspectiveCamera acepta cuatro argumentos: fov, aspect, near y far.

  • El fov (campo de vista) es cuanto puedes ver al rededor del centro de la cámara. Piensa en términos de un lente de angulo-amplio en una cámara contra un lente común.
  • El aspect es el ratio del fov, o en otras palabras el ancho y alto de una pantalla (ej. 4:5, 16:9).
  • Las ultimas dos, near y far, son los planos de un solido. Juntos ellos controlan si un objeto es renderizado basándose en la distancia de la cámara. near es lo mas cercano de que puede estar un objeto o parte de un objeto respecto a la cámara mientras se esta mostrando, far es lo mas lejos que un objeto puede estar de la cámara y aun ser mostrado. Juntos estos definen el viewing frustum de la cámara.
viewing frustum
Viewing frustum

Aquí hay un ejemplo de los argumentos de PerspectiveCamera:

No es importante entender cada valor en este punto excepto estar pendientes de los valores que pueden ser pasados.

Esta linea es la posición local del objeto. Esta establece la coordenadas de x, y, y z del vector. Sin que la cámara vaya a ver nada.

2. El WebGLRenderer

El siguiente ingrediente importante en nuestra receta es crear un WebGLRenderer. Esta es la pieza que es responsable de la magia al mostrar tu creación.

El WebGLRenderer puede también aceptar propiedades y valores que le sean pasados como un objeto.

Hay un unos cuantos pares propiedad : valor que pueden ser usados - estos están listados en la documentación deberías decidir profundizar en un punto mas a delante(algo a lo que realmente te animo).

Con el renderizador definido podemos establecer métodos para mas adelante personalizar nuestra creación como setSize; un método que vas a ver en casi todos los proyectos de Three.js.

Existen muchos mas métodos que puedes usar, pero para nuestros propósitos nos apegaremos a setSize().

3. DOM

Ahora que nuestro tamaño deseado está definido vamos a necesitar adjuntarlo al DOM.

Esta propiedad domElement es donde el renderizador dibuja su salida y va a ser en la forma de elemento canvas. A pesar de que estoy usando document.body puedes anexar o anteponer el elemento canvas donde sea que quieras. Realmente depende de ti donde deseas colocarlo basado en las necesidades especificas del proyecto.

Creando un Objeto

Para los próximos pasos necesitamos crea un objeto-ya que todo lo que hemos echo hasta ahora es declarar una escena, una cámara y un renderizador. Para propósitos del ejemplo vamos a tomar un teléfono celular de 3D Warehouse así podemos construir un previsualizador de producto para la gente que compra un iPhone en linea.

iphone 6 by Jeremie P
iPhone 6+ de Jeremie P

Típicamente puedes usar aplicaciones como SketchUp o incluso Blender para dibujar tus objetos en 3D, de todas formas hay una gran curva de aprendizaje en las aplicaciones de de dibujo en 3D-una curva que ciertamente esta fuera de la cobertura de este articulo.

Si Te Gusta la Piña Colada

Para insertar nuestro objeto 3D en la escena tenemos que usar el ColladaLoader. Cabe mencionar  que cualquier gráfico que decidas usar debería generalmente estar debajo de 1-2Mb y debe ser un archivo Collada para poderla usar con Three,js: estos son archivos que terminan con la extensión .dae.  Si abres un archivo Collada vas a ver que en realidad esta escrito en XML.

Empezamos por definir el ColladaLoader usando una variable y llamándola en el método mientas definimos otra variable para representar el gráfico 3D y hacer referencia en un punto mas adelante.

Este es un gran inicio, pero tenemos algo mas de trabajo por hacer para mostrar el teléfono. Vamos a hacer  una función que va a hacer exactamente eso:

Para los siguientes pasos vamos a usar el método load, pasar la URL de nuestro archivo Collada, y llamar nuestra función por el nombre en el segundo argumento:

Si te gustaría saber mas sobre el ColladaLoader puedes indagar en el código fuente en GitHub.

4. Bucle de Renderizado

Con nuestro cargador y gráfico finalmente en su lugar hay un ultimo paso; necesitamos crea lo que se conoces como "bucle de renderizado". Esto es por que no estamos renderizando nada aún.

Este "bucle de renderizado" es lo que causará que el renderizador dibuje la escena dieciséis veces por segundo. La siguiente función hará que nuestra creación cobre vida (la mejor parte de todo el proceso).

requestAnimationFrame tiene una cantidad de ventajas. La mas importante es que se pausa cuando el usuario cambia a otra pestaña del navegador, definitivamente sin gastar el poder de procesamiento y vida de la batería.

Producto Final

El resultado de todo este trabajo es un lindo renderizado de un iPhone en 3D que puedes girar, rotar, acercar y alejar:

Hay un par de cosas mas que están en la creación final, así que te animo a que profundices en el panel de JavaScript del ejemplo.

 Por ejemplo; la Iluminación (AmbientLightHemisphereLightPointLight), TrackballControlsAxisHelper y un evento Window Resizing. Algunos de estos elementos no contienen documentación como en el caso de TrackballControls, pero puedes encontrar todas las propiedades disponibles dentro de el archivo JS principal en GitHub. Hay otros controles realmente geniales que puedes usar, los cuales también están listados en GitHub. 

Inspiración

A veces necesitas un poco de inspiración para poner al viejo cerebro a disparar ideas a un ritmo rapido. Los siguientes son algunos de mis ejemplos favoritos usando Three.js que cambian los sueños en realidad.

httpspaperplanesworld
https://paperplanes.world
httpsthroughthedarkwithgooglecom grab your headphones
https://throughthedark.withgoogle.com (toma tus auriculares)
httpcarvisualizerplus360degreescomthreejs
http://carvisualizer.plus360degrees.com/threejs

Más Lectura

Rachel Smith escribió un articulo genial en CodePen sobre WebGL y lo recomiendo ampliamente darle una leída cuando tengas tiempo libre. El tutorial esta en un lenguaje simple y es una explicación detallada de Three.js discutiendo la escena, geometría, iluminación, materiales y animación que yo ciertamente no puede cubrir en esta corta publicación

También puedes disfrutar:

Creditos

Este articulo no hubiera sido posible sin la generosa ayuda de la Comunidad en Slack de Animación en el Trabajo así que me gustaría agradecer (sin un orden en particular) a Stephen ShawJeff AyerLouis HoebregtsNeil PullmanEli Fitch y Chris Johnson.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.