GLTFLoader with an instance of DRACOLoader is giving error

dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/src/gltf/' ); //copied all the decoders into local src folder
modelsLoader.setDRACOLoader( dracoLoader );
modelsLoader.load(`./assets/fullmodel_COMP.glb`, (glb) => {
    man.add(glb.scene);
    scene.add(man);
    man.position.set(0, 0,  0);
    man.scale.set(1, 1, 1);
})#

I have created this model and exported from blender with compression.
It works fine in http://gltf-viewer.donmccurdy.com/ @donmccurdy but it doesn’t render with this code and generated error as:


Please help

Can anyone help please?

Please ensure with the browser’s dev tools that you actually load a glb file from the backend. Similar errors were reported in the past and it turned out that the backend served HTML content.

I guess it is loading. All good here but the error remains the same.

Can you please click on this entry? The preview should look like so:

Can you please share your entire app as a GitHub repository? Or is it possible for you to reproduce the issue with a live example (https://jsfiddle.net/f2Lommf5/)?

github repo link

Okay, the problem is that your project is not able to correctly fetch the DRACO files from the backend. Since you are using parcel, it does not return a 404 error but a HTML page.

So this is a hosting issue. Sorry, I’m not familiar with Parcel and can’t help you further.

Ohh okay I will update here If any solution come up my way. Thank You

@gkjohnson @donmccurdy I saw this post of yours How to use DRACOLoader with GLTFLoader with bare module imports? and figured that for setDecoderPath a cdn link or something like can be used but can we not use local files for it in parcel and is it good to just set it with cdn like this.

dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/libs/draco/' );
loader.setDRACOLoader( dracoLoader );

Help here

You can use a CDN but of course you’ll be reliant on the CDN. In order to use the path with parcel you’ll have to set the path to on relative to where the parcel content is served because it will not be bundled with the other files.

I’m not getting it can you explain it more

DRACOLoader uses FileLoader to load the data at the provided path which in turn uses AJAX which means Parcel cannot bundle it. When running the app it will try to load the DRACO module relative to the content bundle rather than the original script location. In practice what this means is you should copy the DRACO scripts to whatever location you see your app is trying to load them from if you want to use a local copy.

I have locally copied whole folder with wasm and js files but as you’re saying I just saw in mdn web assembly docs that they are not yet supported in es6 modules. even after copying all scripts in the src folder as you can see in github repo it is not working. If it is possible, then can you show in the repo how to do.

1 Like

Unfortunately I don’t have the bandwidth to dig into the project to demonstrate this. In your original post and from @Mugen87’s answers it’s clear that it’s not loading the correct files from your server. I would look at the network tab to know where the associated DRACO js files and modules trying to be loaded from and make sure the correct files are in the locations to be loaded. You can verify the content in the network tab as @Mugen87 demonstrated as well.

I tried that and its working perfectly with CDN but it is not that reliable. so I am asking for using it locally in the build

Right I am referring to the case where you are trying to load local file copies. In the above posts it is shown that the files are not in the right location. So you’ll need to verify through the network tab where they should be and you can put them there.

I am pretty much sure that the path is fine it loads the file but parcel cannot decode it. anyway thank you for looking into it

Good information thanks for sharing
vmware