gltf-model.md 1.9 KB

Utilizar GLTFModel

El componente GLTFModel es un wrapper sobre useGLTF composable y acepta las mismas opciones de props.

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

Modelo de referencia

Puedes acceder a l modelo de referencia por pasar un ref al model prop y pues usar el metodo getModel() para conseguir el objeto.

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

const modelRef = shallowRef<THREE.Object3D>()

watch(modelRef, ({getModel}) => {
  const model = getModel()

  model.traverse((child) => {
    if (child.isMesh) {
      child.castShadow = true
      child.receiveShadow = true
    }
  })
})
</script>

Props

Prop Descripción Defecto
path Camino de archivo del modelo. undefined
draco Habilitar Draco compression del modelo. false
decoderPath Camino a decodificador local de Draco decoder. undefined