Post

El uso del three.js

Creando una escena

El objetivo de esta sección es brindar una breve introducción a three.js. Comenzaremos montando una escena, con un cubo giratorio. Se proporciona un ejemplo de trabajo en la parte inferior de la página en caso de que se quede atascado y necesite ayuda.

Antes que empecemos

Antes de que pueda usar three.js, necesita un lugar para mostrarlo. Guarde el siguiente HTML en un archivo en su computadora, junto con una copia de three.js en el directorio js/, y ábralo en su navegador.

<!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>
			// Our Javascript will go here.
		</script>
	</body>
</html>

Eso es todo. Todo el código a continuación va en la etiqueta <script>.

Creando la escena

Para poder mostrar cualquier cosa con three.js, necesitamos tres cosas: escena, cámara y renderizador, para que podamos renderizar la escena con la cámara.

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

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

Tomémonos un momento para explicar lo que está pasando aquí. Ahora hemos configurado la escena, nuestra cámara y el renderizador.

Hay algunas cámaras diferentes en three.js. Por ahora, vamos a utilizar una PerspectiveCamera.

El primer atributo es el campo de visión. FOV es la extensión de la escena que se ve en la pantalla en un momento dado. El valor está en grados.

El segundo es la relación de aspecto. Casi siempre conviene utilizar la anchura del elemento dividida por la altura, o se obtendrá el mismo resultado que cuando se reproducen películas antiguas en un televisor de pantalla ancha: la imagen se ve aplastada.

Los dos atributos siguientes son el plano de recorte cercano y el lejano. Esto significa que los objetos que estén más lejos de la cámara que el valor de lejos o más cerca que cerca no se renderizarán. Usted no tiene que preocuparse por esto ahora, pero es posible que desee utilizar otros valores en sus aplicaciones para obtener un mejor rendimiento.

El siguiente paso es el renderizador. Aquí es donde ocurre la magia. Además del WebGLRenderer que usamos aquí, three.js viene con algunos otros, a menudo usados como fallbacks para usuarios con navegadores antiguos o para aquellos que no tienen soporte WebGL por alguna razón.

Además de crear la instancia del renderizador, también necesitamos establecer el tamaño al que queremos que renderice nuestra aplicación. Es una buena idea utilizar la anchura y la altura del área que queremos llenar con nuestra aplicación - en este caso, la anchura y la altura de la ventana del navegador. Para aplicaciones de rendimiento intensivo, también puedes dar a setSize valores más pequeños, como window.innerWidth/2 y window.innerHeight/2, que harán que la aplicación se renderice a un cuarto de tamaño.

Si deseas mantener el tamaño de tu aplicación pero renderizarla a una resolución menor, puedes hacerlo llamando a setSize con false como updateStyle (el tercer argumento). Por ejemplo, setSize(window.innerWidth/2, window.innerHeight/2, false) renderizará tu app a la mitad de resolución, dado que tu <canvas> tiene 100% de ancho y alto.

Por último, pero no menos importante, añadimos el elemento renderizador a nuestro documento HTML. Se trata de un elemento <canvas> que el renderizador utiliza para mostrarnos la escena.

"Todo eso está muy bien, pero ¿dónde está el cubo que prometiste?". Añadámoslo ahora.

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

camera.position.z = 5;

Para crear un cubo, necesitamos una BoxGeometry. Este es un objeto que contiene todos los puntos (vértices) y relleno (caras) del cubo. Exploraremos esto más en el futuro.

Además de la geometría, necesitamos un material para colorearla. Three.js viene con varios materiales, pero nos ceñiremos al MeshBasicMaterial por ahora. Todos los materiales toman un objeto de propiedades que les serán aplicadas. Para mantener las cosas muy simples, sólo suministramos un atributo de color de 0x00ff00, que es verde. Esto funciona de la misma manera que los colores funcionan en CSS o Photoshop (colores hexadecimales).

La tercera cosa que necesitamos es una malla. Una malla es un objeto que toma una geometría, y le aplica un material, que luego podemos insertar en nuestra escena, y mover libremente alrededor.

Por defecto, cuando llamamos a scene.add(), lo que añadimos será añadido a las coordenadas (0,0,0). Esto provocaría que tanto la cámara como el cubo estuvieran uno dentro del otro. Para evitar esto, simplemente movemos la cámara un poco hacia fuera.

Renderizando la escena

Si copiaras el código de arriba en el archivo HTML que creamos antes, no podrías ver nada. Esto se debe a que todavía no estamos renderizando nada. Para ello, necesitamos lo que se llama un bucle de renderizado o animación.

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

Esto creará un bucle que hará que el renderizador dibuje la escena cada vez que se refresque la pantalla (en una pantalla típica esto significa 60 veces por segundo). Si eres nuevo escribiendo juegos en el navegador, podrías decir "¿por qué no creamos simplemente un setInterval ?". La cosa es - podríamos, pero requestAnimationFrame tiene una serie de ventajas. Tal vez la más importante es que se detiene cuando el usuario navega a otra pestaña del navegador, por lo que no desperdicia su preciosa potencia de procesamiento y la vida de la batería.

Animar el cubo

Si insertas todo el código anterior en el archivo que creaste antes de empezar, deberías ver una caja verde. Vamos a hacerlo todo un poco más interesante girándolo.

Añade el siguiente código justo encima de la llamada renderer.render en tu función animate:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

Esto se ejecutará cada fotograma (normalmente 60 veces por segundo), y dará al cubo una bonita animación de rotación. Básicamente, cualquier cosa que quieras mover o cambiar mientras la aplicación se está ejecutando tiene que pasar por el bucle animate. Por supuesto, puedes llamar a otras funciones desde allí, para que no termines con una función animate de cientos de líneas.

El resultado

¡Enhorabuena! Ya has completado tu primera aplicación three.js. Es simple, pero por algo hay que empezar.

El código completo está disponible abajo y como un ejemplo editable en vivo. Juega con él para entender mejor cómo funciona.

<!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( 75, 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( 1, 1, 1 );
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			function animate() {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

INICIO ---------------------------------------------------------------------------------------------------------------------------