Gltf / useGLTF

A convenience hook that uses useLoader and GLTFLoader, it defaults to CDN loaded draco binaries (https://www.gstatic.com/draco/v1/decoders/) which are only loaded for compressed models.

useGLTF(url)

useGLTF(url, '/draco-gltf')

useGLTF.preload(url)

If you want to use your own draco decoder globally, you can pass it through useGLTF.setDecoderPath(path):

Note

If you are using the CDN loaded draco binaries, you can get a small speedup in loading time by prefetching them.

You can accomplish this by adding two <link> tags to your <head> tag, as below. The version in those URLs must exactly match what useGLTF uses for this to work. If you're using create-react-app, public/index.html file contains the <head> tag.

<link
  rel="prefetch"
  crossorigin="anonymous"
  href="https://www.gstatic.com/draco/versioned/decoders/1.5.5/draco_wasm_wrapper.js"
/>
<link
  rel="prefetch"
  crossorigin="anonymous"
  href="https://www.gstatic.com/draco/versioned/decoders/1.5.5/draco_decoder.wasm"
/>

It is recommended that you check your browser's network tab to confirm that the correct URLs are being used, and that the files do get loaded from the prefetch cache on subsequent requests.

src/core/Gltf.tsx

Edit this page