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}

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>