Tresjs/docs/es/examples/load-models.md

Importar y usar modelos

Todos los modelos usado en esta guía son de Alvaro Saburido

Los modelos 3D están disponible en cientos de formatos, cada uno con propósitos diferentes, características distintas, y complejidad variable.

En esta guía, vamos a enfocarnos en glTF (GL Transmission Format) modelos, que son el formato más común de modelos 3D en el web.

Hay algunas maneras para cargar modelos en TresJs:

usando useLoader

Para cargar el recurso, el useLoader composable te permite pasar cualquier tipo de Loader de Three.js y una URL. Devuelve una Promise con el recurso cargado.

Para una explanación detallada de como usar useLoader, ve la documentación de useLoader.

import { useLoader } from '@tresjs/core'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'

const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')

Entonces, puedes pasar la escena de modelo a un componente primitive:

<TresCanvas>
  <Suspense>
    <primitive :object="scene" />
  </Suspense>
</TresCanvas>

El componente <primitive /> es parte del núcleo en Tresjs. Cuando usas <primitive>, es transformado usando una llamada createElement que crea una instancia de Threejs, basado en la propiedad proporcionada en "object"

Nota que en el ejemplo anterior que usamos el componente Suspense para 'envolver' el componente TresCanvas. Eso es por que el useLoader devuelve una Promise y necesitamos esperarlo a que se resuelva antes de renderizar la escena.

Usando useGLTF

Una manera más conveniente de cargar modelos es usando el useGLTF composable disponible de @tresjs/cientos.

import { useGLTF } from '@tresjs/cientos'

const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')

Una ventaja de usar useGLTFes que puedes pasar un draco prop para habilitar Draco compression por el modelo. Eso reducirá el tamaño del modelo y mejorar el rendimiento.

import { useGLTF } from '@tresjs/cientos'

const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })

Alternativamente puedes fácilmente seleccionas los objetos dentro de tu modelo usando la propiedad nodes

<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'

const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
</script>
<template>
  <TresCanvas clear-color="#82DBC5" shadows alpha>
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
    <Suspense>
      <primitive :object="nodes.MyModel" />
    </Suspense>
  </TresCanvas>
</template>

Usando GLTFModel

El componente GLTFModel es un 'wrapper' alrededor de useGLTF que es disponible del paquete @tresjs/cientos.

<script setup lang="ts">
import { OrbitControls, GLTFModel } from '@tresjs/cientos'
</script>
<template>
  <TresCanvas clear-color="#82DBC5" shadows alpha>
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
    <Suspense>
      <GLTFModel path="/models/AkuAku.gltf" draco />
    </Suspense>
    <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
  </TresCanvas>
</template>

Esta estrategia en particular es más directo pero te da menos control sobre el modelo.

## useFBX

El composable useFBX esta disponible del paquete @tresjs/cientos.

import { useFBX } from '@tresjs/cientos'

const model = await useFBX('/models/AkuAku.fbx')

Entonces, es tan fácil como añadir el modelo a tu escena:

<TresCanvas shadows alpha>
  <Suspense>
    <primitive :object="model.scene" />
  </Suspense>
</TresCanvas>

FBXModel

El componente FBXModel es un 'wrapper' alrededor de useFBX que esta disponible del paquete @tresjs/cientos. Tiene un uso similar al GLTFModel:

<script setup lang="ts">
import { OrbitControls, FBXModel } from '@tresjs/cientos'
</script>
<template>
  <TresCanvas clear-color="#82DBC5" shadows alpha>
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
      <Suspense>
        <FBXModel path="/models/AkuAku.fbx" />
      </Suspense>
      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
  </TresCanvas>
</template>