What is the proper way to get Three.js used within Webpack so I can use OrbitControls?
<p>In my webpack config:</p>

<pre><code>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')
      }
</code></pre>

<p>In my module:</p>

<pre><code>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'
</code></pre>

<p>If I use <code>import * THREE from 'three'</code> all is well and I can get THREE to be defined and complete the cube tutorial without hassle. If I change to <code>import * as THREE from 'three'</code> three.js is loaded - so that's not the problem?</p>

<p>How do I get the <code>OrbitControls</code> and the <code>OBJLoader</code> to load? When I try to get them to load, I get <code>Uncaught ReferenceError: THREE is not defined(…)</code> within <code>OrbitControls.js</code>: <code>THREE.OrbitControls = function ( object, domElement ) {</code> THREE is undefined.</p>

<p>So there's a problem with the packaging of the modules? I installed this from <a href="https://www.npmjs.com/package/three" rel="nofollow noreferrer">https://www.npmjs.com/package/three</a></p>

<p>So what gives? Is it a problem how Three.js is packaged on npm or is it a misconfiguration in my webpack.config? Is there a way to tell webpack "let's package the root three.js file, and then package the OrbitControls.js file"?</p>