🚴🏿 🛸 👎🏾 Introducción a 3D: conceptos básicos de Three.js ⛽️ 🧟 🕸️

La complejidad de la Web está cambiando a diario, y sus capacidades están creciendo igual de rápido, especialmente con el renderizado 3D. ¿Quién está empezando a unirse al tema 3D? Bienvenido a Cat.

Vamos de lejos

WebGL es una biblioteca de software para JavaScript que le permite crear gráficos en 3D que funcionan en los navegadores. Esta biblioteca se basa en la arquitectura de la biblioteca OpenGL. WebGL usa el lenguaje de programación de sombreador GLSL , que tiene una sintaxis tipo C. WebGL es interesante porque el código se modela directamente en el navegador. Para esto, WebGL utiliza el objeto de lienzo que se introdujo en HTML5.

Trabajar con WebGL, y con sombreadores en particular, es un proceso que consume bastante tiempo. En el proceso de desarrollo, es necesario describir cada punto, línea, cara, etc. Para visualizar todo esto, necesitamos registrar un fragmento de código bastante voluminoso. Para aumentar la velocidad de desarrollo, se desarrolló la biblioteca Three.js .

Three.js es una biblioteca de JavaScript que contiene un conjunto de clases predefinidas para crear y mostrar gráficos 3D interactivos en WebGL.

Three.js para WebGL es lo mismo que jQuery para JavaScript. La biblioteca ofrece sintaxis declarativa y resúmenes de los dolores de cabeza asociados con 3D en el navegador. Echemos un vistazo general y veamos cómo empezar si eres nuevo en el mundo 3D.

Más sobre Three.js

La biblioteca Three.js, como ya se mencionó, facilita el trabajo con WebGL. Cuando se utiliza Three.js, no hay necesidad de escribir sombreadores (pero la posibilidad permanece), y se hace posible operar con conceptos familiares.

Una gran cantidad de desarrolladores trabajan en la biblioteca. El principal ideólogo y desarrollador es Ricardo Cobello, conocido bajo el seudónimo creativo Mr.Doob .

Los gráficos de modelado con Three.js se pueden comparar con el conjunto, ya que tenemos la oportunidad de operar con conceptos como escena, luz, cámara, objetos y sus materiales.

Las tres llamadas ballenas Three.js incluyen:

Escena : una especie de plataforma donde se colocan todos los objetos que creamos;
Cámara , de hecho, este es el "ojo" que se dirigirá a la escena. La cámara toma y muestra objetos que se encuentran en el escenario;
Renderer : un visualizador que le permite mostrar una escena capturada por la cámara.

Three.js tiene varios tipos de cámaras:

Cámara de perspectiva
Cámara estereo
Cámara ortográfica
Cámara cubo

Los más comunes son la cámara de perspectiva y la cámara ortográfica.

Cámara de perspectiva

Este es el modo de proyección más común utilizado para renderizar una escena 3D.

La cámara de perspectiva está diseñada para simular lo que ve el ojo humano. La cámara percibe todos los objetos en una proyección en perspectiva, es decir: cuanto más lejos está el objeto de nosotros, más pequeño parece.

La cámara de perspectiva toma 4 argumentos:

FOV Field Of View (/ ) — , .
Aspect ratio — , , . . , , .
Near & Far — , . , , , .

Orthographic Camera

En este modo de proyección, el tamaño del objeto en la imagen mostrada permanece constante, independientemente de su distancia desde la cámara. Es decir, es una cámara remota a una distancia infinita de los objetos.

En este caso, todas las líneas perpendiculares permanecen perpendiculares, todas paralelas - paralelas. Si movemos la cámara, las líneas y los objetos no se distorsionarán.

Esto puede ser útil cuando se muestran escenas 2D y elementos de la interfaz de usuario.

Encendiendo

Sin iluminación en el escenario, tendrá la impresión de que está en una habitación oscura. Además, al iluminar el escenario, puede dar un mayor realismo. Técnicamente, cada iluminación se puede configurar en color.

