Saltar al contenido

Tutorial de Three.js – Hola Mundo Cubo

Valora este articulo.

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

Loading...