Saltar al contenido

Tutorial de Three.js – Hola Mundo Cubo

En este post, hablaremos de Three.js.聽Una biblioteca y API de javascript que le permite crear un gr谩fico 2D o 3D en su p谩gina web f谩cilmente sin tener que lidiar directamente con WebGL usando solo javascript.聽Creando una experiencia web inmersiva con el soporte de navegadores cruzados.

Qu茅 es Three.js

Three.js es b谩sicamente una capa abstracta construida sobre webGL para que sea m谩s f谩cil de usar.聽Los usuarios solo pueden usar su navegador web sin tener que descargar ning煤n marco o aplicaci贸n adicional para experimentar gr谩ficos 3D.聽Verifique algunas demos de la implementaci贸n de three.js聽aqu铆.

Dado que three.js se basa en javascript, es relativamente f谩cil agregar interactividad entre objetos 3D e interfaces de usuario como el teclado y el mouse.聽Entonces three.js es perfectamente adecuado para hacer un juego 3D en una plataforma web.

C贸mo usar Three.js

Para mostrarle las ideas de los pasos fundamentales para crear un objeto 3D animado con three.js, agregaremos un cubo giratorio a una p谩gina web vac铆a.

Configuraci贸n de escena

Para cada proyecto, lo primero que tenemos que hacer es crear una escena.聽La escena es como un universo donde podemos agregar objetos, c谩maras y luces, etc.

var scene = new THREE.Scene();

A continuaci贸n tenemos que configurar la c谩mara, hay c谩maras en perspectiva y ortogr谩ficas.聽Durante la mayor parte del tiempo, mantendremos la perspectiva, que es un tipo de c谩mara normal en el que ver谩 objetos m谩s cercanos, m谩s grandes y m谩s peque帽os, cuando est茅n lejos.聽Para la c谩mara de ortograf铆a, ver谩 una vista isom茅trica de un 谩ngulo espec铆fico sin perspectiva.

Entonces el primer par谩metro de la c谩mara es el campo de visi贸n, b谩sicamente es el ancho del 谩ngulo de percepci贸n.聽Configur茅moslo en 75, la siguiente es la relaci贸n de aspecto, vamos a usar el ancho actual dividido por la altura.

var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight);

A continuaci贸n, vamos a configurar el renderizador.聽Puedes considerarlo como un motor de renderizado.聽Vamos a usar el renderizador WebGL por ahora.聽Puede personalizar la opci贸n de representaci贸n aqu铆, como anti-aliasing.聽\

var renderer = new THREE.WebGLRenderer({antialias: true});

Usaremos el m茅todo setsize para designar la resoluci贸n de representaci贸n.聽Usemos el ancho y la altura actuales.聽Luego agregue el elemento del renderizador a su cuerpo o elemento html que desee

renderer.setSize(window.innerWidth,window.innerHeight);
$('body').append(renderer.domElement);

Creando un Cubo

Ahora tenemos la escena y la configuraci贸n de la c谩mara.聽A continuaci贸n vamos a crear un cubo.

Lo primero es crear una geometr铆a, pensar en ella como un esqueleto para nuestro objeto.聽Hay muchos tipos de geometr铆a disponibles, pero como vamos a crear un cubo, usaremos BoxGeometry con el mismo tama帽o.聽en todas las dimensiones

var geometry = new THREE.BoxGeometry(1,1,1);

Ahora vamos a necesitar una piel para cubrir nuestra geometr铆a.聽As铆 que necesitamos material que defina las caracter铆sticas de la piel, como la opacidad, el reflejo o la textura.聽Usemos MeshBasicMaterial (color s贸lido sin reflexi贸n y c谩lculo de iluminaci贸n) con color rojo por ahora.

var material = new THREE.MeshBasicMaterial({color: 0xff0000});

Ahora podemos crear nuestro cubo creando un objeto de malla usando nuestra geometr铆a y material聽聽y agregando el cubo a la escena.

var cube = new THREE.Mesh(geometry,material);
scene.add(cube);

Pero como acabamos de agregar todo a la escena sin especificar la posici贸n, ahora nuestro cubo est谩 en el mismo lugar que la c谩mara y no se procesar谩.聽Vamos a moverlo un poco.聽Tambi茅n voy a cambiar el 谩ngulo de rotaci贸n.

cube.position.z = -5;
cube.rotation.x = 10;
cube.rotation.y = 5;

Llame a un m茅todo de renderizado en el objeto renderizador y p谩sele la escena y la c谩mara.

renderer.render(scene,camera);

Y aqu铆 est谩 el cubo renderizado.

A帽adiendo animaci贸n

Para este tutorial, vamos a crear un bucle de animaci贸n a partir de una llamada de funci贸n recursiva.

Primero crea una funci贸n para definir la acci贸n para cada cuadro.聽En el interior, incrementaremos un poco la rotaci贸n y llamaremos el m茅todo de renderizado.聽Al final de la funci贸n, llamaremos a requestAnimationFrame.聽Este m茅todo ser谩 invocado por los navegadores a la frecuencia de actualizaci贸n de pantalla actual.聽Generalmente 60 veces por segundo.聽Le pasaremos la funci贸n animada actual para que sea un ciclo recursivo.

var animate = function(){
    cube.rotation.x += 0.01;
    renderer.render(scene,camera);
    requestAnimationFrame(animate);
}

Inicia el ciclo de animaci贸n llamando a nuestra funci贸n.

animate();

Vea c贸mo funciona la animaci贸n en este v铆deo.

De modo que lo b谩sico de c贸mo utilizar three.js para crear una animaci贸n 3D simple en su sitio web.聽

C贸digo fuente Three JS

<html>
        <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script src="jquery-2.1.4.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css">
        </head>
        <body>
        <div id="navbar"><span>Three.js Tutorial</span></div>
        <script src="three.min.js"></script>
        <script>
          var scene = new THREE.Scene();
          var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight);
          var renderer = new THREE.WebGLRenderer({antialias: true});
          renderer.setSize(window.innerWidth,window.innerHeight);
          $('body').append(renderer.domElement);
          var geometry = new THREE.BoxGeometry(1,1,1);
          var material = new THREE.MeshBasicMaterial({color: 0xff0000});
          var cube = new THREE.Mesh(geometry,material);
          scene.add(cube);
          cube.position.z = -5;
          cube.rotation.x = 10;
          cube.rotation.y = 5;
          renderer.render(scene,camera);
          var animate = function(){
            cube.rotation.x += 0.01;
            renderer.render(scene,camera);
            requestAnimationFrame(animate);
          }
          animate();
        </script>
        </body>
</html>
Comparte