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

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 type { TresObject } from 'tresjs'
import { GLTFModel } from '@tresjs/cientos'

const modelRef = shallowRef<TresObject>()

watch(modelRef, (model) => {
  // Do something with the model
  model.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.	`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`

useGLTF

A composable to load GLTF models in TresJS scenes.

useFBX

A composable to load FBX models in TresJS scenes.