threlte logo
@threlte/extras

<GLTF>

To use DRACO compression, provide a path to the DRACO decoder. To use KTX2 compressed textures, provide a path to the KTX2 transcoder.

Change the property url to load new 3D content. The new content will be swapped as soon as loading is finished.

Use the hook useGltf to reuse a glTF model or to use parts of it.

See the hook useGltfAnimations on how to use animations of glTF Files.

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

<Canvas>
  <Scene />
</Canvas>
<script lang="ts">
  import { T } from '@threlte/core'
  import { Environment, GLTF, OrbitControls } from '@threlte/extras'
</script>

<Environment
  path="/hdr/"
  files="shanghai_riverside_1k.hdr"
/>

<T.PerspectiveCamera
  makeDefault
  position={[5, 2, 5]}
  fov={25}
>
  <OrbitControls
    autoRotate
    enableDamping
  />
</T.PerspectiveCamera>

<T.AmbientLight />

<GLTF url="/models/helmet/DamagedHelmet.gltf" />

Model: Battle Damaged Sci-fi Helmet by theblueturtle_

Interaction

The <GLTF> component supports interaction events with the use of interactivity plugin.

<script>
  import { interactivity } from '@threlte/extras'
  interactivity()
</script>

<GLTF
  url="/models/helmet/DamagedHelmet.gltf"
  interactive
  on:click={() => {
    console.log('User clicked!')
  }}
/>

Example

<script>
  import { GLTF } from '@threlte/extras'
</script>

<GLTF
  castShadow
  receiveShadow
  url={'/models/flower.glb'}
  position={{ y: 1 }}
  scale={3}
/>

Compression

The <GLTF> component supports compressed glTF files.

DRACO

You can set useDraco to true to use DRACO compression and Threlte will load a default DRACO decoder from Google servers, specifically https://www.gstatic.com/draco/v1/decoders/.

Or you can set useDraco to your own DRACO decoder path as a string.

Meshopt

You can set useMeshopt to true to use meshopt compression and Threlte will load a default meshopt decoder from Three, specifically https://github.com/mrdoob/three.js/blob/dev/examples/jsm/libs/meshopt_decoder.module.js.

Component Signature

<GLTF> extends <T.Group> and supports all its props, slot props, bindings and events.

Props

name
type
required

url
string
yes

ktxTranscoderPath
string
no

useDraco
string | boolean
no

useMeshopt
boolean
no

Events

name
payload

load
GLTF & { materials: Record<string, THREE.Material>, nodes: Record<string, THREE.Object3D> }

unload
void

error
string

Bindings

name
type

gltf
GLTF & { materials: Record<string, THREE.Material>, nodes: Record<string, THREE.Object3D> }

scene
THREE.Group

animations
THREE.AnimationClip[]

asset
GLTF['asset']

cameras
THREE.Camera[]

scenes
THREE.Group[]

userData
any

parser
GLTFParser

materials
Record<string, THREE.Material>

nodes
Record<string, THREE.Object3D>