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??
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…