Cargar Modelos

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

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

Para esta guía, nos vamos a centrar en cargar modelos gLTF (GL Transmission Format), que son el formato más común para modelos 3D en la web.

Hay varias formas de cargar modelos en TresJS:

WARNING

Por favor, ten en cuenta que en los ejemplos anteriores utilizamos el await de nivel superior, asegúrate de envolverlo con un componente Suspense. Consulta Suspense para obtener más información.

Usando useLoader

El composable useLoader te permite pasar cualquier tipo de cargador de three.js y una URL para cargar el recurso. Devuelve una Promise con el recurso cargado.

Para obtener una explicación detallada de cómo usar useLoader, consulta 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')

Luego puedes pasar la escena del modelo a un componente primitive de TresJS para renderizarlo:

<primitive :object="scene" />

El componente <primitive /> no es un componente independiente en el código fuente de Tres. En su lugar, es parte de la funcionalidad principal de Tres. Cuando usas <primitive>, se traduce a una llamada a createElement, que crea el objeto three.js adecuado según la propiedad "object" proporcionada.

Observa en el ejemplo anterior que estamos utilizando el componente Suspense para envolver el componente TresCanvas. Esto se debe a que useLoader devuelve una Promise y necesitamos esperar a que se resuelva antes de renderizar la escena.

Usando useGLTF

Una forma más conveniente de cargar modelos es utilizando el composable useGLTF disponible en el paquete @tresjs/cientos.

import { useGLTF } from '@tresjs/cientos'

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

Una ventaja de usar useGLTF es que puedes pasar una propiedad draco para habilitar la compresión Draco para el modelo. Esto 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 seleccionar fácilmente objetos dentro del modelo utilizando la propiedad nodes.

App.vue

<script setup lang="ts">
import Model from './Model.vue'
</script>

<template>
  <TresCanvas
    clear-color="#82DBC5"
    shadows
    alpha
  >
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
    <Suspense>
      <Model />
    </Suspense>
  </TresCanvas>
</template>

Model.vue

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

const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
</script>

<template>
  <primitive :object="node.AkuAku" />
</template>

Usando GLTFModel

El componente GLTFModel es un envoltorio alrededor de useGLTF que está disponible en el 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>

Este enfoque en particular es más sencillo pero te brinda menos control sobre el modelo.

useFBX

El composable useFBX está disponible en el paquete @tresjs/cientos.

import { useFBX } from '@tresjs/cientos'

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

Entonces, es tan sencillo como agregar la escena a tu escena:

<primitive :object="model" />

FBXModel

El componente FBXModel es un envoltorio alrededor de useFBX que está disponible en el paquete @tresjs/cientos. Su uso es similar al de 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>