Creando nuestra primera figura geométrica en Three.js un cubo

31-05-2022 - Andrés Cruz

En esta entrada, vamos a dar los primeros pasos con Three.js, creando una sencilla escena, en la cual vamos a dibujar un cubo.

El cubo que es el elemento predilecto que aparece en software como Blender como primera figura geométrica; para esto, necesitamos cumplir 3 pasos.

Elementos fundamentales en Three.js

Para poder renderizar un objeto en Three.js necesitamos 3 elementos:

El primer elemento viene siendo la cámara, la cámara es el ojo o el medio por el cual podemos visualizar nuestra figuras geométricas, que pueden tener varias configuraciones según necesidades, pero, usualmente se una una cámara de tipo perspectiva la cual permite visualizar como si fuera el ojo humano, es decir, podemos ver profundidad.
Otro elemento que no puede faltar es la escena, la escena es el espacio en donde colocamos nuestras figuras, en este ejemplo, un cubo; por lo tanto, lo puedes ver como si fuera el universo, el cual no es más que un espacio vacío en el cual existen estrellas, planetas...
Finalmente tenemos nuestras figuras geométricas que es lo que queremos visualizar; a las mismas podemos animarlas, aplicar operaciones geométricas como traslación, rotación, escalado, aplicar colores, materiales, entre otros.

Hay un cuarto elemento que viene siendo el render, que no es más que el motor de renderizado que soporta todo lo demás.

Código de la clase, con esto tenemos el ejemplo mínimo de crear una escena de Three.js que consta de una escena, cámara, proceso de render y una figura:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 1000 );
            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );
            const cube = new THREE.Mesh( geometry, material );
            cube.position.y = 1 
            scene.add( cube );
            camera.position.z = 2;
            renderer.render(scene, camera);
        </script>
    </body>
</html>

Explicación del codigo anterior

Creamos el proceso de render con:

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

En la cual especificamos el tamaño de la pantalla.

Y lo agregamos al DOM:

document.body.appendChild( renderer.domElement );

También creamos la cámara y la escena:

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

Creamos una figura 3D; para eso tenemos que crear la geometría:

const geometry = new THREE.BoxGeometry();

Y el material, que pueden ser varios tipos, pero, el más sencillo es este, que podemos indicar un color:

const material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );

Lo posicionamos en donde queramos con:

cube.position.y = 1

Agregamos la escena:

scene.add( cube );

Reposicionamos la cámara:

camera.position.z = 2;

Y finalmente, disparamos el render:

renderer.render(scene, camera);

Con esto, tenemos una escena sencilla como la mostrada en la portada de esta publicación.

Three.js JavaScript

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy