Using GLTFModel

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

Usage

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

<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

Prop	Description	Default
path	Path to the model file.	undefined
draco	Enable Draco compression for the model.	false
decoderPath	Path to a local Draco decoder.	undefined
castShadow	Apply cast-shadow to all meshes inside your model.	false
receiveShadow	Apply receive-shadow to all meshes inside your model.	false