I followed the instructions on https://github.com/AnalyticalGraphicsInc/gltf-pipeline “Converting a glTF to Draco glTF”. I now have a model called “modelDraco.gltf” but I don’t know how I can load it in. In the documentation, it’s just plugged into the GLTF loader but there doesn’t seem to be a connection between the 2-- or am I wrong? Anyways, how can I load the “modelDraco.gltf” file now? Help would be greatly appreciated.
See the GLTFLoader docs here: https://threejs.org/docs/#examples/loaders/GLTFLoader. Draco is a compression method that can be used inside of glTF files. To do this you have to give the GLTFLoader a DRACOLoader instance:
var loader = new THREE.GLTFLoader();
// Optional: Provide a DRACOLoader instance to decode compressed mesh data
THREE.DRACOLoader.setDecoderPath( '/examples/js/libs/draco' );
loader.setDRACOLoader( new THREE.DRACOLoader() );
The decoders are found in the gltf/ folder here: https://github.com/mrdoob/three.js/tree/dev/examples/js/libs/draco
1 Like
Ahh i see. What is the “decoder path”?
The three decoder files (https://github.com/mrdoob/three.js/tree/dev/examples/js/libs/draco/gltf) need to be hosted somewhere along side your webpage. The path should be the URL of the folder they’re in. For example:
- index.html
- models/
- foo.gltf
- bar.gltf
- decoder/
- draco_decoder.js
- draco_decoder.wasm
- draco_wasm_wrapper.js
Then the path would be "decoder/".
4 Likes
I’ve been trying several combinations of the file path but I still seem to be getting an error “Cannot read property setDecoderPath” of undefined.
Index.ejs is the equivalent of index.html and what i’m actually displaying on the web. The directories "imgs"and “js” can be ignored. The “header.ejs” is just where i’m including the basic header of the html template (including script tags referencing the GLTFLoader, OrbitControls, and three.js in “static”). “modelDraco.gltf” is what I’m actually supposed to be loading. Sorry if this is a little confusing.
This is how i’m referencing the official three.js files in the header.
This is how i’m referencing my three.js code in the html.
var loader = new THREE.GLTFLoader();
THREE.DRACOLoader.setDecoderPath( ‘/public/static/decoder’ );
loader.setDRACOLoader( new THREE.DRACOLoader() );
loader.load(‘modelDraco.gltf’, function(gltf){scene.add(gltf.scene)});
It could be that I don’t have the right path or file locations (new to programming).
You need to include THREE.DRACOLoader too, like GLTFLoader. See https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/DRACOLoader.js.
2 Likes
This is the updated directory. The DRACOLoader is included correctly now but I have another error:
The full text at the end there is /public/static/decoder/draco_wasm_wrapper.js:1
This is the path I set it to.
This all depends on how your server is set up… a demo would save me some guessing here, but I think the contents of the “public” or “static” folder are probably served, in which case your decoder path should be /static/decoder/ or /decoder/. You likely don’t include /public/ because that’s the “root” of the website, and other folders next to it aren’t hosted at all.
1 Like
The index.ejs under the “views” directory is the actual html webpage being displayed. The directory “public” is on the same level as the “views” directory so I thought I might have to include public as well-- am I right?
Edit: I think i’m looking in the wrong place. I shouldn’t be looking at index.ejs, instead I should be looking at gltfloading.js cause that file is the one containing the GLTF loader and DracoLoader.
@donmccurdy You’ve done it again! Thanks for the phenomenal help . For anyone who might be experiencing a similar problem to mine, you should be fine if you followed all the instructions above. In the end, I just decided to move all the files from “decoder” into “static” and setDecoderPath(’/static/);
@donmccurdy @Ayma . I did try following your guidelines. However, i get the loader.setDRACOLoader is not a function
var loader = new THREE.GLTFLoader(manager1);
THREE.DRACOLoader.setDecoderPath( 'img/draco1/' );
loader.setDRACOLoader( new THREE.DRACOLoader() );
loader.load('img/xyz.glb', function(gltf) {
.....
The path is all fine, i have dracoloader.js too. wonder whats the reason for the above error.
Perhaps you’re using an old version of GLTFLoader? If you can share a demo or source code that will be easier to debug.
1 Like
@donmccurdy i tried using the recent version of Gltfloader and it works fine now. Thanks for the reply.
Meanwhile, can you refer some of the draco encoders online ?
I don’t know of an up-to-date online draco encoder. I would suggest https://github.com/AnalyticalGraphicsInc/gltf-pipeline, a commandline tool.
2 Likes
How to decode draco_gltf_file or draco_gld_file back through the gltf - pipeline? It turns out to encode, but not back …Is there an online tool for decoding?
Hm, I don’t know. Maybe worth filing a feature request on the repo? if glTF-Pipeline can’t do that already, seems like it’s the right place to start.
Note that glTF is a runtime format, and you should always keep your source files (e.g. .blend) around if possible for future editing.
1 Like
thank you very much for your response! I certainly save my bland files so there are no problems. The fact is that you need to decode another person’s draco file. I will create a request to add this function to the gltf pipeline.
What is the necessity for giving the decoder path for dracoloader using along with gltf loader?
Draco depends on WebAssembly files. These have to be imported from a path, and are not bundled into any JS loaders.
1 Like
Hi I think I am facing the issue you specified WebAssembly error https://github.com/vercel/next.js/discussions/20176#discussion-68754 when using useGLTF but when switching to GLTFLoader getting: Uncaught THREE.GLTFLoader: No DRACOLoader instance provided.
any ideas / examples that can help me?