gltf.mdx

order	category	name	sourcePath	type	componentSignature
2.1	@threlte/extras	<GLTF>	packages/extras/src/lib/components/GLTF/GLTF.svelte	component	extends props events bindings type url Group https://threejs.org/docs/index.html#api/en/objects/Group name type required url string true name type required useDraco string | boolean false name type required useMeshopt boolean false name type required ktxTranscoderPath string false name payload load GLTF & { materials: Record<string, THREE.Material>, nodes: Record<string, THREE.Object3D> } name payload unload void name payload error string name type gltf GLTF & { materials: Record<string, THREE.Material>, nodes: Record<string, THREE.Object3D> } name type scene THREE.Group name type animations THREE.AnimationClip[] name type asset GLTF['asset'] name type cameras THREE.Camera[] name type scenes THREE.Group[] name type userData any name type parser GLTFParser name type materials Record<string, THREE.Material> name type nodes Record<string, THREE.Object3D>

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`](/docs/reference/extras/use-gltf-animations) on how to use animations of glTF Files. Model: Battle Damaged Sci-fi Helmet by [theblueturtle\_](https://sketchfab.com/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.