Three.js es el motor de facto que que permite la creación de gráficos 3D interactivos directamente en el navegador web, sin necesidad de plugins externos. Lanzada inicialmente en 2010, su principal objetivo fue abstraer la complejidad de la API de bajo nivel WebGL, permitiendo a desarrolladores y diseñadores enfocarse en la creatividad del contenido 3D en lugar de en la tediosa gestión de buffers y shaders. Esto la convierte en la herramienta esencial para cualquiera que busque llevar la inmersión visual a un nuevo nivel en el entorno web.
El creador de Three.js es el desarrollador español Ricardo Cabello, ampliamente conocido en internet por su alias Mr. doob. El desarrollo es completamente de código abierto bajo la licencia MIT. Su repositorio en GitHub es el corazón del proyecto, donde una vasta comunidad de colaboradores mantiene, evoluciona y documenta la librería. La puedes encontrar en https://github.com/mrdoob/three.js.
La librería funciona mediante la construcción de Mallas (Mesh), que son la combinación de una Geometría (Geometry), la forma del objeto y un Material (Material), cómo interactúa con la luz y el color. Three.js maneja la carga de modelos complejos, la implementación de texturas, y un sofisticado sistema de Luces (puntual, direccional, ambiental) y Sombras que añaden un realismo crucial a la escena. Además, su arquitectura modular permite la incorporación de controles de órbita y utilidades de raycasting para una interactividad completa con el ratón.
A continuación se detalla un proyecto básico sobre ThreeJS:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo bàsico de Three.js</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// === 1. CREACIÓN DE LA ESCENA ===
const scene = new THREE.Scene();
//vista del expectador
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);
// === 2 CREACIÓN DEL OBJETO ===
const geometry = new THREE.BoxGeometry(1, 1, 1);//ancha, altura, profundidad
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// === 3. ANIMACIÓN ===
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.007; // Rotación en el eje X (arriba/abajo)
cube.rotation.y += 0.007; // Rotación en el eje Y (izquierda/derecha)
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
En el navegador veriamos algo como esto:
Un cubo girando sobre su eje.
Pero con ThreeJS se pueden lograr cosas mucho mas interesante que un cubo, por ejemplo en la web https://www.kokuyo.com/en/special/curiosity-is-life/
La web pesa bastante pero un poco de paciencia que vale la pena.
En el desarrollo web moderno, Three.js se integra perfectamente con frameworks como React a través de la librería React Three Fiber (R3F), o tambien con Vue (https://troisjs.github.io/examples/demos/1.html) Esta versatilidad permite a los desarrolladores tratar los objetos 3D facilmente y manejar el estado y ciclo de vida de manera eficiente y familiar.
Three.js ha cimentado su lugar como el pilar del 3D en la web. Su comunidad activa, su constante evolución y su capacidad para abstraer WebGL la hacen accesible, potente y la elección preferida para desarrolladores. Si buscas crear una experiencia web memorable, desde visualizaciones de datos hasta tiendas virtuales inmersivas, dominar Three.js es un recurso necesario.
Enjoy!!!
Java Printing nos permite hacer uso de las impresoras del sistema para, valga la redundancia 🙂 imprimir los gráficos de[...]
En este post implementaremos el código necesario para multiplicar matrices con el lenguaje Kotlin, pero para realizar es[...]
Problema: Desarrollar un juego en consola con Kotlin que genere un numero aleatorio entre un rango preestablecido y perm[...]
Online Flag Waver es una páginas web con la que podemos generar banderas ondeando con la textura que elijamos ya sea des[...]
En post anteriores vimos lo que son los parámetros IN y los parámetros OUT pero existe otro tipo de parámetro que es la[...]
¿Sabia que por la pandemia que azota a la mayoría de los países de la Tierra, la mitad de la población estudiantil del m[...]
