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!!!
En este post se da respuesta a una pregunta realizada por facebook. El problema dice así: Se quiere personalizar un JTab[...]
A finales de abril de 2026, se detecto una campaña de ransomware altamente automatizada que ha comenzado a explotar vuln[...]
Un Action Provider es un elemento que habita en la Action Bar para incrementar la accesibilidad de nuestras aplicaciones[...]
Ya sea para desarrollo de software o para cualquier otro tipo de tareas donde necesitas plasmar una idea de forma rápida[...]
En este post crearemos una aplicación sencilla para mandar mensajes de texto desde android. Necesitamos IDE: Eclipse + S[...]
Dia Diagram Editor es un software gratuito de dibujo de código abierto para los sistemas operativos de Windows, Mac OS X[...]
