ThreeJS Boiler Plate

Starting point to edit for ThreeJS applications.

by sirfizx

HTML

<link rel="stylesheet" href="https://raw.github.com/jeromeetienne/threejsboilerplate/master/css/main.css">
<script src="https://raw.github.com/jeromeetienne/threejsboilerplate/master/vendor/three.js/Detector.js"></script>
<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>
<!-- three.js container -->
    	<div id="container"></div>
	<!-- info on screen display -->
	<div id="info">
		<div class="top">
			<a href="http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/" target="_blank">LearningThree.js</a>
			boiler plate for
			<a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a>
		</div>
		<div class="bottom" id="inlineDoc" >
			- <i>p</i> for screenshot
		</div> 
	</div>

JavaScript

var stats, scene, renderer;
		var camera, cameraControls;


		if( !init() )	animate();

		// init the scene
		function init(){

			if( Detector.webgl ){
				renderer = new THREE.WebGLRenderer({
					antialias		: true,	// to get smoother output
					preserveDrawingBuffer	: true	// to allow screenshot
				});
				renderer.setClearColorHex( 0xBBBBBB, 1 );
			// uncomment if webgl is required
			//}else{
			//	Detector.addGetWebGLMessage();
			//	return true;
			}else{
				renderer	= new THREE.CanvasRenderer();
			}
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.getElementById('container').appendChild(renderer.domElement);

			// add Stats.js - https://github.com/mrdoob/stats.js
			stats = new Stats();
			stats.domElement.style.position	= 'absolute';
			stats.domElement.style.bottom	= '0px';
			document.body.appendChild( stats.domElement );

			// create a scene
			scene = new THREE.Scene();

			// put a camera in the scene
			camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
			camera.position.set(0, 0, 5);
			scene.add(camera);

			// create a camera contol
			cameraControls	= new THREEx.DragPanControls(camera)

			// transparently support window resize
			THREEx.WindowResize.bind(renderer, camera);
			// allow 'p' to make screenshot
			THREEx.Screenshot.bindKey(renderer);
			// allow 'f' to go fullscreen where this feature is supported
			if( THREEx.FullScreen.available() ){
				THREEx.FullScreen.bindKey();		
				document.getElementById('inlineDoc').innerHTML	+= "- <i>f</i> for fullscreen";
			}

			// here you add your objects
			// - you will most likely replace this part by your own
			var geometry	= new THREE.TorusGeometry( 1, 0.42 );
			var material	= new THREE.MeshNormalMaterial();
			var mesh	= new THREE.Mesh( geometry, material );
			scene.add( mesh );
		}

		// animation loop
		function animate() {

			// loop on request animation loop
			// - it has to be at the begining of the...