Skip to content

Using GLTFModel

The GLTFModel component is a wrapper around useGLTF composable and accepts the same options as props.

Usage

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

<template>
  <TresCanvas clear-color="#F78B3D">
    <TresPerspectiveCamera :position="[3, 2, 5]" />
    <OrbitControls />
    <Suspense>
      <GLTFModel path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb" />
    </Suspense>
    <TresDirectionalLight
      :intensity="2"
      :position="[3, 3, 3]"
    />
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>

Model reference

You can access the model reference by passing a ref to the model prop and then using to get the object.

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

const modelRef = shallowRef<THREE.Object3D>()

watch(modelRef, (model) => {
  // Do something with the model
  model.position.set(0, 0, 0)
})
</script>

Props

PropDescriptionDefault
pathPath to the model file.undefined
dracoEnable Draco compression for the model.false
decoderPathPath to a local Draco decoder.undefined
castShadowApply cast-shadow to all meshes inside your model.false
receiveShadowApply receive-shadow to all meshes inside your model.false