Ejemplos de iluminación:

Ambient Light — , ; , .
Directional Light — , . , , , , ; , .
Point Light — , . ( ).
Luz puntual : esta luz se emite desde un punto en una dirección, a lo largo de un cono, expandiéndose a medida que se aleja de la fuente de luz.

Creando objetos en el escenario

El objeto creado en el escenario se llama Malla.

La malla es una clase que representa objetos basados en una malla poligonal triangular.

Esta clase toma 2 argumentos:

Geometría : describe la forma (posición de vértices, caras, radio, etc.)
Material : describe la apariencia de los objetos (color, textura, transparencia, etc.)

Intentemos crear 2 formas simples: un cubo y una esfera.

Primero, vaya al sitio three.js , descargue la última versión de la biblioteca. Luego conectamos la biblioteca en la sección de encabezado o al comienzo de la sección de cuerpo de nuestro documento, y ya está:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>First Three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
      </style>
  </head>
  <body>
    <script src="js/three.js"></script>
    <script>
      //  Javascript .
    </script>
  </body>
</html>

Además, para que podamos mostrar el objeto creado, es necesario crear una escena, agregar una cámara y configurar el render.

Añadir escena:

var scene = new THREE.Scene();

Añadir una cámara de perspectiva:

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

La cámara toma 4 parámetros, que se mencionaron anteriormente:

ángulo de visión o FOV, en nuestro caso es un ángulo estándar de 75;
el segundo parámetro es la relación de aspecto o relación de aspecto;
Los parámetros tercero y cuarto son la distancia mínima y máxima desde la cámara, que caerá en el renderizado.

Agregue y configure el renderizado:

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

Lo que hicimos: primero creamos un objeto de renderizado, luego establecemos su tamaño de acuerdo con el tamaño del área visible, y finalmente lo agregamos a la página para crear un elemento de lienzo vacío con el que trabajaremos.

Después de crear el render, indicamos dónde mostrar la etiqueta del lienzo . En nuestro caso, lo agregamos a la etiqueta del cuerpo .

Para crear el cubo en sí, primero establecemos la geometría:

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

Se crea un cubo utilizando la clase BoxGeometry . Esta es una clase que contiene los vértices y las caras de un cubo. Transferimos los tamaños:

ancho : ancho del cubo, tamaño de los lados a lo largo del eje x
altura : altura del cubo, es decir tamaño del lado y
profundidad : profundidad del cubo, es decir tamaño lateral en el eje Z

Para colorear el cubo, configure el material:

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

En nuestro caso, se establece MeshBasicMaterial y se pasa el parámetro de color 0x00ff00 , es decir color verde. Este material se usa básicamente para darle a la figura un color uniforme. La desventaja es que la figura desaparece en profundidad. Pero este material es bastante útil cuando se procesan wireframes utilizando el parámetro {wireframe: true} .

Ahora necesitamos un objeto Mesh que tome geometría y le aplique material:

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

camera.position.z = 25;

Añadimos malla a la escena y mover la cámara como todos los objetos después de la scene.add () método se añaden de forma predeterminada con coordenadas (0,0,0), por lo que la cámara y el cubo estarán en el mismo punto.

Para animar el cubo, necesitamos dibujar todo dentro del bucle de renderizado usando requestAnimationFrame :

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

requestAnimationFrame es una solicitud al navegador de que desea animar algo. Le pasamos una función para llamar, es decir, la función render ().

Aquí establecemos los parámetros de la velocidad de rotación. Como resultado, el bucle representa nuestra escena 60 veces por segundo y hace que el cubo gire.

Ahora dibujemos una esfera:

var geometry = new THREE.SphereGeometry(1, 32, 32);

Para construir una esfera, se usa la clase SphereGeometry , que se encarga de:

