@threlte/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/core'
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}
Meshopt decoding
Use a meshopt decoder for compressed glTF files, defaults to Three's included decoder.
<script lang="ts">
import { useGltf } from '@threlte/extras'
const { gltf } = useGltf('/path/to/model.glb', {
useMeshopt: true
})
</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')
$: nodes: $gltf?.nodes
$: materials: $gltf?.materials
</script>
Provide types to use your IDEs autocompletion. Use gltfjsx to extract types from glTF files.
<script lang="ts">
import { useGltf } from '@threlte/extras'
const { gltf } = useGltf<{
nodes: {
MeshA: THREE.Mesh
MeshB: THREE.Mesh
Object3DA: THREE.Object3D
}
materials: {
MaterialA: THREE.MeshStandardMaterial
MaterialB: THREE.MeshBasicMaterial
}
}>('/path/to/model.glb')
$: if ($gltf) {
const objectA = $gltf.nodes['MeshA'] // -> THREE.Mesh
const materialA = $gltf.materials['MaterialA'] // -> THREE.MeshStandardMaterial
}
</script>