diff --git a/examples/canvas_camera_orthographic.html b/examples/canvas_camera_orthographic.html
index e707db46..823144cc 100644
--- a/examples/canvas_camera_orthographic.html
+++ b/examples/canvas_camera_orthographic.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - camera - orthographic</title>
+		<title>three.js canvas - camera - orthographic</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
@@ -18,6 +18,7 @@
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -26,7 +27,7 @@
 			var camera, scene, renderer;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -115,19 +116,30 @@
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
+				container.appendChild( stats.domElement );
 
 			}
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				var timer = new Date().getTime() * 0.0001;
 
 				camera.position.x = Math.cos( timer ) * 200;
 				camera.position.z = Math.sin( timer ) * 200;
 
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
+
 			}
 
 		</script>
diff --git a/examples/canvas_geometry_birds.html b/examples/canvas_geometry_birds.html
index 5db28f67..792b6edf 100644
--- a/examples/canvas_geometry_birds.html
+++ b/examples/canvas_geometry_birds.html
@@ -1,7 +1,7 @@
 <html>
 	<head>
 		<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
-		<title>three.js - geometry - birds</title>
+		<title>three.js canvas - geometry - birds</title>
 		<style type="text/css"> 
 			body {
 				color: #808080;
@@ -26,11 +26,12 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - birds demo</div>
 
-		<script type="text/javascript" src="js/Stats.js"></script>
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="obj/Bird.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
 		<script type="text/javascript">
 
 			// Based on http://www.openprocessing.org/visuals/?visualID=6910
@@ -331,6 +332,7 @@
 			var stats;
 
 			init();
+			animate();
 
 			function init() {
 
@@ -378,8 +380,6 @@
 
 				document.getElementById( 'container' ).appendChild(stats.domElement);
 
-				setInterval( loop, 1000 / 200 );
-
 			}
 
 			function onDocumentMouseMove( event ) {
@@ -398,7 +398,18 @@
 
 			}
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				for ( var i = 0, il = birds.length; i < il; i++ ) {
 
@@ -421,8 +432,6 @@
 
 				renderer.render( scene, camera );
 
-				stats.update();
-
 			}
 
 		</script>
diff --git a/examples/canvas_geometry_cube.html b/examples/canvas_geometry_cube.html
index 7203fedc..a23be5e9 100644
--- a/examples/canvas_geometry_cube.html
+++ b/examples/canvas_geometry_cube.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - geometry - cube</title>
+		<title>three.js canvas - geometry - cube</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
@@ -172,7 +172,7 @@
 			function render() {
 
 				plane.rotation.z = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 			}
 
diff --git a/examples/canvas_geometry_earth.html b/examples/canvas_geometry_earth.html
index bd4ead8f..db28cd03 100644
--- a/examples/canvas_geometry_earth.html
+++ b/examples/canvas_geometry_earth.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - geometry - earth</title>
+		<title>three.js canvas - geometry - earth</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -33,14 +33,14 @@
 		<div id="container"></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</div>
 
-		<script type="text/javascript" src="js/Stats.js"></script>
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
-
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
 		<script type="text/javascript">
 
 			var container, stats;
@@ -54,10 +54,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 			function init() {
 
@@ -98,7 +96,18 @@
 
 			}
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
@@ -106,7 +115,6 @@
 				mesh.rotation.y -= 0.005;
 
 				renderer.render( scene, camera );
-				stats.update();
 
 			}
 
diff --git a/examples/canvas_geometry_panorama.html b/examples/canvas_geometry_panorama.html
index 56a13d1b..2c940376 100644
--- a/examples/canvas_geometry_panorama.html
+++ b/examples/canvas_geometry_panorama.html
@@ -32,7 +32,6 @@
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - panorama demo. cubemap by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>.</div>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
-
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 		<script type="text/javascript">
diff --git a/examples/canvas_geometry_terrain.html b/examples/canvas_geometry_terrain.html
index 93546904..e416b613 100644
--- a/examples/canvas_geometry_terrain.html
+++ b/examples/canvas_geometry_terrain.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - geometry - terrain</title>
+		<title>three.js canvas - geometry - terrain</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -33,12 +33,14 @@
 		<div id="container"><br /><br /><br /><br /><br />Generating...</div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - terrain demo. <a href="geometry_terrain.html">generate another</a></div> 
 
