Three.js primeros pasos

En este tutorial se muestra una introducción a three.js la cual es una librería para crear gráficos animados en 3D escrita en JavaScript, empecemos.

Como casi toda tecnología para la web debemos crear un archivo HTML con una estructura base general como la que se muestra a continuación.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Threejs básico</title>
  </head>
  <body>
    <script src="https://threejs.org/build/three.js"></script>

    <script>
      // Aqui ira todo nuestro código
    </script>
  </body>
</html>

En la linea 8 integramos la librería three.js la cual podemos descargar en threejs.org o usar la url como en nuestro ejemplo.

Iniciar la escena.

Para poder mostrar algo usando three.js necesitamos 3 cosas: un objeto cámara, un objeto escena y un objeto renderizador, que podemos iniciar con las siguientes líneas.

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

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

Con lo anterior, por ahora sólo podremos ver una pantalla negra.

Dibujar un cubo en la escena.

Para agregar un cubo seguiremos los siguientes pasos:

1. Necesitamos un BoxGeometry

2. También crearemos un material para colorear la figura. (utilizaremos MeshBasicMaterial para usar un color solido).
3. Crear una malla(Mesh) la cual agrega el material al objeto de geometría.
4. Finalmente agregamos el cubo a la escena.

      var geometry = new THREE.BoxGeometry( 1, 1, 1 );
      var material = new THREE.MeshBasicMaterial( { color: 0x609EBF } );
      var cube = new THREE.Mesh( geometry, material );
      scene.add( cube );

      camera.position.z = 5;

Ahora para que podamos ver el cubo necesitamos un ciclo de renderizado.

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

Ahora podremos ver un cuadrado azul.

Y aunque no lo parezca es una figura 3D, si quieres comprobarlo, podemos cambiar las posiciones en las coordenada x y la coordenada y de la cámara. También para visualizar mejor las tres dimensiones podemos cambiar el material por ejemplo MeshNormalMaterial().

      camera.position.x = 1;
      camera.position.y = 1;

Animar la escena.

Vamos a darle movimiento al cubo, probemos cambiando la rotación del cubo en x dentro de la función de renderizado.

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

Ahora agregaremos una esfera y crearemos una animación diferente para esta figura.

      geometry = new THREE.SphereGeometry(1, 20, 10);
      material = new THREE.MeshBasicMaterial( {color: 0x7F0C29} );
      var sphere = new THREE.Mesh( geometry, material );
      scene.add( sphere );
      sphere.position.x = 0.5;

Cambiamos la posición de la esfera para que no se muestre en la misma posición que el cubo.

Ahora haremos que la esfera rote al rededor del cubo, esto usando razones trigonométricas y calculado la trayectoria de la circunferencia en cada frame.

      var i = 0;
      var render = function () {
        requestAnimationFrame( render );
        cube.rotation.x += 0.1;

        sphere.position.x = Math.cos(i * 0.02 ) * 2;
        sphere.position.y = Math.sin(i * 0.02 ) * 2;

        renderer.render( scene, camera );
        i++;
      };

Resultados.

See the Pen Rotation Three.js by Jesus Tepec (@JesusTepec) on CodePen.

También puedes obtener el código completo aquí

Comenta tus dudas en la sección de comentarios.

Curioseando en Programación

Buscar este blog

Entrada destacada

Como usar enums en Android, kotlin