Error: Could not load /models/testModel.glb: THREE.GLTFLoader: No DRACOLoader instance provided.)

Questions
1

Hi everyone! I’m trying to load a glb file testModel.glb in R3F like this:

const Machine = (props)=>{
  const result = useLoader(GLTFLoader, '/models/testModel.glb')
  return <primitive object={result.scene} />
}

But getting thise error

Unhandled Runtime Error

Error: Could not load /models/testModel.glb: THREE.GLTFLoader: No DRACOLoader instance provided.)

I dont know what DRACOLoader is so I tried something like this:

const Machine = (props:any)=>{
  const result = useLoader(DRACOLoader, '/models/testModel.glb')
  return <primitive object={result.scene} />
}

but got this error in return :

Unhandled Runtime Error

Error: Could not load /models/testModel.glb: fetch for "http://localhost:3000/draco_wasm_wrapper.js" responded with 404: Not Found)

What am I doing wrong here??

2

Draco loader will load .drc files not glb files, you need a GLTFLoader with an instance of draco loader attached to it as well as setting the wasm decoder path for the draco loader, something like this will work…

const gltfLoader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '../path/to/dracoDecoder/' );
gltfLoader.setDRACOLoader( dracoLoader );

I would have been sure r3f drei already handled draco compressed gltf/glb files in useGLTF but not entirely certain on this…

3

How can I use its instance with R3F :smiling_face_with_tear:

4

Try with useGLTF like this…

import { useGLTF } from '@react-three/drei'

This should already allow draco compressed models to be loaded without the effort of doing it yourself… Have a look here