useGLTF

A composable that allows you to easily load glTF models into your TresJS scene.

Usage

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

const path = 'https://raw.githubusercontent.com/'
+ 'Tresjs/assets/main/models/gltf/blender-cube.glb'
const { scene } = await useGLTF(path)
</script>

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

An advantage of using useGLTFis that you can pass a draco prop to enable Draco compression for the model. This will reduce the size of the model and improve performance.

import { useGLTF } from '@tresjs/cientos'

const { scene } = await useGLTF('/models/AkuAku.gltf', { draco: true })

Options

Name	Type	Default	Description
draco	boolean	false	Whether to enable Draco compression.
decoderPath	string	undefined	Local path to the Draco decoder.