如何在ReactJs中使用DRACOLoader和GLTFLoader?

bf1o4zei  于 2023-03-17  发布在  React
关注(0)|答案(8)|浏览(344)

我有一个用例,我试图加载一个使用DRACO-Compression压缩的GLTF文件。我可以使用普通JavaScript运行它,但我面临着将加载程序与ReactJs集成的问题。
我在做什么:

我得到的错误-DracoDecoderModule未定义
在我的应用程序中,这是我导入的方式:

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

mutmk8jj1#

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

x6492ojm

x6492ojm2#

相对路径不起作用,一种方法是把你的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)
})
bcs8qyzn

bcs8qyzn3#

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

du7egjpx

du7egjpx4#

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

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

对我有用。
如果你真喜欢这个,

DRACOLoader.setDecoderPath('./draco/')

那么react会把它当作,

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

所以行不通。

pdsfdshx

pdsfdshx5#

上面的代码都不能直接在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)
})
zz2j4svz

zz2j4svz6#

也许是另一种选择(仅适用于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)
nwnhqdif

nwnhqdif7#

我使用Webpack的方式与Create React App使用它的方式类似。下面是我如何让Draco解码器路径工作的。
1.在应用的public文件夹中,创建名为draco的新文件夹。
1.下载Three.js Draco Examples中的四个文件,并将它们移动到public/draco文件夹中。
1.使用此代码:

// 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);
of1yzvn4

of1yzvn48#

建议使用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解码器。

相关问题