@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>
<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
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"
onclick={() => {
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.