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!!!
La Alcaldía de la ciudad de La Paz encabezado por Iván Arias presentó el lunes por la noche el «Atlas Integral del Riesg[...]
Google acaba de lanzar AutoDraw, una aplicación que usa la Inteligencia Artificial para adivinar lo que intentas dibujar[...]
Maria DB es un sistema de gestión de bases de datos derivado de MySQL con licencia GPL, pero con un rendimiento similar[...]
Un archivo README.md es un archivo de texto escrito en el lenguaje de marcado Markdown, este se encuentra en la raíz de[...]
En este post crearemos una aplicación en Android Studio para conectarnos con nuestra base de datos de Firebase y leer al[...]
El siguiente código te permite abrir enlaces web desde un JLabel, ademas aprovechando el soporte a etiquetas HTML del co[...]
