Guía de Three.js y TypeScript: Gráficos 3D y Juegos Web

Puntos Clave / Resumen Ejecutivo:

• Integración Robusta: Combina el renderizado WebGL de Three.js con el tipado estático de TypeScript para prevenir errores en tiempo de ejecución.
• Arquitectura Escindible: Estructura escenas, cámaras, luces y bucles de renderizado en patrones orientados a objetos escalables.
• Optimización y Rendimiento: Maximiza los cuadros por segundo (FPS) minimizando draw calls y gestionando la recolección de basura mediante la liberación explícita de geometrías y materiales.

Introducción a Three.js y TypeScript en el Frontend Moderno

El desarrollo de gráficos 3D en la web ha evolucionado drásticamente gracias a WebGL y el soporte de renderizado acelerado por GPU. Three.js abstrae la complejidad de la API nativa de WebGL, permitiendo a los desarrolladores crear experiencias inmersivas con relativa simplicidad.

Al integrar TypeScript, aportamos autocompletado avanzado, seguridad de tipos e interfaces claras para manipular objetos tridimensionales complejos. Esta combinación es la base para desarrollar desde simuladores interactivos hasta videojuegos web de alto rendimiento.

Configuración del Entorno de Desarrollo

Para iniciar un proyecto profesional optimizado, utilizaremos Vite como empaquetador rápido junto con TypeScript y Three.js.

npm create vite@latest threejs-game -- --template vanilla-ts
cd threejs-game
npm install three
npm install -D @types/three typescript vite

Esta estructura nos permite aprovechar la recarga en tiempo real (Hot Module Replacement) y un tipado estático estricto mediante la declaración de tipos de @types/three.

Arquitectura de la Aplicación 3D

Un patrón recomendado en arquitectura frontend es encapsular el motor gráfico dentro de una clase modular. Esto evita contaminar el ámbito global y facilita la limpieza de recursos.

import * as THREE from 'three';

export class Engine3D {
  private scene: THREE.Scene;
  private camera: THREE.PerspectiveCamera;
  private renderer: THREE.WebGLRenderer;
  private cube: THREE.Mesh;

  constructor(container: HTMLElement) {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    container.appendChild(this.renderer.domElement);

    // Crear objeto 3D
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);

    this.camera.position.z = 5;
    this.initEvents();
    this.animate();
  }

  private animate = (): void => {
    requestAnimationFrame(this.animate);
    this.cube.rotation.x += 0.01;
    this.cube.rotation.y += 0.01;
    this.renderer.render(this.scene, this.camera);
  };

  private initEvents(): void {
    window.addEventListener('resize', this.onWindowResize);
  }

  private void => {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
  };
}

Estrategias de Optimización y Rendimiento WebGL

El renderizado 3D puede afectar severamente la métrica Interaction to Next Paint (INP) si el hilo principal del navegador se satura. Para mantener 60 FPS estables, implementa las siguientes directrices:

1. Gestión Activa de Memoria

Three.js no libera automáticamente la memoria asignada en la GPU cuando elimina objetos de la escena. Debes ejecutar de forma explícita la limpieza de recursos:

public destroy(): void {
  window.removeEventListener('resize', this.onWindowResize);
  this.scene.traverse((object) => {
    if (object instanceof THREE.Mesh) {
      object.geometry.dispose();
      if (Array.isArray(object.material)) {
        object.material.forEach((mat) => mat.dispose());
      } else {
        object.material.dispose();
      }
    }
  });
  this.renderer.dispose();
}

2. Reutilización de Instancias (InstancedMesh)

Si necesitas renderizar cientos o miles de objetos idénticos en tu videojuego, utiliza THREE.InstancedMesh para reducir las llamadas de renderizado (draw calls) a una sola operación de GPU.

Referencias y Documentación

• Documentación Oficial de Three.js: Guía de referencia completa para la API de renderizado, luces, materiales y cargadores 3D.
• Documentación de TypeScript: Recursos sobre la configuración de tipos strictly e interfaces en proyectos de JavaScript moderno.
• MDN WebGL API: Especificación técnica de Mozilla sobre los fundamentos gráficos subyacentes en el navegador.
• Web.dev Core Web Vitals: Guía de Google sobre cómo medir y optimizar las métricas de rendimiento y la interacción del usuario en sitios web ricos en gráficos.