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