-		<script type="text/javascript" src="js/Stats.js"></script>
-		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
-
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 
+		<script type="text/javascript" src="js/ImprovedNoise.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
 		<script type="text/javascript">
 
 			var container, stats;
@@ -53,10 +55,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 			function init() {
 
@@ -103,23 +103,6 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
-
-				mouseX = event.clientX - windowHalfX;
-				mouseY = event.clientY - windowHalfY;
-
-			}
-
-			function loop() {
-
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
-
-				renderer.render(scene, camera);
-				stats.update();
-
-			}
-
 			function generateHeight( width, height ) {
 
 				var data = Float32Array ? new Float32Array() : [], perlin = new ImprovedNoise(),
@@ -192,6 +175,33 @@
 
 			}
 
+			function onDocumentMouseMove(event) {
+
+				mouseX = event.clientX - windowHalfX;
+				mouseY = event.clientY - windowHalfY;
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
+
+				renderer.render( scene, camera );
+
+			}
+
 
 		</script>
 
diff --git a/examples/canvas_interactive_cubes.html b/examples/canvas_interactive_cubes.html
index bb6f4c20..9f5cdfa8 100644
--- a/examples/canvas_interactive_cubes.html
+++ b/examples/canvas_interactive_cubes.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - interactive - cubes</title>
+		<title>three.js canvas - interactive - cubes</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -17,6 +17,7 @@
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -25,7 +26,7 @@
 			var camera, scene, projector, renderer;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -69,7 +70,7 @@
 				renderer = new THREE.CanvasRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild(renderer.domElement);
+				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
@@ -112,18 +113,29 @@
 				*/
 			}
 
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
 			var radius = 600;
 			var theta = 0;
 
-			function loop() {
+			function render() {
 
 				theta += 0.2;
 				camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
+
 			}
 
 		</script>
diff --git a/examples/canvas_interactive_cubes_tween.html b/examples/canvas_interactive_cubes_tween.html
index 484a07dc..679ad62f 100644
--- a/examples/canvas_interactive_cubes_tween.html
+++ b/examples/canvas_interactive_cubes_tween.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - interactive - cubes tween</title>
+		<title>three.js canvas - interactive - cubes tween</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -18,6 +18,7 @@
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 
 		<script type="text/javascript" src="js/Tween.js"></script>
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -26,7 +27,7 @@
 			var camera, scene, projector, renderer;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -118,10 +119,21 @@
 				*/
 			}
 
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
 			var radius = 600;
 			var theta = 0;
 
-			function loop() {
+			function render() {
 
 				TWEEN.update();
 
@@ -130,8 +142,8 @@
 				camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
 				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
 
-				renderer.render(scene, camera);
-				stats.update();
+				renderer.render( scene, camera );
+
 			}
 
 		</script>
diff --git a/examples/canvas_interactive_voxelpainter.html b/examples/canvas_interactive_voxelpainter.html
index afcd3cf0..6dfa3f9a 100644
--- a/examples/canvas_interactive_voxelpainter.html
+++ b/examples/canvas_interactive_voxelpainter.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - interactive - voxel painter</title>
+		<title>three.js canvas - interactive - voxel painter</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -15,10 +15,10 @@
 	<body>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
-
 		<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">
@@ -31,7 +31,7 @@
 			theta = 45, isCtrlDown = false;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -186,7 +186,18 @@
 
 			}
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				if ( isShiftDown ) {
 
@@ -221,7 +232,7 @@
 				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
 
 				renderer.render( scene, camera );
-				stats.update();
+
 			}
 
 		</script>
