在 React 中使用 Three.js obj-loader [英] Using Three.js obj-loader in React
问题描述
在第一次尝试中，我使用了从 node_modules 的正常导入，之后甚至没有成功缩小 lib.在下一步中，我使用了旧版本的 Three.js 库，无需任何更改.我找到了导入三 obj-loader 模块的示例并尝试了它，但仍然不知道为什么在输出中我得到 OBJLoader 不是构造的，而是函数.非常感谢您的帮助.
In the first try, I used the normal import from node_modules and after that even minifided lib without success. In the next step I used an older version of Three. js library without any changes. I found out example whit imported three-obj-loader module and tried it and still don`t know why in the output I get OBJLoader is not constructed, but function. Many thanks for help.
我正在导入这样的加载器
I`m importing loaders like this
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 设置:
With Webpack setup:
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 示例和 typescript?
在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是什么?
更新:我也使用过这种情况(外部 obj-loader)，但没有成功.我认为我在使用正确的配置设置项目时遇到了问题.我正在使用来自三个存储库的 obj-loader 和 webpack 插件 importers-loader.它有效，对于 obj-loader 来说，THREE 成为全局的，但它以错误结束:OBJLoader 不是构造函数.即使我复制了不同版本的 obj-loader，仍然没有任何帮助.这条错误信息真的很令人沮丧...
Update: I also used this case (external obj-loader), but without success. I think that I have a problem with setting up the project with right configuration. I was using obj-loader from three repository with webpack plugin importers-loader. It works, THREE becomes global for obj-loader, but it ended with error: OBJLoader is not constructor. Even when I copy different version of the obj-loader, still nothing helped me. It`s really frustrating this error message...
如果有人可以与 React、Three 和 ObJLoader 共享项目，我将不胜感激.
If someone could share project with React, Three and ObJLoader I would be thankful.
感谢这个人和他的工作，https://www.npmjs.com/package/three-react-obj-loader 我可以更进一步，但我仍然想知道错误在哪里......
Thanks to this man and his work, https://www.npmjs.com/package/three-react-obj-loader I`m able to move further, but still I want to know where was the mistake....
我使用的主要配置是 THREE.87.1 React 16 Webpack 3.6.0
Main configuration which I`m using THREE.87.1 React 16 Webpack 3.6.0
推荐答案
我遇到了类似的问题，但您似乎没有正确导入.如果您安装了 npm 包，则无需使用./"导入它们，这对我有用:
I had a similar issue, but it looks like you're not importing correctly. If you have the npm packages installed you don't need to import them with './' This works for me:
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 类的构造函数方法中，调用
Then in the constructor method of your React class, call
var loader = new THREE.OBJLoader();
从那里您应该能够console.log(loader) 并在控制台中看到 THREE.OBJLoader 函数.
From there you should be able to console.log(loader) and see the THREE.OBJLoader function in the console.
如果有帮助，请告诉我！
Let me know if that helps!
这篇关于在 React 中使用 Three.js obj-loader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
