Boscop · September 22, 2016 19:05 · Sep 6, 2016 · Sep 6, 2016 · Sep 6, 2016 · Sep 6, 2016
diff --git a/modular-three.md b/modular-three.md
@@ -16,9 +16,17 @@ require('./other.js');
 console.log(new THREE.Vector());
 ```
 
-## adding extensions
+## 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.
 
-Sometimes you need something like a ThreeJS extension or loader which isn't on npm. It gets nasty with `browserify-shim` or similar tools...
+## 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:
 
@@ -32,6 +40,4 @@ To KISS I just end up removing the `require('three')` from my index, copying `no
 </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.
+My project's codebase doesn't change since it already assumes `THREE` is in global scope.
diff --git a/modular-three.md b/modular-three.md
@@ -7,7 +7,7 @@ This isn't bullet-proof but here's how I've doing things lately:
 ```js
 global.THREE = require('three')
 ```
-- Add this global to your linter (e.g. semistandard/eslintrc)
+- 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.
 
 ```js

diff --git a/modular-three.md b/modular-three.md
@@ -3,7 +3,7 @@ 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:  
+- Include this in your browserify/webpack root script, typically your `index.js`: 
 ```js
 global.THREE = require('three')
 ```

diff --git a/modular-three.md b/modular-three.md
@@ -2,13 +2,13 @@ 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:  
+- `npm install three --save`
+- Include this in your browserify/webpack root:  
 ```js
 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.
+- Add this 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.
 
 ```js
 global.THREE = require('three');

diff --git a/modular-three.md b/modular-three.md
@@ -6,6 +6,7 @@ This isn't bullet-proof but here's how I've doing things lately:
 2. Include this in your browserify/webpack root:  
 ```js
 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.
 

diff --git a/modular-three.md b/modular-three.md
@@ -0,0 +1,36 @@
+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:  
+```js
+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:
+
+```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.