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!!!
Song Maker es el nuevo experimento de Google Chrome Music Lab que permite al usuario crear música desde el navegador a t[...]
Los procedimientos almacenados no solo pueden retornar valores como números, cadenas, etc, sino también datos como los R[...]
Los archivos digitales (txt, docx, xlsx, odt, odp, pdf, etc) nos permiten almacenar información el cual en ocasiones, de[...]
FossFLOW es una potente aplicación web progresiva (PWA) de código abierto para crear atractivos diagramas isométricos, s[...]
¿Que es y para que sirve una imagen forense? Una imagen forense es un «clon» (copia bit a bit) de algún dispositivo como[...]
Según Santa Wikipedia: «Un archivo binario es un archivo informático que contiene información de cualquier tipo codifica[...]
