threejs-boilerplate/app/templates/setup.js

<% if( withRequirejs ){ %>(function(){
<% } %><% if( withDetectorjs ){ %>	// detect WebGL
	if( !Detector.webgl ){
		Detector.addGetWebGLMessage();
		throw 'WebGL Not Available'
	} 
<% } %>	// setup webgl renderer full page
	var renderer	= new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
	// setup a scene and camera
	var scene	= new THREE.Scene();
	var camera	= new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
	camera.position.z = 3;

	// declare the rendering loop
	var onRenderFcts= [];

<% if( withDetectorjs ){ %>	// handle window resize events
	var winResize	= new THREEx.WindowResize(renderer, camera)

<% } %>	//////////////////////////////////////////////////////////////////////////////////
	//		default 3 points lightning					//
	//////////////////////////////////////////////////////////////////////////////////
	
	// var ambientLight= new THREE.AmbientLight( 0x020202 )
	// scene.add( ambientLight)
	// var frontLight	= new THREE.DirectionalLight('white', 1)
	// frontLight.position.set(0.5, 0.5, 2)
	// scene.add( frontLight )
	// var backLight	= new THREE.DirectionalLight('white', 0.75)
	// backLight.position.set(-0.5, -0.5, -2)
	// scene.add( backLight )		

	//////////////////////////////////////////////////////////////////////////////////
	//		add an object and make it move					//
	//////////////////////////////////////////////////////////////////////////////////	
	// var geometry	= new THREE.CubeGeometry( 1, 1, 1);
	// var material	= new THREE.MeshPhongMaterial();
	// var mesh	= new THREE.Mesh( geometry, material );
	// scene.add( mesh );
	
	// onRenderFcts.push(function(delta, now){
	// 	mesh.rotateX(0.5 * delta);
	// 	mesh.rotateY(2.0 * delta);		
	// })
	
	//////////////////////////////////////////////////////////////////////////////////
	//		Camera Controls							//
	//////////////////////////////////////////////////////////////////////////////////
	var mouse	= {x : 0, y : 0}
	document.addEventListener('mousemove', function(event){
		mouse.x	= (event.clientX / window.innerWidth ) - 0.5
		mouse.y	= (event.clientY / window.innerHeight) - 0.5
	}, false)
	// onRenderFcts.push(function(delta, now){
	// 	camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3)
	// 	camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3)
	// 	camera.lookAt( scene.position )
	// })

	//////////////////////////////////////////////////////////////////////////////////
	//		render the scene						//
	//////////////////////////////////////////////////////////////////////////////////
	// onRenderFcts.push(function(){
	// 	renderer.render( scene, camera );		
	// })
	
	//////////////////////////////////////////////////////////////////////////////////
	//		Rendering Loop runner						//
	//////////////////////////////////////////////////////////////////////////////////
	var lastTimeMsec= null
	requestAnimationFrame(function animate(nowMsec){
		// keep looping
		requestAnimationFrame( animate );
		// measure time
		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
		lastTimeMsec	= nowMsec
		// call each update function
		onRenderFcts.forEach(function(onRenderFct){
			onRenderFct(deltaMsec/1000, nowMsec/1000);
		});
	});
<% if( withRequirejs ){ %>
	module.exports = {
		Scene 	 : scene,
		Renderer : renderer,
		onRender : onRenderFcts,
		Camera   : camera,
		Mouse 	 : mouse
	};

})();
<% } %>