Potencia tus proyectos web con Three.js
**Three.j**s ha abierto un mundo de posibilidades creativas para los desarrolladores web. Esta herramienta nos permite dar vida a nuestras ideas y construir experiencias visuales impactantes que van más allá de lo tradicionalmente posible en el navegador.
¿Qué es Three.js?
Es una biblioteca de JavaScript de código abierto que facilita la creación y visualización de gráficos 3D en el navegador web.
Actúa como una capa de abstracción sobre la API **WebG**L, permite a los desarrolladores trabajar con gráficos 3D en el navegador sin tener que lidiar con las complejidades de la codificación **WebG**L de bajo nivel.
Esta herramienta ha ganado popularidad por su simplicidad de uso y su capacidad para crear desde simples demostraciones hasta aplicaciones 3D complejas, abriendo un nuevo mundo de posibilidades en el desarrollo web moderno.
Ventajas
- Accesibilidad: Three.js actúa como un puente entre los desarrolladores y el poderoso mundo de WebGL. Al abstraer las complejidades técnicas, permite a cualquier programador, sin importar su nivel de experiencia, crear experiencias 3D impresionantes de forma intuitiva.
- Versatilidad: Desde simples modelos 3D hasta asombrosos mundos virtuales, Three.js se adapta a cualquier proyecto. Su flexibilidad y funcionalidades lo convierten en una herramienta esencial para desarrolladores de juegos, visualizaciones de datos, realidad virtual y mucho más.
- Ecosistema: Three.js cuenta con una documentación muy bien elaborada y una comunidad activa, lo que significa que tienes acceso a una gran cantidad de recursos, tutoriales y extensiones. Esto facilita la integración de Three.js en tus proyectos y te permite aprovechar las experiencias de otros desarrolladores.
Ahora que hemos explorado las ventajas de Three.js, ¡es hora de poner manos a la obra! Comenzaremos por familiarizarnos con la estructura básica de un proyecto Three.js y luego crearemos nuestro primer objeto 3D.
Estructura Básica
Para dominar esta biblioteca, es fundamental entender los componentes básicos. Estos elementos, trabajando en conjunto, nos permiten construir desde simples formas hasta mundos virtuales complejos.
- Renderer: Es el motor que se encarga de dibujar la escena en la pantalla. Crea un objeto **WebGLRenderer** que se encarga de renderizar la escena en un elemento [HTML](https://developer.mozilla.org/es/docs/Web/HTML) ‘’.
- Camera: Define el punto de vista desde el cual se observa la escena. Crea un objeto **PerspectiveCamera** o **OrthographicCamera** para simular diferentes tipos de lentes.
- Scene: Contiene todos los objetos 3D de la escena. Crea un objeto **Scene** donde se agregarán todos los elementos.
- Light: Ilumina la escena y crea efectos de sombra. Crea objetos **DirectionalLigh**t, **PointLigh**t, **AmbientLigh**t, etc., para simular diferentes tipos de luces.
- **Mes**h: Representa un objeto 3D visible en la escena. Combina una geometría y un material para crear un objeto 3D.
- Geometry: Define la forma de un **Mes**h, como un cubo, una esfera, etc. Crea objetos **BoxGeometr**y, **SphereGeometr**y, etc., para definir diferentes formas geométricas.
- Material: Define las propiedades visuales de un **Mes**h, como el color, la textura, la reflexión, etc. Crea objetos **MeshBasicMateria**l, **MeshStandardMateria**l, etc., para aplicar diferentes tipos de materiales a los **Mes**h.
- **Textur**e: Aplica una imagen a un **Mes**h para darle más detalle y realismo. Carga una imagen y la asigna a un material para crear una textura.
Estos elementos trabajan juntos para crear mundos 3D virtuales interactivos. Al comprender su función y relación, podrás construir escenas cada vez más complejas y realistas.
Let’s Code
Para dar nuestros primeros pasos en Three.js, crearemos un clásico: ¡Hello cube! Esta sencilla figura nos permitirá familiarizarnos con los conceptos fundamentales de la biblioteca. Antes de comenzar, necesitaremos:
- Conocimientos básicos en HTML, CSS y JavaScript: Estos tres lenguajes son la base de todo desarrollo web. **HTM**L te permitirá estructurar tu página, **CS**S te ayudará a darle estilo y **JavaScrip**t te dará la funcionalidad para crear interacciones y animaciones.
- Un editor de código: **Visual Studio Cod**e es una excelente opción, ya que ofrece una amplia gama de herramientas y extensiones para facilitar el desarrollo web.
- Un navegador web moderno: **Chrom**e, **Firefo**x o **Edg**e son excelentes opciones, ya que ofrecen un **soporte óptimo para WebG**L, la tecnología que permite renderizar gráficos 3D en el navegador.
En este primer paso, vamos a crear una estructura básica de HTML que servirá como contenedor para nuestra escena 3D. También vamos a importar la librería de Three.js junto con un módulo adicional que utilizaremos más adelante.
- Definimos la estructura HTML estándar, que incluye la configuración del idioma, codificación de caracteres, y un título para nuestro proyecto.
- Luego, importamos Three.js directamente desde un CDN, lo que nos permitirá acceder a todas las funcionalidades que ofrece para crear gráficos 3D en el navegador.
- Adicionalmente, incluimos los controles de órbita (
OrbitControls), que nos permitirán interactuar con la escena utilizando el mouse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Cube</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@v0.166.1/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.166.1/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// ...
</script>
</body>
</html>Ahora vamos a crear un **renderizador **que se encargará de mostrar nuestra escena 3D en la pantalla. También crearemos una escena, que es el espacio donde colocaremos todos los objetos, luces y cámaras que conformarán nuestra visualización. Finalmente, añadiremos una **cámara **en perspectiva, que nos permitirá ver la escena desde un punto de vista específico. La cámara será posicionada un poco hacia atrás para que pueda capturar toda la escena.
<script type="module">
// ...
// Crear un renderizador
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Crear una escena
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x131524);
// Crear una cámara
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
camera.position.z = 5;
// Renderizar la escena y la cámara
renderer.render(scene, camera);
</script>Después de configurar el renderizador, la escena y la cámara, vamos a agregar un objeto a nuestra escena para poder visualizar algo en la pantalla. En este caso, crearemos un cubo simple, que es una de las geometrías básicas que ofrece Three.js. Este cubo será construido utilizando una geometría y un material básico que le dará color. Una vez que el cubo esté creado, lo añadiremos a la escena, lo que permitirá que sea renderizado y visible desde la cámara que hemos configurado.
<script type="module">
// ...
// Crear un renderizador
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Crear una escena
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x131524);
// Crear una cámara
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
camera.position.z = 5;
// Crear un cubo
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xE26168 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Renderizar la escena y la cámara
renderer.render(scene, camera);
</script>Al ejecutar el código hasta este punto, veremos un cubo en la pantalla del navegador. Sin embargo, aunque el cubo está en una escena 3D, lo estamos viendo como una imagen estática en 2D. Para darle vida y resaltar la tridimensionalidad del cubo, vamos a añadir una animación que lo haga rotar continuamente, lo que permitirá apreciar mejor sus dimensiones y su forma.
Además, aplicaremos la opción wireframe al material del cubo, lo que mostrará su estructura en forma de malla de líneas. Esto no solo hará que el cubo tenga un aspecto más interesante, sino que también facilitará la visualización de su rotación.
<script type="module">
// ...
// Crear un renderizador
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Crear una escena
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x131524);
// Crear una cámara
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
camera.position.z = 5;
// Crear un cubo
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xE26168, wireframe: true });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Renderizar la escena y la cámara
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
Para darle un aspecto más realista a nuestro cubo, vamos a añadirle una textura. Una textura es básicamente una imagen que se aplica a la superficie del cubo, dándole un color y un detalle que un material simple no puede ofrecer. Además, agregaremos una luz ambiental a la escena. La luz ambiental ilumina todos los objetos de manera uniforme, asegurando que la textura del cubo sea visible desde cualquier ángulo.
Luego, cambiaremos el material del cubo para que, en lugar de un simple color, usemos la textura que hemos cargado. Esto permitirá que el cubo tenga una apariencia más rica y detallada, mostrando una imagen sobre sus superficies. Con la luz ambiental y la textura aplicada, el cubo tendrá un aspecto mucho más atractivo y realista en la escena 3D.
<script type="module">
// ...
// Crear un renderizador
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Crear una escena
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x131524);
// Crear una cámara
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
camera.position.z = 5;
// Crear textura
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./texture.png');
// Crear luz ambiente
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 1);
scene.add(ambientLight);
// Crear un cubo
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Renderizar la escena y la cámara
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
Finalmente, vamos a utilizar OrbitControls, una utilidad de Three.js que nos permitirá interactuar con la cámara usando el mouse. Con OrbitControls, podremos rotar, hacer zoom y desplazar la vista alrededor del cubo, explorando la escena desde diferentes ángulos sin necesidad de modificar manualmente la posición de la cámara en el código. Esta característica es especialmente útil para visualizar objetos 3D de manera más dinámica e intuitiva.
Con la implementación de OrbitControls, habremos completado nuestro código. Ahora tendremos un cubo texturizado, iluminado, animado y completamente interactivo en nuestra escena 3D, listo para ser explorado en el navegador.
<script type="module">
// ...
// Crear un renderizador
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Crear una escena
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x131524);
// Crear una cámara
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
camera.position.z = 5;
// Crear textura
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./texture.png');
// Crear luz ambiente
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 1);
scene.add(ambientLight);
// Crear un cubo
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Añadir controles de órbita
const controls = new OrbitControls(camera, renderer.domElement);
// Renderizar la escena y la cámara
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>En conclusión, hemos recorrido los pasos fundamentales para crear una escena 3D interactiva utilizando Three.js. Desde la configuración inicial hasta la incorporación de texturas, luces y controles, hemos visto cómo es posible dar vida a objetos tridimensionales en el navegador con un código relativamente simple. Three.js es una poderosa herramienta que abre un mundo de posibilidades para desarrolladores interesados en gráficos 3D. Si te apasiona la idea de crear experiencias visuales inmersivas y dinámicas, te animo a seguir explorando esta tecnología. Con Three.js, las únicas limitaciones son tu imaginación y creatividad. ¡Empieza a experimentar y descubre lo que puedes lograr!
