How to use DRACOLoader with GLTFLoader in ReactJs?

[Shantanu_Srivastava]

I have a use case in which I am trying to load a GLTF file which is compressed using DRACO-Compression. I am able to run it using plain javascript but I am facing issues integrating the loader with ReactJs.

What I am doing:

• Copying the draco library from here into my application’s scope - https://github.com/mrdoob/three.js/tree/master/examples/js/libs/draco
• Copying the DRACOLoader.js from here into my application’s scope - https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/DRACOLoader.js
• Exporting it as a THREE.DRACOLoader Module in my application where I need it

The error I am getting - DracoDecoderModule is not defined

In my app, this is how I am importing:

  import DRACOLoader from './DRACOLoader'
  DRACOLoader.setDecoderPath('./draco/')

DRACOLoader.js file I am using - DRACOLoader.js (19.3 KB)

[erl-j]

Hello Shantanu!

Try to add this before the line that’s giving you trouble

/global DracoDecoderModule :true/
/eslint no-undef: “error”/

[Shantanu_Srivastava]

No, it doesn’t help me - it compiles fine after adding these two lines but when catching the error it says the same thing:

errored ReferenceError: DracoDecoderModule is not defined
at eval (DRACOLoader.js:502)
at new Promise (<anonymous>)
at eval (DRACOLoader.js:488)

[pailhead]

Are you defining your DracoDecoderModule? It looks like it’s being attached to THREE scope. I’d import this file somewhere in your main.js and try to reference it by THREE.DRACOLoader or somethign like that.

[Shantanu_Srivastava]

In DRACOLoader.js file, I am doing this:

• var THREE = require(‘three’)
• export default THREE.DRACOLoader

You can see these changes in the DRACOLoader.js file that I have attached in my question’s description section.

Are you defining your DracoDecoderModule?

I am not touching anything for this module which is in draco_decoder.js file.

[Vikramhegde58]

You can find the solution here: https://stackoverflow.com/questions/56071764/how-to-use-dracoloader-with-gltfloader-in-reactjs