Three 中 OrbitControls.js 库的 CommonJS 实现

Question

OrbitControls.js 库与 ThreeJS 一起使用时，可以实现鼠标和滚动与 3D 对象的交互。

目前，ThreeJS 可以在 CommonJS 环境中使用，但是当合并 OrbitControls.js 时会导致错误。

常见的错误是：

$ Uncaught ReferenceError: require is not defined at orbitControls.js:7
$ require not defined
$ Uncaught ReferenceError: module is not defined at orbitControls.js:558

require 错误可以通过 RequireJS 导入 OrbitControls.js 来解决。但是这种方法并不能解决 module 由于 module.exports。

---

在这里，我遇到了解决此问题的解决方法。

步骤 1. 在 HTML head 中添加 ThreeJS 的 cdn。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

步骤 2. 在 HTML 正文中定义画布。

<canvas id="bg">
</canvas>

步骤 3. 在关闭 body 标签之前，从这个 repo 下载 orbitcontrols.js 并使用适当的路径添加它。

<script src="./orbitControls.js"></script>

步骤 4. 添加具有您在 ThreeJS 和 Orbitcontrols.js 中实现的功能的 main.js

<script src="./main.js"></script>

优点：如果您使用此方法，则不需要节点环境。这意味着您的网站可以轻松托管在 GitHub Pages 等静态托管网站上。

项目地址：https://github.com/Aviral09/CommonJS-OrbitControls.js