Los días en que me atreví con la expresión 3D que siempre deseé (WebGL) — Una historia de jugar con Three.js y Blender

Hace tiempo, solía observar todo tipo de sitios web y quedaba maravillado por los objetos que giraban en el primer vistazo o las animaciones con profundidad. En aquella época pensé: "¡Quiero intentar crear algo así yo también!" y me lancé a experimentar con Three.js y Blender.

Ingresé a Liberogic con esa ilusión, pero para ser honesto… últimamente me dedico a implementaciones más prácticas como aplicaciones empresariales y construcción de headless CMS (¡risas!). No me malentiendas, no es una crítica.

Ahora que estoy en mi cuarto año, quisiera reflexionar sobre los fundamentos de WebGL mientras recuerdo ese deseo de la época por la "web dinámica".

¿Qué es WebGL?

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

Hace mucho tiempo, los plugins como Flash Player eran la norma, pero tenían el problema de no funcionar bien en dispositivos móviles.

Por el contrario, WebGL tiene soporte nativo y puede considerarse como la tecnología que abrió el camino para la expresión 3D en la era móvil.

Lo intentamos en la práctica

Mostrar 3D en el navegador con Three.js

Three.js es una librería que permite crear contenido 3D de manera fácil utilizando JavaScript, y su uso comercial está permitido.

En primer lugar, como concepto de WebGL, se necesitan un Renderer, una Scene y una Camera.

Renderer es el objeto principal de Three.js. Cuando pasas Scene y Camera, la parte de la Scene 3D dentro del frustum de la cámara se renderiza (dibuja) en el canvas como una imagen 2D mediante Renderer.

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);

Y la parte del cubo 3D se crea utilizando un objeto de visualización llamado mesh. Para crear un mesh, es necesario preparar una geometría (forma) y un material (textura).

//ジオメトリ（立方体）
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.

Nos saltamos los detalles de la implementación de partículas a su alrededor esta vez.

function animate() {
  requestAnimationFrame(animate);

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

animate()

Cuando renderizas la scene que contiene la camera, geometría, material y luz que configuraste, se dibuja en el navegador.

Crear modelado 3D con Blender

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

Blender, al igual que Three.js, crea formas mediante objetos de malla, aplica material para añadir color y textura, ajusta la iluminación para controlar cómo cae la luz y la sombra, y luego ajusta la posición y dirección de la cámara para renderizar.

Es posible crear texturas realistas combinando nodos para hacer degradados, efectos metálicos, emisión de luz y más.

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

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

Se exporta el modelo 3D creado en Blender a un archivo .glb e se integra en Three.js.

Se importan las funciones OrbitControls, GLTFLoader y DRACOLoader de la librería Three.js.

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

¡Mostré una manzana modelada en el navegador!

Sin embargo, cuando mostré el modelo creado en Blender en el navegador con Three.js, las diferencias en el entorno de renderizado y la compatibilidad de materiales hacen que los colores y texturas se vean diferentes de lo esperado. Se necesita un poco de ajuste para lograr la apariencia deseada.

En los proyectos diarios, me dedico principalmente a la integración con CMS y al diseño/desarrollo de frontend para aplicaciones empresariales, así que he tenido menos oportunidad de trabajar con expresiones 3D.

Pero cuando juego de esta manera, recuerdo: "Vaya, esto sigue siendo divertido".

Quizás fue mi admiración de esos días por la Web en movimiento lo que me atrajo naturalmente hacia las tecnologías modernas.

¡Bueno, hoy es Next y Nuxt de nuevo!

Vuelvo al campo de trabajo para crear Web en movimiento de otra manera. 🚀