Aquellos días en los que quería dominar el 3D en la web (WebGL) — Un experimento con Three.js y Blender

Hace tiempo, al navegar por distintos sitios web, me quedaba fascinado con los objetos que se movían al cargar la primera pantalla y con las animaciones que transmitían profundidad. En aquella época pensé: "¡Yo también quiero crear algo así!", y me lancé a probar Three.js y Blender.

Con esa ilusión entré a Liberogic, pero, para ser sincero... últimamente trabajo sobre todo en aplicaciones de gestión empresarial y en la construcción de CMS headless, implementaciones más sólidas y sobrias (jaja). No es que lo critique, ¡eh!

Ya llevo casi cuatro años aquí y, recordando aquel anhelo por una web en movimiento, quiero repasar brevemente los fundamentos de WebGL.

Qué es WebGL

WebGL es una tecnología que permite mostrar gráficos 3D en sitios web, y funciona en todos los navegadores principales, como Chrome, Firefox y Safari.

Antes, los complementos como Flash Player eran lo habitual, pero tenían el problema de que no funcionaban bien en los smartphones.

En cambio, WebGL tiene soporte nativo, por lo que puede considerarse la tecnología que abrió el camino a las representaciones 3D de la era móvil.

Pruébalo en la práctica

Mostrar un objeto 3D en el navegador con Three.js

Three.js es una biblioteca de uso comercial libre que permite crear contenido 3D de forma sencilla utilizando JavaScript.

Primero, como concepto básico de WebGL, se necesitan tres elementos: Renderer, Scene y Camera.

Renderer es el objeto principal de Three.js. Al pasar la Scene y la Camera al Renderer, la parte de la Scene en 3D que queda dentro del volumen de visión de la cámara se renderiza (dibuja) en el lienzo como una imagen 2D.

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  1000, // 視野角
  window.innerWidth / window.innerHeight, // 側面
  75, // 近く
  1000 // 遠い
);
camera.position.set(0, 0, 400);

//マウスで制御
const controls = new OrbitControls(camera, document.body);

//html側の<canvas id="myCanvas"></canvas>を取得
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas"),
  antialias: true,
});

//setSize()メソッドでサイズを設定
renderer.setSize(window.innerWidth, window.innerHeight);
//背景色も変更可能
renderer.setClearColor("#000")

//htmlの<canvas id="myCanvas"></canvas>へ流し込み
document.body.appendChild(renderer.domElement);

Después, el cubo 3D se crea mediante un objeto de visualización llamado malla. Para crear una malla, es necesario preparar una geometría (forma) y un material (superficie).

//ジオメトリ（立方体）
const geometry = new THREE.BoxGeometry(100, 100, 100)

//マテリアル（色）
const material = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometry, material);
//Sceneに追加
scene.add(box);

//ライト
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
//Sceneに追加
scene.add(light);

Por último, añadimos animación.

En esta ocasión omitiremos la implementación de las partículas que lo rodean.

function animate() {
  requestAnimationFrame(animate);

  box.rotation.x += 0.005;
  box.rotation.y += 0.005;
  renderer.render(scene, camera);
}

animate()

Al renderizar la Scene que contiene la camera, geometry, material y light configurados, se dibujará en el navegador.

Crear un modelo 3D con Blender

Blender es un software integrado y de código abierto que cubre todo el proceso de creación 3D de forma gratuita: modelado 3D, animación, renderizado, desarrollo de videojuegos y edición de video. Blender por sí solo no permite crear sitios WebGL.

Al igual que en Three.js, en Blender se crea la forma con objetos de malla y se aplican colores y texturas de material. Después, se ajusta la iluminación con luces para definir cómo incide la luz y dónde se generan las sombras, y se ajusta la posición y la dirección de la cámara antes de renderizar.

Combinando nodos, es posible crear degradados, efectos metálicos o emisión de luz, logrando texturas que parecen reales.

Referencia: https://www.youtube.com/watch?v=DsNZzUZPhw4

Mostrar en el navegador con Three.js un modelo 3D creado en Blender

Exporte el modelo 3D creado en Blender como archivo .glb e intégrelo en Three.js.

Importe las funciones OrbitControls, GLTFLoader y DRACOLoader desde la biblioteca Three.js.

OrbitControls es una utilidad para controlar la cámara con el ratón, mientras que GLTFLoader y DRACOLoader sirven para cargar modelos 3D en formato GLTF y en su versión comprimida DRACO, respectivamente.

¡Mostré una manzana modelada en el navegador!

Sin embargo, al mostrar en el navegador con Three.js un modelo creado en Blender, los colores y las texturas pueden verse diferentes debido a las diferencias en el entorno de renderizado y la compatibilidad de los materiales. Para lograr el aspecto que deseo, hace falta hacer algunos ajustes.

En mis proyectos del día a día me dedico sobre todo a la integración con CMS y al diseño y desarrollo del frontend de aplicaciones de negocio, por lo que, en mi trabajo, he tenido muy poco contacto con las representaciones 3D.

Pero, al ponerme a experimentar de nuevo, vuelvo a pensar: "Sigue siendo muy interesante".

Quizás fue precisamente gracias a mi admiración por la web en movimiento de aquella época que me fui sintiendo atraído de forma natural por las tecnologías modernas.

¡Bueno, hoy también toca Next, Nuxt y compañía!

Vuelvo al trabajo y, de otra forma, seguiré creando webs con movimiento. 🚀