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.

Tutorial de Three.js – Hola Mundo Cubo

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>

Continua aprendiendo con nosotros:

Estilos css para tablas

Mejor servidor local