three.js - examples - three min js download

¿Cuál es la forma correcta de utilizar Three.js dentro de Webpack para que pueda usar OrbitControls?

Question

En mi configuración de paquete web:

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'')
      }

En mi módulo:

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''

Si utilizo import * THREE from ''three'' todo está bien y puedo obtener TRES para definir y completar el tutorial de cubo sin problemas. Si cambio a import * as THREE from ''three'' se carga three.js - ¿entonces ese no es el problema?

¿Cómo puedo cargar los OBJLoader y el OBJLoader ? Cuando intento que se carguen, Uncaught ReferenceError: THREE is not defined(…) dentro de THREE.OrbitControls = function ( object, domElement ) { : THREE.OrbitControls = function ( object, domElement ) { THREE no está definido.

Entonces, ¿hay un problema con el empaquetado de los módulos? Instalé esto desde https://www.npmjs.com/package/three

Entonces, ¿qué da? ¿Es un problema cómo Three.js está empaquetado en npm o es una configuración incorrecta en mi webpack.config? ¿Hay alguna manera de decirle a webpack "vamos a empaquetar el archivo raíz de three.js, y luego empaquetar el archivo de OrbitControls.js"?

Answer 1

Necesitaba instalar los three-orbit-controls y el three-obj-loader través de npm.

Luego en mi módulo, simplemente los requería:

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

¡Todo listo!