diff --git a/examples/canvas_lights_pointlights.html b/examples/canvas_lights_pointlights.html
index 61eeb23a..973ba8cf 100644
--- a/examples/canvas_lights_pointlights.html
+++ b/examples/canvas_lights_pointlights.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - point light</title>
+		<title>three.js canvas - point light</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -38,8 +38,10 @@
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 		</div>
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
-		<script type="text/javascript" src="obj/WaltHead.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+		<script type="text/javascript" src="obj/WaltHead.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript">
 
@@ -49,7 +51,7 @@
 			mesh;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -93,7 +95,17 @@
 
 			}
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 				var time = new Date().getTime() * 0.0005;
 
@@ -123,7 +135,7 @@
 				light3.position.y = particle3.position.y;
 				light3.position.z = particle3.position.z;
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 			}
 
diff --git a/examples/canvas_lights_pointlights_smooth.html b/examples/canvas_lights_pointlights_smooth.html
index 88cb8cdb..afed9b2f 100644
--- a/examples/canvas_lights_pointlights_smooth.html
+++ b/examples/canvas_lights_pointlights_smooth.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - point light</title>
+		<title>three.js canvas - point light smooth</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -38,8 +38,10 @@
 			Walt Disney head by <a href="http://www.davidoreilly.com/2009/01/walt-disneys-head-on-a-plate" target="_blank">David OReilly</a>
 		</div>
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
-		<script type="text/javascript" src="obj/WaltHead.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+		<script type="text/javascript" src="obj/WaltHead.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript">
 
@@ -49,7 +51,7 @@
 			geometry, mesh;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -96,7 +98,17 @@
 
 			}
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 				var time = new Date().getTime() * 0.0005;
 
@@ -126,7 +138,7 @@
 				light3.position.y = particle3.position.y;
 				light3.position.z = particle3.position.z;
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 			}
 
diff --git a/examples/canvas_lines.html b/examples/canvas_lines.html
index f03ed142..436a56af 100644
--- a/examples/canvas_lines.html
+++ b/examples/canvas_lines.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - particles - floor</title>
+		<title>three.js canvas - lines - random</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
@@ -18,7 +18,9 @@
 	</head>
 	<body>
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript">
 
@@ -31,12 +33,10 @@
 			AMOUNTX = 10,
 			AMOUNTY = 10,
 
-			camera, scene, renderer,
-
-			stats;
+			camera, scene, renderer;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -80,13 +80,6 @@
 				var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );
 				scene.addObject( line );
 
-				/*
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
-				*/
-
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
@@ -108,7 +101,9 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
@@ -119,20 +114,28 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			//
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
-				camera.updateMatrix();
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
-				// stats.update();
 			}
 
 		</script>
diff --git a/examples/canvas_lines_sphere.html b/examples/canvas_lines_sphere.html
index 08eac2f2..964fca60 100644
--- a/examples/canvas_lines_sphere.html
+++ b/examples/canvas_lines_sphere.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - particles - floor</title>
+		<title>three.js canvas - lines - sphere</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
@@ -18,7 +18,9 @@
 	</head>
 	<body>
 
-		<script type="text/javascript" src="../build/Three.js"></script> 
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 
 		<script type="text/javascript">
 
@@ -34,12 +36,10 @@
 			AMOUNTX = 10,
 			AMOUNTY = 10,
 
-			camera, scene, renderer,
-
-			stats;
+			camera, scene, renderer;
 
 			init();
-			setInterval(loop, 1000 / 60);
+			animate();
 
 			function init() {
 
@@ -92,16 +92,9 @@
 					geometry.vertices.push( new THREE.Vertex( vector2 ) );
 
 					var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: Math.random() } ) );
-					scene.addObject(line);
+					scene.addObject( line );
 				}
 
