Boscop/modular-three.md

## modular-three.md

      
    Raw
  

              modular-three.md
            
          
    This isn't bullet-proof but here's how I've doing things lately:
modular ThreeJS quickie


npm install three --save
Include this in your browserify/webpack root script, typically your index.js:

global.THREE = require('three')

Add the "THREE" global to your linter (e.g. semistandard/eslintrc)
For the rest of your script(s), code per usual by just assuming THREE exists in window/global scope.

global.THREE = require('three');
require('./other.js');
console.log(new THREE.Vector());
custom builds

If I need to customize ThreeJS (which is very often in production) then I will simply replace require('three') with require('./lib/vendor/three.js').
examples / one-off extension

As bad as it sounds, I might just copy the ThreeJS file and replace THREE.Foo = function() with function Foo (), then add module.exports = Foo at the bottom. This maybe takes 1-2 minutes and tends to be less painful than dealing with build tool junk.
lots of extensions

Sometimes you need a whole bunch of extensions/examples.  Instead of converting them all I pretty much give up and just go the standard script-tag way.
To KISS I just end up removing the require('three') from my index, copying node_modules/three/build/three.js to a vendor folder, npm uninstall three --save to remove from package.json, and adding some script tags in HTML:
<body>
  ...
  <script src="js/vendor/three.js.js"></script>
  <script src="js/vendor/some-three-extension.js"></script>
  <script src="js/bundle.js"></script>
  ...
</body>
My project's codebase doesn't change since it already assumes THREE is in global scope.