Skip to main content

🎨 Cargar un Modelo en Three.js con React Three Fiber

🛠️ useLoader y GLTFLoader​

Para cargar un modelo GLTF en React Three Fiber usamos el hook useLoader junto con GLTFLoader de Three.js.

📌 Ejemplo básico:​

import { Canvas, useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

function Model() {
  const model = useLoader(GLTFLoader, "/path/to/model.glb");

  return <primitive object={model.scene} scale={1} />;
}

export default function App() {
  return (
    <Canvas>
      <ambientLight />
      <Model />
    </Canvas>
  );
}

🔹 primitive object={model.scene} permite renderizar el modelo en la escena.

🚀 Optimización con Draco​

Draco es una tecnología de compresión de Google que reduce el tamaño de los archivos GLTF.

📌 Ejemplo con DRACOLoader​

import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

function Model() {
  const model = useLoader(GLTFLoader, "/path/to/model.glb", (loader) => {
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("/path/to/draco/");
    loader.setDRACOLoader(dracoLoader);
  });

  return <primitive object={model.scene} scale={1} />;
}

🔹 setDecoderPath() define la ruta de los archivos de decodificación Draco.

⏳ Lazy Load con Suspense​

Para evitar cargar el modelo inmediatamente, usamos React Suspense, lo que retrasa la carga hasta que el modelo esté listo.

📌 Ejemplo con Suspense y fallback​

import { Canvas } from "@react-three/fiber";
import { Suspense } from "react";

function Model() {
  const model = useLoader(GLTFLoader, "/path/to/model.glb");
  return <primitive object={model.scene} scale={1} />;
}

export default function App() {
  return (
    <Canvas>
      <ambientLight />
      <Suspense fallback={<mesh><boxGeometry /><meshStandardMaterial color="gray" /></mesh>}>
        <Model />
      </Suspense>
    </Canvas>
  );
}

🔹 fallback muestra un elemento mientras el modelo carga.

🏎️ useGLTF de Drei​

Drei ofrece useGLTF, un loader más optimizado que automáticamente carga Draco si es necesario.

📌 Ejemplo con useGLTF​

import { useGLTF } from "@react-three/drei";

function Model() {
  const { scene } = useGLTF("/path/to/model.glb");
  return <primitive object={scene} />;
}

🔹 useGLTF.preload("/path/to/model.glb") se usa al final del componente para precargar el modelo.

🏗️ Cargar Modelos como Componentes​

Podemos encapsular la carga de un modelo en un componente reutilizable.

📌 Ejemplo: Crear un componente GltfModel​

import { useGLTF } from "@react-three/drei";

export default function GltfModel({ path, scale = 1, position = [0, 0, 0] }) {
  const { scene } = useGLTF(path);
  return <primitive object={scene} scale={scale} position={position} />;
}

📌 Uso del componente en la escena​

import { Canvas } from "@react-three/fiber";
import { Suspense } from "react";
import GltfModel from "./GltfModel";

export default function App() {
  return (
    <Canvas>
      <ambientLight />
      <Suspense fallback={<mesh><boxGeometry /><meshStandardMaterial color="gray" /></mesh>}>
        <GltfModel path="/model.glb" scale={1.5} position={[0, -1, 0]} />
      </Suspense>
    </Canvas>
  );
}

🔹 GltfModel encapsula la lógica de carga y renderizado. 🔹 Reutilizable para cualquier modelo GLTF. 🚀

🎨 Uso de useGLTF de Drei​

📌 Descripción​

useGLTF de Drei simplifica la carga de modelos, integrando optimizaciones automáticas.

📌 Ejemplo​

import { useGLTF } from "@react-three/drei";

function Model() {
  const { scene } = useGLTF("/model.glb");
  return <primitive object={scene} />;
}

📌 Recomendación: Usa useGLTF.preload("/model.glb") para precargar modelos y mejorar el rendimiento.

🏗️ Cargar Modelos como Componentes​

📌 Descripción​

Encapsular modelos en un componente reutilizable mejora la modularidad del código.

📌 Ejemplo​

import { useGLTF } from "@react-three/drei";

export default function GltfModel({ path, scale = 1, position = [0, 0, 0] }) {
  const { scene } = useGLTF(path);
  return <primitive object={scene} scale={scale} position={position} />;
}

📌 Uso del Componente​

import { Canvas } from "@react-three/fiber";
import { Suspense } from "react";
import GltfModel from "./GltfModel";

export default function App() {
  return (
    <Canvas>
      <ambientLight />
      <Suspense fallback={<mesh><boxGeometry /><meshStandardMaterial color="gray" /></mesh>}>
        <GltfModel path="/model.glb" scale={1.5} position={[0, -1, 0]} />
      </Suspense>
    </Canvas>
  );
}

✅ GltfModel encapsula la lógica de carga y renderizado, haciéndolo reutilizable. 🚀

📦 Uso de gltfjsx para Conversión Automática​

📌 Descripción​

gltfjsx convierte modelos GLTF en componentes JSX reutilizables, optimizando su estructura y rendimiento.

📌 Ejemplo de Conversión​

npx gltfjsx model.glb --transform

Esto generará un archivo Model.jsx optimizado.

📌 Ejemplo de Componente Generado​

import { useGLTF } from "@react-three/drei";

export function Model(props) {
  const { nodes, materials } = useGLTF("/model-transformed.glb");
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes.robot.geometry} material={materials.metal} />
      <mesh geometry={nodes.rocket.geometry} material={materials.wood} />
    </group>
  );
}

useGLTF.preload("/model.glb");

📌 Recomendaciones​

  • Usar --transform para generar versiones optimizadas de los modelos.
  • Precargar los modelos con useGLTF.preload para mejorar el tiempo de carga.
  • Modificar el material dinámicamente: 
    <mesh geometry={nodes.robot.geometry} material={materials.metal} material-color="green" />

✅ gltfjsx facilita la integración y optimización de modelos en React Three Fiber. 🚀