-				/*
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				container.appendChild(stats.domElement);
-				*/
-
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
@@ -117,37 +110,47 @@
 
 			function onDocumentTouchStart( event ) {
 
-				if(event.touches.length > 1) {
+				if ( event.touches.length > 1 ) {
 
 					event.preventDefault();
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
 
-				if(event.touches.length == 1) {
+				if ( event.touches.length == 1 ) {
 
 					event.preventDefault();
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			//
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
-				camera.updateMatrix();
 
 				renderer.render( scene, camera );
 
-				// stats.update();
 			}
 
 		</script>
diff --git a/examples/canvas_materials.html b/examples/canvas_materials.html
index 474f3dd4..7d8b7fab 100644
--- a/examples/canvas_materials.html
+++ b/examples/canvas_materials.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - materials</title>
+		<title>three.js canvas - materials</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -15,10 +15,10 @@
 	<body>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
-
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -29,8 +29,7 @@
 			var particleLight, pointLight;
 
 			init();
-			// loop();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -172,7 +171,16 @@
 
 			//
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				var timer = new Date().getTime() * 0.0001;
 
@@ -198,7 +206,6 @@
 
 				renderer.render( scene, camera );
 
-				stats.update();
 			}
 
 		</script>
diff --git a/examples/canvas_materials_depth.html b/examples/canvas_materials_depth.html
index 685129c4..b6793a71 100644
--- a/examples/canvas_materials_depth.html
+++ b/examples/canvas_materials_depth.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - depth material</title>
+		<title>three.js canvas - depth material</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -15,10 +15,10 @@
 	<body>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
-
 		<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">
@@ -55,8 +55,7 @@
 			var debugContext;
 
 			init();
-			setInterval( loop, 1000 / 60 );
-			// loop();
+			animate();
 
 			function init() {
 
@@ -129,7 +128,6 @@
 				scene.addLight( pointLight );
 
 				renderer = new THREE.CanvasRenderer();
-				// renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
@@ -196,7 +194,16 @@
 
 			//
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				if ( moveForward ) camera.position.z -= 10; // camera.moveZ( 10 );
 				if ( moveBackwards ) camera.position.z += 10; // camera.moveZ( - 10 );
@@ -216,14 +223,14 @@
 				if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
 				if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
 
-				debugContext.clearRect( -256, -256, 512, 512 );
+				debugContext.clearRect( - 256, - 256, 512, 512 );
 
 				debugContext.beginPath();
 
 				// center
-				debugContext.moveTo( -10, 0 );
+				debugContext.moveTo( - 10, 0 );
 				debugContext.lineTo( 10, 0 );
-				debugContext.moveTo( 0, -10 );
+				debugContext.moveTo( 0, - 10 );
 				debugContext.lineTo( 0, 10 );
 
 				// camera
@@ -249,9 +256,8 @@
 				debugContext.closePath();
 				debugContext.stroke();
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
-				stats.update();
 			}
 
 		</script>
diff --git a/examples/canvas_materials_normal.html b/examples/canvas_materials_normal.html
index 7bb8b20f..02fc53c0 100644
--- a/examples/canvas_materials_normal.html
+++ b/examples/canvas_materials_normal.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - normal material</title>
+		<title>three.js canvas - normal material</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -41,13 +41,15 @@
 		<script type="text/javascript" src="../build/Three.js"></script> 
 		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+
 		<script type="text/javascript">
 
 			var camera, scene, renderer,
 			object;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -64,20 +66,29 @@
 				scene.addObject( object );
 
 				renderer = new THREE.CanvasRenderer();
-				//renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 			}
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 				var time = new Date().getTime() * 0.0005;
 
 				object.rotation.x -= 0.005;
 				object.rotation.y -= 0.01;
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 			}
 
diff --git a/examples/canvas_materials_reflection.html b/examples/canvas_materials_reflection.html
index 1588aaa3..e1aead43 100644
--- a/examples/canvas_materials_reflection.html
+++ b/examples/canvas_materials_reflection.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - spherical reflection</title>
+		<title>three.js canvas - spherical reflection</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -42,6 +42,8 @@
 
 		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+
 		<script type="text/javascript">
 
 			var camera, scene, renderer,
@@ -50,7 +52,7 @@
 			geometry, mesh;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -74,13 +76,23 @@
 
 			}
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
 
 				var time = new Date().getTime() * 0.0005;
 
 				mesh.rotation.y -= 0.01;
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 			}
 
