Investigando para un nuevo proyecto en el trabajo me encontré con Three.js, una librería escrita en JavaScript para crear y mostrar gráficos animado 3D en el navegador.
En esta introducción vamos a ver que es Three.js y como desarrollar nuestro primer Hola mundo! utilizando sus principales clases y métodos. Y al final te comparto algunos enlaces interesantes para que puedes seguir investigando sobre esta herramienta.
¿Qué es Three.js?
Es una biblioteca liviana escrita en JavaScript para crear y mostrar gráficos animados por computadora en 3D en un navegador Web y puede ser utilizada en conjunción con el elemento canvas de HTML5, SVG o WebGL. El código fuente está alojado en un repositorio en GitHub.

Eche un vistazo a la página de inicio de three.js para ver algunos de los increíbles trabajos que se realizan con esta herramienta.
Hola mundo!
Vamos a implementar nuestro primer código utilizando la librería Three.js, que contara de una escena y un cubo 3d en movimiento, para ver la sintaxis y funcionamiento del framework.
Paso 1. Crear un archivo index.html y agregar la libreria Tree.js CDN. También debemos incluir el archivo style.css y script.js que crearemos en los siguientes pasos.
<!DOCTYPE html>
<html lang="es" >
<head>
<meta charset="UTF-8">
<title>App básica Three.js</title>
<link rel="stylesheet" href="./style.css">
<!-- Three.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>
<body>
</body>
<script src="./script.js"></script>
</html>
Paso 2. Crear un hoja de estilo style.css y agregar el siguiente código:
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
Paso 3. Crear un archivo script.js para nuestro código JavaScript.
// ------------------------------------------------
// CONFIGURACIÓN BÁSICA
// ------------------------------------------------
// Crea una escena vacía
var scene = new THREE.Scene();
// Crea una cámara de perspectiva básica
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 4;
// Crear un renderizador con Antialiasing
var renderer = new THREE.WebGLRenderer({antialias:true});
// Configurar el color claro del renderizador
renderer.setClearColor("#000000");
// Configurar el tamaño del renderizador
renderer.setSize(window.innerWidth, window.innerHeight);
// Agregar renderizado a DOM
document.body.appendChild( renderer.domElement );
// ------------------------------------------------
// Crea una malla de cubo con material básico
var geometry = new THREE.BoxGeometry(2, 2, 2);
var material = new THREE.MeshBasicMaterial({ color: "#433F81" });
var cube = new THREE.Mesh(geometry, material);
// Agregar cubo a la escena
scene.add( cube );
// Render Loop
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Renderiza la escena
renderer.render(scene, camera);
};
render();
Para ver el ejemplo en funcionamiento puedes hacer clic en el botón Rerun.
Si deseas seguir aprendiendo más sobre Three.js te recomiendo visitar la documentación oficial y te dejo algunos enlaces interesantes 😉
Recursos
https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html
https://medium.com/@necsoft/es-three-js-101-hola-mundo-parte-1-e821592823db
https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html
https://webdesign.tutsplus.com/es/tutorials/a-noobs-guide-to-threejs–cms-28639
https://discoverthreejs.com/
Deja un comentario