ThreeJS Boiler Plate w/EffectComposer
Starting point to edit for ThreeJS applications.
HTML
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/Three.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/Stats.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/threex/THREEx.screenshot.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/threex/THREEx.FullScreen.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/threex/THREEx.WindowResize.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/threex.dragpancontrols.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/postprocessing/EffectComposer.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/postprocessing/BloomPass.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/postprocessing/DotScreenPass.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/postprocessing/FilmPass.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/postprocessing/MaskPass.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/postprocessing/RenderPass.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/postprocessing/SavePass.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/postprocessing/ShaderPass.js"></script>
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/postprocessing/TexturePass.js"></script>
<script src="https://raw.github.com/SirFizX/hsian/master/ShaderExtras.js"></script>
<script...
JavaScript
// ## Let's start coding
// We start to create our world as usual. This initialize the renderer, the camera,
// its controls and a rendering loop.
// We setup the
// [boilerplate for three.js](http://learningthreejs.com/blog/2012/01/19/boilerplate-builder-for-three-js/)
// and add a page title with some info on our little 3D demo.
// We just put the camera a little closer to scene center. Thus the character
// will be bigger on screen. We just can't get enougth of it, can we ;)
var world = tQuery.createWorld().boilerplate().pageTitle('#info').start();
world.tCamera().position.z = 1.8;
// Now we add a bit of post processing. It is the first time
// we talk about this, so let's details it a bit.
// What is post processing (in a 3d context) ?
// Post processing is performed after rendering the 3D, hence the name.
// It applies on the screen as a whole. So the effects are in 2D.
// What's it not ?
// So It isn't for 3d effect on specific objects in your world.
//
// ```tquery.effectcomposer.js``` plugin provides a simple api to add
// postprocessing to our world. It is a chained API on top of
// [three.js effect composer](https://github.com/mrdoob/three.js/tree/master/examples/js/postprocessing).
// In our case, we first apply ```.sepia()``` to change the colors toward
// [sepia color](http://en.wikipedia.org/wiki/Sepia_\(color\)).
// Then we apply ```.vignette()``` and mark the effects list
// as finished. Not too hard hey ;)
world.addEffectComposer().sepia().vignette().finish();
// ## Hello Steve!
// Now that we go a world. We will create a minecraft character.
// In fact, minecraft main character is called ['steve'](http://www.minecraftwiki.net/wiki/The_Player).
// ```tQuery.MinecraftChar``` is the main class. It will create
// a character model and expose all its limbs too e.g right legs or right arms.
// More on that later.
// As you can see, we specify ```skinUrl``` parameter. It should point to the
// image of the...