在node.js中的three.js文件中使用javascript`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命令在瀏覽器中顯示空白頁面。我認為javascript js文件中的代碼可能不正確。那我該怎么辦？

Answer 1

將browserify與three.js一起使用的問題是：

• three.js使用全局變量THREE作為其命名空間，當您require('three') （假設您已npm install three ）時，將返回此全局對象，因此var THREE = require('three'); 幾乎可以達到您的期望。
• three.js擴展名大多不返回（通過module.exports ）它們定義的對象，因此在這種情況下， THREE.OrbitControls = require('...')不會達到您的期望。 相反，他們只是希望全局對象THREE存在並為其分配一個新的屬性。 在這些文件中，您將看到THREE.OrbitControls = function() {...}的模式。
• 這是行不通的，因為three.js（主庫）不會將自己分配給窗口對象（如果有module.exports供其使用（您可以輕松地對此進行測試，只需添加console.log(window.THREE) 。

要解決此問題，您只需在加載擴展之前執行此步驟，如下所示：

var THREE = require('three');

window.THREE = THREE;

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

console.log(THREE.OrbitControls);