OrbitControlsを使用できるようにWebpack内でThree.jsを使用する適切な方法は何ですか？私のWebPACKの設定で

Question

：私のモジュールで

resolve: { 
     alias: { 
     'three': path.resolve('node_modules', 'three/build/three.js'), 
     'OrbitControls': path.resolve('node_modules', 'three/examples/js/controls/OrbitControls.js'), 
     'OBJLoader': path.resolve('node_modules', 'three/examples/js/loaders/OBJLoader.js') 
     } 

：私はimport * THREE from 'three'を使用している場合

import * as THREE from 'three' // if I do import THREE from 'three' it fails with three being undefined 
import OrbitControls from 'OrbitControls' 
import OBJLoader from 'OBJLoader' 

すべてが順調であると私はTHREEを定義するために取得し、手間をかけずに、キューブのチュートリアルを完了することができます。 import * as THREE from 'three' three.jsがロードされている場合、問題はありませんか？

OrbitControlsとOBJLoaderをロードするにはどうすればよいですか？負荷をかけようとすると、Uncaught ReferenceError: THREE is not defined(…)がOrbitControls.jsになります。THREE.OrbitControls = function (object, domElement) { THREEは未定義です。

モジュールのパッケージに問題がありますか？私はこれをインストールしましたhttps://www.npmjs.com/package/three

これは何ですか？ Three.jsがnpmにパッケージ化されているか、webpack.configの設定が間違っていますか？ webpackに "root three.jsファイルをパッケージ化し、OrbitControls.jsファイルをパッケージ化しましょう"と伝える方法はありますか？

Answer 1

three-orbit-controlsとthree-obj-loaderをnpmでインストールする必要がありました。

はその後、私のモジュールでは、それは単にそれらを必要とした

var OBJLoader = require('three-obj-loader')(THREE) 
var OrbitControls = require('three-orbit-controls')(THREE) 

すべてのセット！