Как правильно использовать Three.js в Webpack, чтобы я мог использовать OrbitControls?

В моей конфигурации веб-пакета:

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

Если я использую import * THREE from 'three', все в порядке, и я могу определить 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? Есть ли способ сказать веб-пакету «давайте упакуем корневой файл three.js, а затем упакуем файл OrbitControls.js»?


webpack three.js
person Joe C    schedule 11.11.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Мне нужно было установить three-orbit-controls и three-obj-loader через npm.

Затем в моем модуле они просто требовались:

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

Все готово!

person Joe C    schedule 11.11.2016