diff --git a/examples/canvas_materials_video.html b/examples/canvas_materials_video.html
index 399b742e..a4591487 100644
--- a/examples/canvas_materials_video.html
+++ b/examples/canvas_materials_video.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - materials - video</title>
+		<title>three.js canvas - materials - video</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
@@ -15,11 +15,12 @@
 	</head>
 	<body>
 
-		<script type="text/javascript" src="js/Stats.js"></script>
-
 		<script type="text/javascript" src="../build/Three.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>
+
 		<video id="video" autoplay style="display:none">
 			<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
@@ -44,12 +45,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
 			init();
-			setInterval( loop, 1000 / 60 );
-
+			animate();
 
 			function init() {
 
@@ -148,6 +145,8 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
 			}
 
 			function onDocumentMouseMove(event) {
@@ -157,7 +156,18 @@
 
 			}
 
-			function loop() {
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
@@ -172,7 +182,6 @@
 				textureReflectionContext.fillRect( 0, 0, 480, 204 );
 
 				renderer.render( scene, camera );
-				stats.update();
 
 			}
 
diff --git a/examples/canvas_particles_floor.html b/examples/canvas_particles_floor.html
index c814d8a1..6d628be7 100644
--- a/examples/canvas_particles_floor.html
+++ b/examples/canvas_particles_floor.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - particles - floor</title>
+		<title>three.js canvas - particles - floor</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
@@ -19,6 +19,8 @@
 	<body>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -35,7 +37,7 @@
 			var windowHalfY = window.innerHeight / 2;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -106,14 +108,22 @@
 
 			//
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				renderer.render( scene, camera );
 
-				stats.update();
 			}
 
 		</script>
diff --git a/examples/canvas_particles_random.html b/examples/canvas_particles_random.html
index a491ad1b..da1561fa 100644
--- a/examples/canvas_particles_random.html
+++ b/examples/canvas_particles_random.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - particles - random</title>
+		<title>three.js canvas - particles - random</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
@@ -20,6 +20,7 @@
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -32,12 +33,12 @@
 			var windowHalfY = window.innerHeight / 2;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
 				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 1000;
@@ -100,14 +101,22 @@
 
 			//
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 				renderer.render( scene, camera );
 
-				stats.update();
 			}
 
 		</script>
diff --git a/examples/canvas_particles_sprites.html b/examples/canvas_particles_sprites.html
index e7653276..3414aacf 100644
--- a/examples/canvas_particles_sprites.html
+++ b/examples/canvas_particles_sprites.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - particles - sprites</title>
+		<title>three.js canvas - particles - sprites</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
@@ -19,8 +19,10 @@
 	<body>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
-		<script type="text/javascript" src="js/Tween.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
+		<script type="text/javascript" src="js/Tween.js"></script>
 
 		<script type="text/javascript">
 
@@ -32,12 +34,12 @@
 			var windowHalfY = window.innerHeight / 2;
 
 			init();
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
 				camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1000;
@@ -76,7 +78,6 @@
 				var canvas = document.createElement( 'canvas' );
 				canvas.width = 16;
 				canvas.height = 16;
-				canvas.loaded = true;
 
 				var context = canvas.getContext( '2d' );
 				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
@@ -136,7 +137,9 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
@@ -147,12 +150,23 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			//
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				TWEEN.update();
 
@@ -161,7 +175,6 @@
 
 				renderer.render( scene, camera );
 
-				stats.update();
 			}
 
 		</script>
diff --git a/examples/canvas_particles_waves.html b/examples/canvas_particles_waves.html
index 15153bef..50487fdc 100644
--- a/examples/canvas_particles_waves.html
+++ b/examples/canvas_particles_waves.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - particles - waves</title>
+		<title>three.js canvas - particles - waves</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 		<style type="text/css">
@@ -18,6 +18,8 @@
 	</head>
 	<body>
 		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -35,7 +37,7 @@
 			var windowHalfY = window.innerHeight / 2;
 
 			init();
