logo标签列表

如何在ReactJs中使用DRACOLoader和GLTFLoader？

reactjsthree.jsgltf
14

我有一个使用案例，我正在尝试加载一个使用DRACO压缩的GLTF文件。我能够使用普通的JavaScript运行它，但是我在将加载器与ReactJs集成时遇到了问题。

我正在做什么：

我收到的错误消息是 - DracoDecoderModule未定义

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

  import DRACOLoader from './DRACOLoader'
  DRACOLoader.setDecoderPath('./draco/')
10个回答
12
6

相对路径不起作用。实现这一点的方法之一是将您的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)
})
5

我喜欢@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/' );


（注：该段内容涉及it技术，将代码中的路径进行了翻译以保持其易读性，并保留了html标签）
3
将draco文件夹托管在云端，然后...
import DRACOLoader from './DRACOLoader';
DRACOLoader.setDecoderPath(path to hosted draco folder);

对我很有帮助。

如果您按照这样做，

DRACOLoader.setDecoderPath('./draco/')

然后React会将它视为：

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

所以它不会起作用。
1

也许还有另一种选择（仅适用于React）。

我将三个所需文件从node_modules复制到了public文件夹中的一个名为“draco”的文件夹中。

const gltfLoader = new GLTFLoader()
const dracoLoader = new DRACOLoader()  // allow for DRACO compression
dracoLoader.setDecoderPath(process.env.PUBLIC_URL + '/draco/')
gltfLoader.setDRACOLoader(dracoLoader)
1

以上方法在我的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;

如果你喜欢使用Promise，我也让我的加载器返回Promise，具体如下：

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)
})
0

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

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

自 v1.4.1 开始，建议使用版本化的 www.gstatic.com WASM 和 Javascript 解码器，如 此处 所述。

0

我正在类似于 Create React App 的方式使用 Webpack。以下是我如何让 Draco 解码器路径正常工作的方法。

  1. 在您的应用程序的 public 文件夹中，创建一个名为 draco 的新文件夹。

  2. 下载 Three.js Draco Examples 中找到的四个文件，并将它们移动到您的 public/draco 文件夹中。

  3. 使用此代码：

// Imports
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

// Create a new DRACO loader (for decompressing compressed GLTF models)
const dracoLoader = new DRACOLoader();

// Set the DRACO loader's decoder path to the `public/draco` folder
// NB: You have to manually download and copy/paste the files from 
// https://github.com/mrdoob/three.js/tree/dev/examples/js/libs/draco/gltf
// into this folder.
dracoLoader.setDecoderPath('./draco/');

// Create a new GLTF loader
const gltfLoader = new GLTFLoader();

// Use the DRACO loader with the GLTF loader
gltfLoader.setDRACOLoader(dracoLoader);
0
这是对我有效的方法：
   const loader = new GLTFLoader();
   const dracoLoader = new DRACOLoader();
    
   dracoLoader.setDecoderPath('/node_modules/three/examples/jsm/libs/draco/');
    
   loader.setDRACOLoader( dracoLoader );

希望对你有所帮助。
0
如果您正在使用 Vite，并且不想使用 CDN，您需要将 three/examples/jsm/libs/draco/gltf/ 文件夹复制到您的静态/公共文件夹中。然后，您可以使用 new URL(url, import.meta.url) 方法来设置路径。
// Imports
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'

// Create loader
const dracoDecoderPath = new URL('./draco/gltf', import.meta.url).href
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath(dracoDecoderPath + '/')
// This also works
//dracoLoader.setDecoderPath('draco/gltf/')

const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接