Extras
useGltf
A Hook to load glTF files and use separate object nodes and materials of it.
Use the component
<GLTF> if you want to use a model in its entirety.
Model: Battle Damaged Sci-fi Helmet by theblueturtle_
Examples
Basic Example
gltf is a store which gets populated as soon as the model loaded.
<script lang="ts">
import { Object3DInstance, Mesh } from 'threlte'
import { useGltf } from 'threlte/extras'
import { MeshBasicMaterial } from 'three'
const { gltf } = useGltf('/path/to/model.glb')
</script>
<!-- Use an object node entirely -->
{#if $gltf}
<Object3DInstance object={$gltf.nodes['node-name']} />
{/if}
<!-- or only the geometry -->
{#if $gltf}
<Mesh geometry={$gltf.nodes['node-name'].geometry} material={new MeshBasicMaterial()} />
{/if}
DRACO decoding
Use a DRACO decoder for compressed glTF files, defaults to CDN loaded DRACO binaries.
<script lang="ts">
import { useGltf } from 'threlte/extras'
const { gltf } = useGltf('/path/to/model.glb', {
useDraco: true
})
</script>
{#if $gltf}
<Object3DInstance object={$gltf.nodes['node-name']} />
{/if}
You can also provide custom DRACO decoder binaries.
<script lang="ts">
import { useGltf } from 'threlte/extras'
const { gltf } = useGltf('/path/to/model.glb', {
useDraco: '/custom/draco/decoders/path'
})
</script>
{#if $gltf}
<Object3DInstance object={$gltf.nodes['node-name']} />
{/if}
Nodes and Materials
The hook provides a map of all objects and materials in the loaded glTF.
<script lang="ts">
import { useGltf } from 'threlte/extras'
const { gltf } = useGltf('/path/to/model.glb')
$: if ($gltf) console.log('Nodes', $gltf.nodes)
</script>
Provide types to use your IDEs autocompletion.
<script lang="ts">
import { useGltf } from 'threlte/extras'
const { gltf } = useGltf<'Object-A' | 'Object-B', 'Material-A' | 'Material-B'>(
'/path/to/model.glb'
)
$: if ($gltf) {
const objectA = $gltf.nodes['Object-A']
const materialA = $gltf.materials['Material-A']
}
</script>