Construyendo 3D en el navegador con Three.Js

Tenemos capacidades en nuestros navegadores con las que no hubiéramos soñado hace 5 o 10 años. Se pueden ejecutar mundos de juegos en 3D completos en el navegador y los sitios web interactivos pueden ser experiencias más inmersivas.

Con una determinada empresa de realidad virtual comprada por una determinada empresa de redes sociales, ahora es el momento perfecto para empezar 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, que nos permite construir entornos 3D de forma sencilla y con menos código.

Compatibilidad del navegador

Desafortunadamente, debido a que es nuevo, 3D no es compatible con todos los navegadores. Actualmente estamos restringidos a Chrome, Safari y Firefox.

A medida que pase el tiempo, el soporte en IE mejorará, pero por ahora necesitará un respaldo para los devotos de Microsoft.

Empezando

Lo primero que debemos hacer es dirigirnos al sitio web de three.js y descargue la última versión de la biblioteca.

A continuación, haga referencia a él en el encabezado de su documento como lo haría con cualquier otro archivo JavaScript, y estamos listos para comenzar.

Creando nuestra primera escena

Lo primero que debemos hacer para renderizar cualquier cosa con three.js es crear una escena, una cámara y un renderizador. Comenzando con una escena:

var scene = new THREE.Scene();

A continuación, necesitamos una cámara. Piense en esto como el punto de vista desde el que el usuario está mirando. Three.js en realidad tiene muchas opciones aquí, pero en aras de la simplicidad, usaremos 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 (recomendaría siempre basar esto en la ventana del usuario), el plano de recorte cercano y, por último, el plano de recorte lejano. Estos dos últimos parámetros determinan los límites del renderizado, por lo que los objetos que están demasiado cerca o demasiado lejos no se dibujan, lo que desperdiciaría recursos.

A continuación, debemos configurar WebGL Renderer:

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

Como puede ver, lo primero 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.

Añadiendo algunos objetos

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 de la parte inferior 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 necesitamos 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. Yo he puesto estructura metálica a cierto porque mostrará el objeto con mayor claridad una vez que empecemos a animarlo.

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:

Como puede ver, el JavaScript involucrado es extremadamente simple, eso se debe a que Three.js se ocupa de todas las cosas complicadas, por lo que no tenemos que hacerlo.

Renderizando la escena

Si prueba el archivo en un navegador ahora, verá que no sucede nada. Eso es porque no le hemos dicho a la escena que se renderice. Para renderizar la escena necesitamos el siguiente código:

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

Si ahora echa un vistazo al archivo en su navegador, verá que de hecho representa 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 hacer función:

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 se anima correctamente.

Conclusión

Si desea ver una demostración y jugar con el código, puede 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 echa un vistazo al ejemplos en el sitio web three.js verá un trabajo increíble que se ha realizado.

Esta increíble biblioteca para 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 destacada / miniatura, Imagen 3D a través de Shutterstock.