Question

我有一个用例，其中我试图加载使用DRACO-Compression压缩的GLTF文件。我可以使用普通的javascript来运行它，但是我遇到了将加载程序与ReactJs集成的问题。

我在做什么：

从此处将draco库复制到我的应用程序的范围内-https://github.com/mrdoob/three.js/tree/master/examples/js/libs/draco
从此处将DRACOLoader.js复制到我的应用程序的作用域-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

我喜欢@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 2

建议使用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 3

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

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

为我工作。

如果您喜欢这样

DRACOLoader.setDecoderPath('./draco/')

然后反应将其视为

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

所以它行不通。

Answer 4

相对路径不起作用。实现此目的的一种方法是将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);

Answer 5

以上所有内容均未直接在Three@0.115.0上为我工作，所以我使用了：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import * as THREE from 'three';

// draco
const draco = new DRACOLoader()
draco.setDecoderPath('../node_modules/three/examples/js/libs/draco/gltf/');
draco.setDecoderConfig({ type: 'js' });
export const dracoLoader = draco;

// gltf
const gltf = new GLTFLoader();
gltf.setDRACOLoader( dracoLoader );
export const gltfLoader = gltf;

对于那些喜欢诺言的人来说，奖励，我也一直在使我的装载机通过以下方式返回诺言：

function promisify(loader, onProgress) {
  function promiseLoader(url) {
    return new Promise((resolve, reject) => {
      loader.load(url, resolve, onProgress, reject);
    });
  }
  return {
    originalLoader: loader,
    load: promiseLoader,
  };
}

用法示例：

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';

export const fbxLoader = promisify(new FBXLoader());

然后在其他地方：

import { fbxLoader } from './loaders'

fbxLoader.load('cat.fbx').then(model => {
  console.log(model)
})

如何在ReactJs中将DRACOLoader与GLTFLoader一起使用？

5 个答案: