在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是啥？

Posted 2023-03-15

【中文标题】在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是啥？

【英文标题】：What is the proper way to get Three.js used within Webpack so I can use OrbitControls?在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是什么？

【发布时间】：2016-11-11 21:36:28

【问题描述】：

在我的 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 加载？当我尝试让它们加载时，我在OrbitControls.js 中得到Uncaught ReferenceError: THREE is not defined(…)：THREE.OrbitControls = function ( object, domElement ) 三个未定义。

所以模块的打包有问题吗？我从https://www.npmjs.com/package/three安装了这个

那是什么？ Three.js 如何在 npm 上打包是一个问题，还是我的 webpack.config 中的配置错误？有没有办法告诉webpack“先打包root的three.js文件，再打包OrbitControls.js文件”？

【参考方案1】：

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

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

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

一切就绪！