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!!!
Si necesitamos mostrar gráficos estadísticos en nuestras aplicaciones android, contamos con muchas librerías disponibles[...]
En este post mostramos un ejemplo de uso de la interface ResultSetMetaData el cual se extiende Wrapper que es una interf[...]
JTable es un componente swing java que nos permite mostrar datos en una tabla de una base de datos, sin embargo a difere[...]
El sistema D’Hondt creado por el jurista belga Victor d’Hondt en 1878, es un método de promedio mayor para a[...]
En este tutorial nos conectaremos a una base de datos de Firebird utilizando el lenguaje de Visual Basic, el proyecto se[...]
Laravel tiene varias formas de tratar con las excepciones de nuetros proyectos, uno de ellos es el helper «abort()», est[...]
