How to use DRACOLoader with GLTFLoader in ReactJs?

Question

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
• 在我需要的应用程序中将其导出为 THREE.DRACOLoader 模块

我得到的错误 - DracoDecoderModule 未定义

在我的应用程序中，这就是我导入的方式：

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

Answer 1

建议使用https://www.gstatic.com/draco/v1/decoders/作为解码器源码目录，例如：

const draco = new DRACOLoader();
draco.setDecoderConfig({ type: 'js' });
draco.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');

请参阅示例https://github.com/google/draco/tree/master/javascript/example。

Answer 2

相对路径不起作用。实现此目标的一种方法是将您托管draco_wasm_wrapper.js在 aws 或类似的东西上，或者您可以尝试以下操作：

npm i -S three // make sure you have the latest threejs package v2 and up

导入您的依赖项：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

创建并配置您的 draco 加载程序：

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/libs/draco/'); // use a full url path

创建并配置你的 gltf 加载器：

const gltf = new GLTFLoader();
gltf.setDRACOLoader(dracoLoader);

// then you can load your glb file
const glbPath = 'your glb file'
gltf.load(glbPath, function(gltf) {
  console.log(gltf)
})

Answer 3

我喜欢 @marrion luaka 的答案（并对其进行了投票），但在本地引用。

仅改变：

dracoLoader.setDecoderPath('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/libs/draco/'); // use a full url path

对此：

dracoLoader.setDecoderPath( '../node_modules/three/examples/js/libs/draco/gltf/' );

Answer 4

然后将 draco 文件夹托管在云中

import DRACOLoader from './DRACOLoader';
DRACOLoader.setDecoderPath(path to hosted draco folder);

为我工作。

如果你这样做的话

DRACOLoader.setDecoderPath('./draco/')

然后反应将其视为，

DRACOLoader.setDecoderPath('localhost:3000/draco/');

所以它不会工作。