marzo 29, 2024

BitCuco

¡Hola Mundo!

Renderizado de imágenes web en Javascript con three.js

Si utilizas Javascript y necesitas realizar el renderizado de tus imágenes web, sin importar si son 2D o 3D, existe una biblioteca en Github llamada three.js, la cuál es una buena herramienta que podría ser muy útil si deseas incrustar imágenes vectoriales en el diseño de tu página web.

Es una biblioteca ligera y fácil de usar basada en el api WebGL, que proporciona renderizado para algunos de los formatos de imágenes vectoriales más comunes: Canvas 2D, SVG y CSS3D. Para iniciar a usar three.js, simplemente creamos una escena y agregamos las figuras geométricas que deseamos para nuestro proyecto.

Introducción a three.js

Un buen inicio para realizar el renderizado de tus imágenes web podría ser crear un html que contenga un elemento canvas e importe la biblioteca three.js como se muestra en el ejemplo siguiente:

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ejemplo de uso three.js</title>
		<style>
			body { margin: 0; }
			canvas { display: block; }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			//Código javascript
		</script>
	</body>
</html>

Para el ejemplo anterior, necesitamos crear una escena de imagen vectorial con código javascript. Aquí es donde se utiliza la biblioteca, en donde sus clases permiten crear una imagen con mejores métodos para manipular ésta dentro de un elemento nativo de html como lo es canvas.

Creación de escenas y renderizado

Éstos elementos son los elementos cruciales para agregar una escena dentro del canvas con three.js. Por ejemplo, si queremos agregar una escena con perspectiva, podemos utilizar un fragmento de código semejante al siguiente:

var escena = new THREE.Scene();
var camara = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.2, 800 );

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

Los atributos especificados en PerspectiveCamera significan:

  • Campo de vista (grados de la extensión de imagen en un momento)
  • Relación de aspecto (ancho del elemento dividido por la altura)
  • Plano de recorte cercano y lejano, en donde se realiza el procesamiento de éstos elmentos.

Una vez que definimos la escena, procedemos a trabajar sobre su geometría y materiales. La geometría se refiere a la estructura del objeto y los materiales a la textura que cubre esa geometría.

En forma adicional también podemos agregar una animación. Ésto es factible gracias a la gamma de métodos que proporciona three.js en su documentación.

Para resumir la parte de la geometría y animación, utilizamos el ejemplo contenido en la documentación:

import * as THREE from 'js/three.module.js';

var camara, escena, renderizado;
var geometria, material, mesh;

init();
animar();

function init() {

 camara = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.02, 20 );
 camara.position.z = 1;

 escena = new THREE.Scene();

 geometria = new THREE.BoxGeometry( 0.4, 0.4, 0.4 );
 material = new THREE.MeshNormalMaterial();

 mesh = new THREE.Mesh( geometry, material );
 escena.add( mesh );

 rendererizado = new THREE.WebGLRenderer( { antialias: true } );
 rendererizado.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( rendererizado.domElement );

}

function animar() {

 requestAnimationFrame( animar );

 mesh.rotation.x += 0.01;
 mesh.rotation.y += 0.02;

 rendererizado.render( escena, camara );

}

Ésta sección de código va entre los elementos <script></script> ubicados en el html mostrado al comienzo. Del código anterior, tenemos las líneas clave para llevar a cabo los efectos visuales de las imágenes, las cuáles se verán reflejadas en el elemento canvas que definimos.

document.body.appendChild( rendererizado.domElement );

Agrega el elemento en el DOM, y

rendererizado.render( escena, camara );

Realiza el renderizado