Question

在我的webpack配置中：

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'一切都很好，我可以定义三个并完成立方体教程而不会有麻烦。如果我更改为import * as THREE from 'three'三个.js已加载 - 那么这不是问题吗？

如何加载OrbitControls和OBJLoader？当我尝试加载它们时，我会在Uncaught ReferenceError: THREE is not defined(…)内得到OrbitControls.js：THREE.OrbitControls = function ( object, domElement ) {三位未定义。

所以模块的包装有问题吗？我是从https://www.npmjs.com/package/three

安装的

那是什么给出的？如何在npm上打包Three.js或者我的webpack.config中的配置错误是一个问题吗？有没有办法告诉webpack“让我们打包root的三个.js文件，然后打包OrbitControls.js文件”？

Answer 1

我需要通过npm安装three-orbit-controls和three-obj-loader。

然后在我的模块中，它只是要求它们：

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

全部设定！

在Webpack中使用Three.js的正确方法是什么，所以我可以使用OrbitControls？

1 个答案: