<GLTF>
<GLTF /> loads a single model from a url. The url property is reactive and will load new 3D content if changed. The new content will be swapped as soon as loading is finished.
Asset loading can sometimes produce surprising results. We’ve detailed common issues you may run into on our loading assets page.
<script lang="ts"> import { Canvas } from '@threlte/core' import Scene from './Scene.svelte'</script>
<div> <Canvas> <Scene /> </Canvas></div>
<style> div { height: 100%; }</style><script lang="ts"> import { T } from '@threlte/core' import { Environment, GLTF, OrbitControls } from '@threlte/extras'</script>
<Environment url="/textures/equirectangular/hdr/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
Section titled “Interaction”The <GLTF> component supports interaction events with the use of interactivity plugin.
<script> import { interactivity } from '@threlte/extras' interactivity()</script>
<GLTF position={{ y: 1 }} scale={3} url="/models/helmet/DamagedHelmet.gltf" onclick={() => { console.log('User clicked!') }}/>Compression
Section titled “Compression”The <GLTF> component supports compressed glTF files.
To use DRACO compression, import the useDraco hook or provide an instance of a DRACOLoader.
<script> import { GLTF, useDraco } from '@threlte/extras'
const dracoLoader = useDraco() // Creates a cached instance of DracoLoader</script>
<GLTF url="/models/helmet/DamagedHelmet.gltf" {dracoLoader}/>The useDraco hook will load a default DRACO decoder from Google servers, specifically https://www.gstatic.com/draco/v1/decoders/.
To use KTX2 compressed textures, import the useKtx2 hook or provide an instance of a KTX2Loader.
<script> import { useKtx2 } from '@threlte/extras'
const ktx2Loader = useKtx2('path/to/transcoder') // Creates a cached instance of KTX2Loader</script>
<GLTF url="/models/helmet/DamagedHelmet.gltf" {ktx2Loader}/>Meshopt
Section titled “Meshopt”To use meshopt compression, import the useMeshopt hook or provide an instance of a MeshoptDecoder.
The useMeshopt hook will load a default meshopt decoder from Three, specifically https://github.com/mrdoob/three.js/blob/dev/examples/jsm/libs/meshopt_decoder.module.js.
<script> import { GLTF, useMeshopt } from '@threlte/extras'
const meshoptDecoder = useMeshopt() // Creates a cached instance of MeshoptDecoder</script>
<GLTF url="/models/helmet/DamagedHelmet.gltf" {meshoptDecoder}/>