-			setInterval(loop, 1000 / 60);
+			animate();
 
 			function init() {
 
@@ -116,7 +118,16 @@
 
 			//
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
@@ -136,8 +147,6 @@
 
 				renderer.render( scene, camera );
 
-				stats.update();
-
 				count += 0.1;
 
 			}
diff --git a/examples/canvas_performance.html b/examples/canvas_performance.html
index 02e996f5..5d5712ab 100644
--- a/examples/canvas_performance.html
+++ b/examples/canvas_performance.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - geometry - sphere</title>
+		<title>three.js canvas - performance</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -16,7 +16,7 @@
 
 		<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
 
-			<script type="text/javascript" src="../src/Three.js"></script>
+		<script type="text/javascript" src="../src/Three.js"></script>
 		<script type="text/javascript" src="../src/core/Color.js"></script>
 		<script type="text/javascript" src="../src/core/Vector2.js"></script>
 		<script type="text/javascript" src="../src/core/Vector3.js"></script>
@@ -83,6 +83,7 @@
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -103,27 +104,7 @@
 			var windowHalfY = window.innerHeight / 2;
 
 			init();
-
-			/*
-			var accum = 0, result = 0, results = [], amount = 100;
-
-			for ( var i = 0; i < amount; i ++ ) {
-
-				var timer = new Date().getTime();
-
-				loop();
-
-				accum += result = new Date().getTime() - timer;
-				results.push( result );
-			}
-
-			console.log( results );
-			console.log( accum / amount );
-			*/
-
-			// loop();
-
-			setInterval( loop, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -203,11 +184,19 @@
 
 			//
 
-			function loop() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
 
 				renderer.render( scene, camera );
 
-				stats.update();
 			}
 
 		</script>
diff --git a/examples/canvas_sandbox.html b/examples/canvas_sandbox.html
index 5c8b81b8..45c2b2ac 100644
--- a/examples/canvas_sandbox.html
+++ b/examples/canvas_sandbox.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html lang="en">
 	<head>
-		<title>three.js - geometry - sphere</title>
+		<title>three.js canvas - sandbox</title>
 		<meta charset="utf-8">
 		<style type="text/css">
 			body {
@@ -83,6 +83,7 @@
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
 		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
@@ -114,7 +115,7 @@
 			var debugContext;
 
 			init();
-			setInterval( render, 1000 / 60 );
+			animate();
 
 			function init() {
 
@@ -259,6 +260,15 @@
 
 			//
 
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
 			function render() {
 
 				if ( moveForward ) camera.position.z -= 5;
@@ -313,9 +323,7 @@
 				debugContext.closePath();
 				debugContext.stroke();
 
-				renderer.render(scene, camera);
-
-				stats.update();
+				renderer.render( scene, camera );
 
 			}
 
diff --git a/src/extras/MiscUtils.js b/src/extras/MiscUtils.js
deleted file mode 100644
index 7de3240b..00000000
--- a/src/extras/MiscUtils.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * @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);
-           };
-  })();
-};
\ No newline at end of file
diff --git a/utils/build.py b/utils/build.py
index 4c983b3a..dffdf1f6 100644
--- a/utils/build.py
+++ b/utils/build.py
@@ -82,7 +82,6 @@ EXTRAS_FILES = [
 'extras/Detector.js',
 'extras/GeometryUtils.js',
 'extras/ImageUtils.js',
-'extras/MiscUtils.js',
 'extras/SceneUtils.js',
 'extras/ShaderUtils.js',
 'extras/primitives/Cube.js',
@@ -396,7 +395,7 @@ def main(argv=None):
 	debug = args.debug
 
 	config = [
-	['Three', 	  	'includes_common', COMMON_FILES, args.common],
+	['Three', 	'includes_common', COMMON_FILES, args.common],
 	['ThreeCanvas', 'includes_canvas', CANVAS_FILES, args.canvas],
 	['ThreeWebGL',  'includes_webgl',  WEBGL_FILES,  args.webgl],
 	['ThreeSVG', 	'includes_svg',    SVG_FILES,    args.svg],
