Difficulty:IntermediateLength:ShortLanguages:
Spanish (Español) translation by Christian 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:
1
| var scene = new THREE.Scene(); |
¡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:
1
| var camera = new THREE.PerspectiveCamera(); |
- 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
aspectes el ratio delfov, o en otras palabras el ancho y alto de una pantalla (ej. 4:5, 16:9). - Las ultimas dos,
nearyfar, son los planos de un solido. Juntos ellos controlan si un objeto es renderizado basándose en la distancia de la cámara.neares lo mas cercano de que puede estar un objeto o parte de un objeto respecto a la cámara mientras se esta mostrando,fares lo mas lejos que un objeto puede estar de la cámara y aun ser mostrado. Juntos estos definen el viewing frustumde la cámara.
Aquí hay un ejemplo de los argumentos de
PerspectiveCamera:
1
| var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); |
No es importante entender cada valor en este punto excepto estar pendientes de los valores que puedenser pasados.
1
| camera.position.set(x, y, z); |
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.
1
| var renderer = new THREE.WebGLRenderer(); |
El
WebGLRenderer puede también aceptar propiedades y valores que le sean pasados como un objeto.
1
2
3
| var renderer = new THREE.WebGLRenderer({ alpha: true // remove canvas' bg color}); |
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.
1
2
| // Make scene renderer the size of the screenrenderer.setSize(window.innerWidth, window.innerHeight); |
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.
1
| document.body.appendChild( renderer.domElement ); |
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.
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.
1
2
| var dae, // graphic loader = new THREE.ColladaLoader(); // loader |
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:
1
2
3
4
| function loadCollada( collada ) { dae = collada.scene; scene.add(dae);} |
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:
1
| loader.load( 'http://myurl.com/file/iphone6.dae', loadCollada); |
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).
1
2
3
4
5
6
| function renderPhone() { requestAnimationFrame( renderPhone ); renderer.render(scene, camera);}renderPhone(); |
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 (
AmbientLight, HemisphereLight, PointLight), TrackballControls, AxisHelper 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.
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:
- WebGL con THREE.js Texturas y Partículas.
- THREE.js para Desarrollo de Juegos
- WebGL con THREE.js lo Básico.
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 Shaw, Jeff Ayer, Louis Hoebregts, Neil Pullman, Eli Fitch y Chris Johnson.
Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk
0 comentarios:
Publicar un comentario