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.

Proyectos desarrollados con Three.js

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/