Tenemos capacidades en nuestros navegadores con las que no habríamos soñado hace 5 o 10 años. Mundos enteros de juegos en 3D se pueden ejecutar en el navegador y los sitios web interactivos pueden ser experiencias más inmersivas.
Con una cierta compañía de realidad virtual que está siendo comprada por una cierta compañía de medios sociales, ahora es el momento perfecto para comenzar a trabajar con 3D. Sorprendentemente, ahora podemos crear 3D con JavaScript puro, incluidas mallas y materiales.
Por supuesto, aunque es posible, requiere una gran cantidad de código, y ahí es donde entra Three.js, lo que nos permite crear entornos 3D de manera simple y con menos código.
Desafortunadamente, debido a que es nuevo, 3D no es compatible con todos los navegadores. Actualmente estamos restringidos a Chrome, Safari y Firefox.
Conforme pasa el tiempo, el soporte en IE mejorará, pero por ahora necesitarás un respaldo para los devotos de Microsoft.
Lo primero que debemos hacer es dirigirnos a la Sitio web three.js y descarga la última versión de la biblioteca.
Luego, hágalo referencia en el encabezado de su documento como lo haría con cualquier otro archivo JavaScript, y estamos listos para continuar.
Lo primero que tenemos que hacer para representar algo con three.js es crear una escena, una cámara y un renderizador. Comenzando con una escena:
var scene = new THREE.Scene();Luego, necesitamos una cámara. Piense en esto como el punto de vista desde el que el usuario mira. Three.js en realidad tiene muchas opciones aquí, pero por simplicidad vamos a usar una cámara en perspectiva:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Este método toma cuatro parámetros: el primero es el campo de visión, el segundo es la relación de aspecto (lo recomendaría siempre basando esto en la ventana gráfica del usuario), el plano de recorte cercano y, por último, el plano de recorte de lejos. Estos dos últimos parámetros determinan los límites de la representación, de modo que los objetos que están demasiado cerca o muy lejos no se dibujan, lo que desperdicia recursos.
A continuación, tenemos que configurar el renderizador WebGL:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Como puede ver, lo primero que hay que hacer aquí es crear una instancia del renderizador, luego establecer su tamaño en la ventana gráfica del usuario, finalmente lo agregamos a la página para crear un lienzo en blanco para que podamos trabajar con él.
Hasta ahora, todo lo que hemos hecho es configurar el escenario, ahora vamos a crear nuestro primer objeto 3D.
Para este tutorial, será un cilindro simple:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Este método también toma 4 parámetros: el primero es el radio de la parte superior del cilindro, el segundo es el radio del fondo del cilindro, el tercero es la altura, el último es el número de segmentos de altura.
Hemos configurado las matemáticas del objeto, ahora tenemos que envolverlo en un material para que realmente se vea como algo en la pantalla:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Este código agrega un material simple para el objeto, en este caso un color azul. Establecí wireframe en true porque mostrará el objeto más claramente una vez que lo animamos.
Finalmente, necesitamos agregar nuestro cilindro a nuestra escena, así:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
Lo último que debemos hacer antes de renderizar la escena es establecer la posición de la cámara:
camera.position.z = 20;Como puede ver, el JavaScript involucrado es extremadamente simple, eso se debe a que Three.js está tratando con todo el material complicado, por lo que no es necesario.
Si prueba el archivo en un navegador ahora verá que nada está sucediendo. Eso es porque no le hemos dicho a la escena que renderice. Para renderizar la escena necesitamos el siguiente código:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Si ahora echas un vistazo al archivo en tu navegador, verás que realmente genera un cilindro, pero no es muy emocionante.
Para mejorar realmente el valor de 3D, debe comenzar a animar, lo que podemos hacer con un par de pequeños cambios en nuestra función de renderizado :
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Si prueba en su navegador ahora, verá un cilindro 3D que anima adecuadamente.
Si quieres ver una demostración y jugar con el código, puedes hazlo aquí
Como puede ver, la creación de esta escena (ciertamente muy simple) tomó menos de dos docenas de líneas de código, y hay muy pocas matemáticas involucradas.
Si revisas el ejemplos en el sitio web three.js verás un trabajo increíble que se ha realizado.
Esta asombrosa biblioteca de JavaScript realmente ha reducido el nivel de entrada para codificar 3D hasta el punto de que cualquier persona que pueda escribir JavaScript básico puede participar.
Imagen / miniatura destacada, Imagen 3D a través de Shutterstock.