Skip to content

Using GLTFModel

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


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

  <TresCanvas clear-color="#F78B3D">
    <TresPerspectiveCamera :position="[3, 2, 5]" />
    <OrbitControls />
      <GLTFModel path="" />
      :position="[3, 3, 3]"
    <TresAmbientLight :intensity="1" />

Model reference

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

<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)


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