@threlte/extras
<GLTF>
webgl <GLTF> works with WebGL and is available from the @threlte/extras export. webgpu <GLTF> works with WebGPU and is available from the @threlte/extras/webgpu export.<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
enableZoom={false}
/>
</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
position={{ y: 1 }}
scale={3}
url="/models/helmet/DamagedHelmet.gltf"
onclick={() => {
console.log('User clicked!')
}}
/>Compression
The <GLTF> component supports compressed glTF files.
DRACO
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/.
KTX 2
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
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}
/>