Hasta ahora, solo hemos utilizado formas primitivas para crear nuestras escenas 3D (cubo, esfera, plano, etc...).

Pero lo que hace que los gráficos 3D sean tan interesantes es la capacidad de importar y mostrar modelos 3D creados con software de modelado 3D como Blender, Maya, Cinema 4D, Nomad Sculpt, etc...

Introducción

No haremos modelado 3D en este curso ya que es un tema completo por sí solo. No es una habilidad obligatoria para crear experiencias 3D con threejs y React Three Fiber. Puedes encontrar muchos modelos 3D gratuitos en línea y usarlos en tus proyectos. Pero aprender los fundamentos del modelado 3D puede ser muy útil para entender mejor cómo se hacen los modelos 3D y cómo usarlos en tus proyectos.

Si sigues este camino, te recomiendo usar Blender, que es un software de modelado 3D gratuito y de código abierto. Es una herramienta muy potente y hay muchos tutoriales disponibles en línea para aprender a usarlo.

El más famoso para comenzar es el Donut Tutorial from Blender Guru.

Modelos 3D

Los modelos 3D son archivos que contienen datos sobre la geometría del modelo 3D. También pueden contener texturas y animaciones.

Hay muchos formatos de archivo diferentes para modelos 3D. Los más comunes son:

• .obj: Un formato de archivo simple que solo contiene la geometría del modelo 3D.
• .fbx: Un formato de archivo binario que contiene la geometría, las texturas y las animaciones del modelo 3D. Es el formato utilizado por Unity y Unreal Engine.
• .gltf: Un formato de archivo JSON que contiene la geometría, las texturas y las animaciones del modelo 3D. Es el formato recomendado para la web ya que es un formato muy compacto.
• .glb: La versión binaria del formato .gltf. Es un formato más compacto, típicamente un 33% más pequeño que el formato .gltf.

En este curso, utilizaremos los formatos .gltf y .glb.

Es fácil convertir un modelo 3D de un formato a otro usando Blender.

Encontrando modelos 3D

Aquí hay algunos sitios web donde puedes encontrar modelos 3D gratuitos:

• Poly Pizza: Una colección de modelos 3D low-poly libres de regalías.
• Pmndrs Market: Otra colección de assets 3D libres de regalías (¡Sí, de los creadores de React Three Fiber!).
• Sketchfab: Una plataforma para compartir y descargar modelos 3D. ¡Muchos modelos gratuitos disponibles!
• Unity Asset Store: Originalmente para Unity, pero puedes encontrar muchos paquetes de modelos 3D que puedes usar en tus proyectos.
• Quaternius: Un artista 3D que comparte paquetes de modelos 3D gratuitos en su sitio web.
• Kenney: Otro creador increíble que comparte muchos paquetes de modelos 3D de alta calidad y gratis.

En todos los casos, asegúrate de revisar la licencia de los modelos 3D que quieres usar. Algunos de ellos son gratuitos para uso personal solamente, otros son gratuitos para uso comercial, y algunos no son gratuitos en absoluto. Algunos también tienen licencias personalizadas para evitar que los modelos 3D se utilicen en un contexto específico como los NFTs.

Ahora que tenemos nuestros modelos 3D, veamos cómo cargarlos en nuestros proyectos.

Estructura del proyecto

La carpeta public es la carpeta raíz de nuestro proyecto. Es donde ponemos todos los assets estáticos de nuestro proyecto (imágenes, modelos 3D, archivos de audio, etc...).

Para mantener nuestro proyecto organizado, crearemos una carpeta models en la carpeta public para almacenar todos nuestros modelos 3D.

El paquete inicial ya contiene una carpeta models con algunos modelos 3D en ella. Provienen de Quaternius.

useLoader

El componente base para cargar cualquier recurso externo en React Three Fiber es el hook useLoader. Es un hook que toma un loader como primer argumento y un url como segundo argumento. Devuelve el recurso cargado.

El loader es una clase que extiende la clase Loader de threejs. Hay muchos loaders disponibles en threejs para cargar diferentes tipos de recursos. Por ejemplo, GLTFLoader se utiliza para cargar archivos .gltf y .glb.

Vamos a cargar nuestro primer modelo 3D:

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

export const Experience = () => {
  const model = useLoader(GLTFLoader, "models/Fish.gltf");

  return (
    <>
      <primitive object={model.scene} />
    </>
  );
};

El componente primitive se utiliza para mostrar un objeto threejs en nuestra escena. Toma una prop object que es el objeto threejs que queremos mostrar.

Nuestro modelo 3D está ahora cargado y mostrado en nuestra escena. (Se ve bien, ¿verdad?)

useLoader se encarga de almacenar en caché el recurso cargado. Así que si cargamos el mismo recurso varias veces, solo se cargará una vez.

useGLTF / useFBX

La biblioteca Drei proporciona dos hooks para cargar modelos 3D: useGLTF y useFBX. Estos son envoltorios alrededor del hook useLoader que son más fáciles de usar.

Vamos a actualizar nuestro código existente para usar el hook useGLTF: