Apa cara yang tepat untuk menggunakan Three.js dalam Webpack sehingga saya dapat menggunakan OrbitControls?

Dalam konfigurasi webpack saya:

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

Dalam modul saya:

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'

Jika saya menggunakan import * THREE from 'three' semuanya baik-baik saja dan saya bisa mendapatkan TIGA untuk didefinisikan dan menyelesaikan tutorial kubus tanpa kerumitan. Jika saya mengubah ke import * as THREE from 'three' three.js dimuat - jadi bukan itu masalahnya?

Bagaimana cara memuat OrbitControls dan OBJLoader? Saat saya mencoba memuatnya, saya mendapatkan Uncaught ReferenceError: THREE is not defined(…) dalam OrbitControls.js: THREE.OrbitControls = function ( object, domElement ) { TIGA tidak terdefinisi.

Jadi ada masalah dengan pengemasan modulnya? Saya memasangnya dari https://www.npmjs.com/package/three

Jadi apa yang menyebabkannya? Apakah cara Three.js dikemas di npm bermasalah atau ada kesalahan konfigurasi di webpack.config saya? Apakah ada cara untuk memberi tahu webpack "mari kita kemas file root three.js, lalu kemas file OrbitControls.js"?


webpack three.js
person Joe C    schedule 11.11.2016    source sumber

Jawaban (1)


arrow_upward
2
arrow_downward

Saya perlu menginstal three-orbit-controls dan three-obj-loader melalui npm.

Kemudian di modul saya, itu hanya mengharuskan mereka:

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

Siap!

person Joe C    schedule 11.11.2016