Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

All canvas examples are now using RequestAnimationFrame.js
Webgl examples next.

Mr.doob 14 years ago
parent
a4ee822b10
commit
5aa43cd1cd
26 changed files with 390 additions and 221 deletions
Split View Show Diff Stats
  1. 18 6
      examples/canvas_camera_orthographic.html
  2. 17 8
      examples/canvas_geometry_birds.html
  3. 2 2
      examples/canvas_geometry_cube.html
  4. 17 9
      examples/canvas_geometry_earth.html
  5. 0 1
      examples/canvas_geometry_panorama.html
  6. 34 24
      examples/canvas_geometry_terrain.html
  7. 18 6
      examples/canvas_interactive_cubes.html
  8. 17 5
      examples/canvas_interactive_cubes_tween.html
  9. 16 5
      examples/canvas_interactive_voxelpainter.html
  10. 18 6
      examples/canvas_lights_pointlights.html
  11. 18 6
      examples/canvas_lights_pointlights_smooth.html
  12. 20 17
      examples/canvas_lines.html
  13. 22 19
      examples/canvas_lines_sphere.html
  14. 13 6
      examples/canvas_materials.html
  15. 17 11
      examples/canvas_materials_depth.html
  16. 16 5
      examples/canvas_materials_normal.html
  17. 16 4
      examples/canvas_materials_reflection.html
  18. 19 10
      examples/canvas_materials_video.html
  19. 14 4
      examples/canvas_particles_floor.html
  20. 15 6
      examples/canvas_particles_random.html
  21. 21 8
      examples/canvas_particles_sprites.html
  22. 14 5
      examples/canvas_particles_waves.html
  23. 14 25
      examples/canvas_performance.html
  24. 13 5
      examples/canvas_sandbox.html
  25. 0 16
      src/extras/MiscUtils.js
  26. 1 2
      utils/build.py

+ 18 - 6
examples/canvas_camera_orthographic.html
View File 

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

+ 17 - 8
examples/canvas_geometry_birds.html
View File 

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

+ 2 - 2
examples/canvas_geometry_cube.html
View File 

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

+ 17 - 9
examples/canvas_geometry_earth.html
View File 

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

+ 0 - 1
examples/canvas_geometry_panorama.html
View File 

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

+ 34 - 24
examples/canvas_geometry_terrain.html
View File 

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

+ 18 - 6
examples/canvas_interactive_cubes.html
View File 

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

+ 17 - 5
examples/canvas_interactive_cubes_tween.html
View File 

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

+ 16 - 5
examples/canvas_interactive_voxelpainter.html
View File 

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

+ 18 - 6
examples/canvas_lights_pointlights.html
View File 

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

+ 18 - 6
examples/canvas_lights_pointlights_smooth.html
View File 

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

+ 20 - 17
examples/canvas_lines.html
View File 

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

+ 22 - 19
examples/canvas_lines_sphere.html
View File 

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

+ 13 - 6
examples/canvas_materials.html
View File 

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

+ 17 - 11
examples/canvas_materials_depth.html
View File 

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

+ 16 - 5
examples/canvas_materials_normal.html
View File 

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

+ 16 - 4
examples/canvas_materials_reflection.html
View File 

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

+ 19 - 10
examples/canvas_materials_video.html
View File 

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

+ 14 - 4
examples/canvas_particles_floor.html
View File 

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

+ 15 - 6
examples/canvas_particles_random.html
View File 

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

+ 21 - 8
examples/canvas_particles_sprites.html
View File 

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

+ 14 - 5
examples/canvas_particles_waves.html
View File 

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

+ 14 - 25
examples/canvas_performance.html
View File 

@@ -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() {
 
 
-				renderer.render( scene, camera );
 
+				requestAnimationFrame( animate );
 
 
+				render();
 
 				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				renderer.render( scene, camera );
 
+
 
 			}
 
 
 		</script>

+ 13 - 5
examples/canvas_sandbox.html
View File 

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

+ 0 - 16
src/extras/MiscUtils.js
View File 

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

+ 1 - 2
utils/build.py
View File 

@@ -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],