在 React 中使用 Three.js obj-loader

Question

在第一次尝试中，我使用了从node_modules的正常导入，之后甚至缩小了库但没有成功。在下一步中，我使用了旧版本的Three。没有任何更改的 js 库。我发现了导入的三 obj 加载器模块的示例并尝试了它，但仍然不知道为什么在输出中我得到的 OBJLoader 不是构造的，而是函数。 非常感谢您的帮助。

我正在导入这样的加载程序

import OB from './ObjLoader';
import * as THREE from './three';
// var THREE = require('three/examples/js/loaders/OBJLoader');//
// var manager = new LoadingManager();//
// var loader = new THREE.OBJLoader( manager );
// import 'three';
// var loader = new OBJLoader( manager);
var OBJLoader = require('three-obj-loader')(THREE)
var manager = new TH.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
// model
// var loader = new OB( manager );
in function 
export function loadModelOBJ( path ) {
return new Promise( ( resolve, reject ) => {
loader.load(
path,
resolve,
() => null,
error => reject
);
});
}

使用 Webpack 设置：

var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
entry: {
main: './src/client.js'
},
module: {
loaders: [
{
test: /.js?$/,
exclude: /node_modules/,
loaders: [ 'babel', 'eslint-loader' ]
},
{ test: /.json$/, loader: 'file' },
{ test: /.jpg$/, loader: 'file' },
{ test: /.obj$/, loader: 'file' },
{ test: /.scss$/, loaders: [ 'style', 'css', 'sass' ] }
]
},
plugins:[
new webpack.ProvidePlugin({
'THREE': 'three'
}),
],
progress: true,
resolve: {
extensions: ['', '.json', '.js'],
alias: {
'three/OrbitControls': path.join(__dirname, 'node_modules/three/examples/js/controls/OrbitControls.js'),
'three/OBJLoader': path.join(__dirname, 'node_modules/three/examples/js/loaders/OBJLoader.js')
// ...
}
},
output: {
path: 'build/',
filename: 'bundle.js'
}
};

和包装页：

{     
"scripts": {
"start": "webpack-dev-server --content-base build"
},    
"dependencies": {
"autobind-decorator": "^1.3.3",
"babel-core": "^6.7.6",
"babel-loader": "^6.2.1",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-register": "^6.3.13",
"babel-runtime": "^6.3.19",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"json-loader": "^0.5.4",
"node-sass": "^3.7.0",
"react": "^15.3.1",
"react-dom": "^15.1.0",
"react-three-renderer": "^3.2.1",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"three": "^0.84.0",
"three-obj-loader": "^1.1.2"
},
"devDependencies": {
"babel-eslint": "^6.0.4",
"babel-plugin-react-transform": "^2.0.0",
"clean-webpack-plugin": "^0.1.6",
"eslint": "^2.10.2",
"eslint-loader": "^1.3.0",
"eslint-plugin-import": "^1.8.0",
"eslint-plugin-react": "^5.1.1",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1"
}
}

我遵循了以下示例：

使用 webpack、threejs 示例和打字稿？

在Webpack 中使用 Three.js 的正确方法是什么，以便我可以使用 OrbitControls？

三.js OBJLoader 在 react 中没有加载

更新： 我也使用了这种情况(外部 obj-loader(，但没有成功。我认为我在使用正确的配置设置项目时遇到问题。我正在使用来自三个存储库的 obj-loader 和 webpack 插件导入器-加载器。它有效，THREE对于obj-loader来说是全局的，但它以错误结束：OBJLoader不是构造函数。即使我复制不同版本的 obj 加载器，仍然没有任何帮助。这个错误消息真的很令人沮丧...

如果有人能与React，Three和ObJLoader分享项目，我将不胜感激。

多亏了这个人和他的工作，https://www.npmjs.com/package/three-react-obj-loader 我能够走得更远，但我仍然想知道错误在哪里......

我正在使用的主要配置 THREE.87.1 反应 16 Webpack 3.6.0

Answer 1

我遇到了类似的问题，但看起来您没有正确导入。如果您安装了 npm 包，则无需使用"./"导入它们，这对我有用：

import React, { Component } from 'react';
import * as THREE from 'three';
import React3 from 'react-three-renderer';
import OBJLoader from 'three-obj-loader';
OBJLoader(THREE);

然后在 React 类的构造函数方法中，调用

var loader = new THREE.OBJLoader();

从那里你应该能够console.log(loader)并看到三个。控制台中的 OBJLoader 函数。

让我知道这是否有帮助！