Can't Load GLB model as draco_decoder.wasm and draco_wasm_wrapper.js not found

Questions
1

Hi all, trying to load a GLB model using the follow code:

`  const { OrbitControls } = require("three/examples/jsm/controls/OrbitControls"); // eslint-disable-line global-require
    const { GLTFLoader } = require("three/examples/jsm/loaders/GLTFLoader"); // eslint-disable-line global-require
    const { DRACOLoader } = require("three/examples/jsm/loaders/DRACOLoader"); // eslint-disable-line global-require

const gltfLoader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/examples/js/libs/draco/' );
gltfLoader.setDRACOLoader( dracoLoader );

const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x222222 );

{
  gltfLoader.load('skull.glb', gltf => {
    const root = gltf.scene;
    scene.add(root);
  });
}

`
The model doesn’t load and I’m getting hit with the following errors:

http://localhost:3000/three/examples/js/libs/draco/gltf/draco_decoder.wasm 404 (Not Found)
http://localhost:3000/three/examples/js/libs/draco/gltf/draco_wasm_wrapper.js 404 (Not Found)

I’m using Next.js and have tried to change the decoder path to ‘/draco/gltf/’ and ‘three/examples/js/libs/draco/gltf/’ with no success

I have tried the code with other models and it works correctly. I have also tried the model itself on gltf three.js viewers and it also works.

Would love your help to fix this bug!

2

You may need to share the build tool configuration you’re using here as well — some, like Parcel, will require more setup to load static files (see parcel-plugin-static-files-copy - npm).