radio (el valor predeterminado es 1)
widthSegments : el número de segmentos horizontales (triángulos). El valor mínimo es 3, el valor predeterminado es 8
heightSegments : el número de segmentos verticales. El valor mínimo es 2, el valor predeterminado es 6

Por cierto, cuanto más especifiques el número de triángulos, más lisa será la superficie de la esfera.

A continuación, intentamos usar otro material, MeshNormalMaterial , un material multicolor que compara vectores normales en colores RGB:

var material = new THREE.MeshNormalMaterial();
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
camera.position.z = 3;

Hay muchos tipos de material. Algunos materiales se pueden combinar y aplicar simultáneamente a una figura. Lee más aquí .

El último paso es establecer el ciclo de renderizado:

function render() {
	requestAnimationFrame( render );
	sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  renderer.render( scene, camera );
}
render();

Y obtenemos lo siguiente:

Intentemos crear una figura más compleja y aplicar material más complejo.

Como ejemplo, tome el material MeshPhongMaterial , que tiene en cuenta la iluminación. Por lo tanto, primero debemos agregar algo de luz a la escena. A continuación, agregamos un SpotLight con un tinte amarillo y establecemos su posición en el eje de coordenadas:

var scene = new THREE.Scene();
var spotLight = new THREE.SpotLight(0xeeeece);
spotLight.position.set(1000, 1000, 1000);
scene.add(spotLight);
var spotLight2 = new THREE.SpotLight(0xffffff);
spotLight2.position.set( -200, -200, -200);
scene.add(spotLight2);

SpotLight , como se mencionó anteriormente, se irradia desde un punto en una dirección, a lo largo de un cono, expandiéndose a medida que se aleja de la fuente de luz. Además del color, la luz puntual puede asumir argumentos: intensidad, distancia, ángulo, penumbra, decadencia y también sombras.

Puede leer sobre otros tipos de luz y sus capacidades aquí .

Ahora defina la forma misma:

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

La clase TorusGeometry está diseñada para construir toros o "rodillos". Esta clase toma los siguientes parámetros:

radio, el valor predeterminado es 1;
diámetro de la tubería, por defecto 0.4;
radialSegments o el número de segmentos triangulares, el valor predeterminado es 8;
Tubular Segmentos o número de segmentos faciales, el valor predeterminado es 6

Añadir material:

var material = new THREE.MeshPhongMaterial( {
color: 0xdaa520,
specular: 0xbcbcbc,
 } );

Este material está destinado a superficies brillantes. Le damos un color dorado y agregamos una propiedad especular , que afecta el brillo del material y su color. El color predeterminado es 0x111111 - gris oscuro.

Render, y esto es lo que terminamos con:

Un poco más sobre las características de Three.js

Para incluir Three.js en un proyecto, solo necesita ejecutar npm install three .

Si combina archivos usando Webpack o Browserify , que le permiten implementar require ('módulos') en el navegador, combinando todas sus dependencias, tiene la opción de importar el módulo a sus archivos fuente y continuar usándolo en modo normal:

var THREE = require('three');

var scene = new THREE.Scene();
...

También es posible utilizar la importación de sintaxis ES6 :

import * as THREE from 'three';

const scene = new THREE.Scene();
...

O, si desea importar solo ciertas partes de la biblioteca Three.js, por ejemplo Scene :

import { Scene } from 'three';

const scene = new Scene();
...

Conclusión

Con la ayuda de casi un par de líneas de código, creamos 2 formas simples, y una es un poco más complicada. Naturalmente, Three.js tiene muchas más funciones. Three.js tiene muchas formas dentro de la caja, materiales, tipos de iluminación, etc. Esto es solo una pequeña parte de lo básico.

La biblioteca Three.js te permite crear y crear cosas realmente saludables. Aquí hay algunos ejemplos fijos:

Ejemplo 1
Ejemplo 2
Ejemplo 3

Si desea comenzar a aprender 3D en JavaScript, puede encontrar todo lo que necesita aquí o aquí .

Introducción a 3D: conceptos básicos de Three.js