的javascript'的require`而不是HTML`在three.js所Node.js的中文件script`

Question

我使用JavaScript require而不是HTML script在three.js所在node.js中的文件 一個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') 

所以在browser.I的browserify命令顯示空白頁想也許代碼在javascript js文件都沒有correct.so我該怎麼辦？

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);