最初の試行では、node_modulesからの通常のインポートを使用しました。次のステップでは、以前のバージョンのThreeを使用しました。 jsライブラリに変更を加えることなく。私は、3つのobj-loaderモジュールをインポートした例を見つけ、それを試してみましたが、出力でなぜOBJLoaderが構築されないのですか？ 多くのおかげです。ReactでThree.js obj-loaderを使用する
WebPACKのセットアップでは、この
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
);
});
}
のようなローダーをインポートI`m：
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'
}
};
そしてpackpage：
{
"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"
}
}
私はこの例に従っ：
Using webpack, threejs examples, and typescript?
What is the proper way to get Three.js used within Webpack so I can use OrbitControls?
three.js OBJLoader not loading in react
更新： また、私は成功せず、この場合（外部OBJ-ローダー）を使用。私は正しい設定でプロジェクトをセットアップすることに問題があると思います。私は3つのリポジトリからwebpackプラグインのimporters-loaderを使ってobj-loaderを使用していました。それは動作します、3つはobj-loaderのためにグローバルになりますが、エラーで終了しました：OBJLoaderはコンストラクタではありません。異なるバージョンのobj-loaderをコピーしても、何も私を助けませんでした。このエラーメッセージは本当にイライラしています...
誰かがReact、Three、ObJLoaderとプロジェクトを共有できたら、私は感謝します。
さらに移動することができ、この男と彼の仕事、https://www.npmjs.com/package/three-react-obj-loader I`mのおかげで、それでも私は間違いがあった場所を知りたい.... I`mがTHREE.87.1を使用して
メインコンフィギュレーションが反応16 Webpack 3.6.0