1. @threlte/extras
  2. useGltf

@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_

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


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>