GLTFModel

A component based on useGLTF to load models in TresJS scenes.

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

Usage

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

const path = './blender-cube.glb'
</script>

<template>
  <GLTFModel :path="path" />
</template>

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

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

Model reference

The component exposes the loaded GLTF as instance, so a template ref gets you the parsed model:

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

const modelRef = ref<InstanceType<typeof GLTFModel>>()

// `instance` is null until the file lands, so watch it rather than the ref
watch(() => modelRef.value?.instance, (gltf) => {
  gltf?.scene.position.set(0, 0, 0)
})
</script>

<template>
  <GLTFModel
    ref="modelRef"
    path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb"
  />
</template>

Props

Prop	Description	Default
`path`	Path to the model file. Required.	`undefined`
`draco`	Enable Draco compression for the model.	`false`
`decoderPath`	Path to a Draco decoder.	`'https://www.gstatic.com/draco/versioned/decoders/1.4.1/'`
`castShadow`	Apply `cast-shadow` to all meshes inside your model.	`false`
`receiveShadow`	Apply `receive-shadow` to all meshes inside your model.	`false`

path is not reactive: the component reads it once on setup. Use useGLTF with a ref path if you need to swap models at runtime.

When to reach for something else

GLTFModel renders the model's scene graph as-is, which means there is no element to hang a material swap, a click handler or a v-if on. When you need that, use useGLTF to compose the parts yourself, or let the TresJS CLI generate a typed component with a slot per node:

npx @tresjs/cli gltf public/models/robot.glb

The three ways to load a model, and when to reach for each one.

useGLTF

A composable to load GLTF models in TresJS scenes.

useFBX

A composable to load FBX models in TresJS scenes.