javascript node.js 中的 three.js 文件中的 html `require` 而不是 html `script`

Question

我在 node.js 中的 three.js 文件中使用 javascript require 而不是 html script。 html 文件的一部分：

<script src="../build/three.js"></script>

<script src="js/controls/DragControls.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/controls/TransformControls.js"></script>

<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>

javascript 文件的等效部分：

var THREE = require('../build/three.js')

//module.exports = THREE

THREE.DragControls = require('./js/controls/DragControls.js')
THREE.OrbitControls = require('./js/controls/OrbitControls.js')
THREE.TransformControls = require('./js/controls/TransformControls.js')

var Stats = require('./js/libs/stats.min.js')
var dat = require('./js/libs/dat.gui.min.js')

所以 browserify 命令在 browser.I 中显示空白页认为 javascript js 文件中的代码可能不是 correct.so 我该怎么办？

Answer 1

将 browserify 与 three.js 一起使用的问题是：

three.js 使用全局变量 THREE 作为它的命名空间，当你 require('three')（假设你做了 npm install three）时，这个全局对象将是 returned，所以 var THREE = require('three'); 几乎符合您的预期。
three.js 扩展大多不 return（通过 module.exports 如果可用）他们定义的对象，所以在他们的情况下 THREE.OrbitControls = require('...') 不会做你的事预计。相反，他们只是希望全局对象 THREE 存在并为其分配一个新的属性。您将在这些文件中看到 THREE.OrbitControls = function() {...} 的模式。
这行不通，因为 three.js（主库）不会将自己分配给 window-对象，如果有 module.exports 供它使用（您可以轻松测试这个，只需添加一个 console.log(window.THREE).

要解决此问题，您只需在加载扩展程序之前执行此操作，如下所示：

var THREE = require('three');

window.THREE = THREE;

require('./path/to/OrbitControls.js');
// ...

console.log(THREE.OrbitControls);

javascript node.js 中的 three.js 文件中的 html `require` 而不是 html `script`

javascript `require` instead of html `script` at three.js file in node.js

html

javascript

node.js

three.js

browserify