All canvas examples are now using RequestAnimationFrame.js

Webgl examples next.
2026-08-09 04:56:01 +10:00 · 2011-02-22 01:54:03 +00:00
parent a4ee822b10
commit 5aa43cd1cd
26 changed files with 390 additions and 221 deletions
@@ -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>
@@ -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>
@@ -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 );

 			}

@@ -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();

 			}

@@ -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">
@@ -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>

@@ -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>
@@ -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>
@@ -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>
@@ -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 );

 			}

@@ -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 );

 			}

@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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 );

 			}

@@ -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 );

 			}

@@ -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();

 			}

@@ -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>
@@ -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>
@@ -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>
@@ -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;

 			}
@@ -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>
@@ -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 );

 			}

@@ -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);
-           };
-  })();
-};
@@ -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],