Easier to understand RequestAnimationFrame setup.

examples/canvas_geometry_cube.html

@@ -19,6 +19,7 @@
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -39,7 +40,7 @@
 			var windowHalfY = window.innerHeight / 2;
 
 			init();
-			setInterval(loop, 1000/60);
+			animate();
 
 			function init() {
 
@@ -159,12 +160,20 @@
 
 			//
 
-			function loop() {
+			function animate() {
 
-				plane.rotation.z = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
+				requestAnimationFrame( animate );
 
-				renderer.render(scene, camera);
+				render();
 				stats.update();
+
+			}
+
+			function render() {
+
+				plane.rotation.z = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
+				renderer.render(scene, camera);
+
 			}
 
 		</script>

examples/js/RequestAnimationFrame.js

+/**
+ * Provides requestAnimationFrame in a cross browser way.
+ * @author greggman / http://greggman.com/
+ */
+
+if ( !window.requestAnimationFrame ) {
+
+	window.requestAnimationFrame = ( function() {
+
+		return window.requestAnimationFrame ||
+		window.webkitRequestAnimationFrame ||
+		window.mozRequestAnimationFrame ||
+		window.oRequestAnimationFrame ||
+		window.msRequestAnimationFrame ||
+		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
+
+			window.setTimeout( callback, 1000 / 60 );
+
+		};
+
+	} )();
+
+}

src/extras/Detector.js

 /**
  * @author alteredq / http://alteredqualia.com/
  */
- 
+
 THREE.Detector = {
-	
+
 	// supported features
-	
-	canvas	: !!window.CanvasRenderingContext2D, // !!document.createElement( 'canvas' ).getContext,
-	webgl	: !!window.WebGLRenderingContext, // window.Uint8Array != undefined,
+
+	canvas	: !!window.CanvasRenderingContext2D,
+	webgl	: !!window.WebGLRenderingContext,
 	workers : !!window.Worker,
-	
+
 	// helper methods
-	
+
 	addGetWebGLMessage: function( parameters ) {
-		
+
 		var parent = document.body,
 			id = "oldie" ;
-		
+
 		if ( parameters ) {
-			
+
 			if ( parameters.parent !== undefined ) parent  = parameters.parent;
 			if ( parameters.id !== undefined ) id  = parameters.id;
-			
+
 		}
-		
+
 		var html = [
-		
+
 		'Sorry, your browser doesn\'t support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br/>',
 		'<br/>',
 		'Please try in',
 		'<a href="http://www.google.com/chrome">Chrome 9+</a> /',
 		'<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /',
 		'<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>'
-		
+
 		].join("\n");
-		
+
 		var wrap = document.createElement( "center" ),
 			message = document.createElement( "div" );
-		
+
 		message.innerHTML = html;
 		message.id = id;
-		
+
 		var style = message.style;
-		
+
 		style.fontFamily = "monospace";
 		style.fontSize = "13px";
 		style.textAlign = "center";
@@ -51,12 +51,12 @@ THREE.Detector = {
 		style.padding = "1em";
 		style.width = "475px";
 		style.margin = "5em auto 0";
-		
+
 		wrap.appendChild( message )
 		parent.appendChild( wrap );
-		
+
 		return message;
 
 	}
-	
+
 };

utils/build.sh

 #!/bin/sh
 
-python build.py --common 
+python build.py --common
 python build.py --extras