I use javascript require instead of html script at three.js file in node.js. a section of html file:

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

an equivalent section of javascript file:

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

so the browserify mand show blank page in the browser.I think maybe the codes in javascript js file are not correct.so what should I do?

I use javascript require instead of html script at three.js file in node.js. a section of html file:

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

an equivalent section of javascript file:

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

so the browserify mand show blank page in the browser.I think maybe the codes in javascript js file are not correct.so what should I do?

• javascript
• html
• node.js
• three.js
• browserify

• source is: github./mrdoob/three.js/blob/dev/examples/… – hasanbaghal Commented Apr 22, 2017 at 10:03
• did you try to open the chrome developer-tools to see if there is any error-message? – Martin Schuhfuß Commented Apr 25, 2017 at 21:11

1 Answer 1

The problem with using browserify together with three.js is this:

• three.js uses the global variable THREE as it's namespace, when you require('three') (assuming you did npm install three), this global object will be returned, so var THREE = require('three'); pretty much does what you'd expect.
• the three.js extensions mostly don't return (via module.exports if available) the Objects they defined, so in their case THREE.OrbitControls = require('...') will not do what you expect. Instead, they simply expect the global object THREE to exists and assign a new property to it. You will see a pattern of THREE.OrbitControls = function() {...} in these files.
• this doesn't work, because three.js (the main library) will not assign itself to the window-object if there is module.exports for it to use (you can easily test this, just add a console.log(window.THREE).

To fix this, you just need to do this one step before loading the extensions, like this:

var THREE = require('three');

window.THREE = THREE;

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

console.log(THREE.OrbitControls);