Skip to content

Instantly share code, notes, and snippets.

@Boscop
Forked from mattdesl/modular-three.md
Created September 22, 2016 19:05
Show Gist options
  • Save Boscop/dcecf5b25e5a2851200c9151319b5435 to your computer and use it in GitHub Desktop.
Save Boscop/dcecf5b25e5a2851200c9151319b5435 to your computer and use it in GitHub Desktop.
quick/easy ThreeJS hacking with npm

This isn't bullet-proof but here's how I've doing things lately:

modular ThreeJS quickie

  1. npm install three --save
  2. Include this in your browserify/webpack root:
global.THREE = require('three')
3. Add this global to your linter (e.g. semistandard/eslintrc)
4. For the rest of your script(s), code per usual by just assuming `THREE` exists in window/global scope.

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

adding extensions

Sometimes you need something like a ThreeJS extension or loader which isn't on npm. It gets nasty with browserify-shim or similar tools...

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>

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') or use a <script> tag.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment