More examples conversion to requestAnimationFrame.

Separate commit to have a clean slate for a different changes I want to try in meanwhile.

examples/webgl_geometry_minecraft.html

@@ -45,6 +45,7 @@
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/MiscUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
@@ -56,6 +57,8 @@
 				document.getElementById( 'container' ).innerHTML = "";
 				
 			}
+			
+			window.onload = init;
 
 			var container, stats;
 
@@ -77,10 +80,6 @@
 			var windowHalfY = window.innerHeight / 2;
 
 
-			init();
-			setInterval( loop, 1000 / 60 );
-
-
 			function init() {
 
 				container = document.getElementById( 'container' );
@@ -188,19 +187,11 @@
 
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 				document.addEventListener( 'keyup', onDocumentKeyUp, false );
+				
+				loop();
 
 			}
 
-			function generateAO( image, sides ) {
-
-				var c = document.createElement('canvas');
-				c.width = image.width;
-				c.height = image.height;
-				c.getContext( "2d" ).drawImage( image, 0, 0 );
-
-				return c;
-
-			}
 
 			function loadTexture( path ) {
 
@@ -308,6 +299,8 @@
 
 			function loop() {
 
+				requestAnimationFrame( loop, renderer.domElement );
+				
 				if ( moveForward ) camera.translateZ( - 15 );
 				if ( moveBackward ) camera.translateZ( 15 );
 

examples/webgl_geometry_minecraft_ao.html

@@ -52,6 +52,7 @@
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 		<script type="text/javascript" src="../src/extras/GeometryUtils.js"></script>
+		<script type="text/javascript" src="../src/extras/MiscUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
 		<script type="text/javascript" src="../src/extras/Detector.js"></script>
 
@@ -64,6 +65,8 @@
 				
 			}
 
+			window.onload = init;
+			
 			var fogExp2 = true;
 			
 			var container, stats;
@@ -86,10 +89,6 @@
 			var windowHalfY = window.innerHeight / 2;
 
 
-			init();
-			setInterval( loop, 1000 / 60 );
-
-
 			function init() {
 
 				container = document.getElementById( 'container' );
@@ -487,6 +486,8 @@
 				document.getElementById( "bao" ).addEventListener( "click",  function() { mat.map = m_ao.map; }, false );
 				document.getElementById( "baot" ).addEventListener( "click", function() { mat.map = m_aot.map; }, false );
 				document.getElementById( "bt" ).addEventListener( "click",   function() { mat.map = m_t.map; }, false );
+				
+				loop();
 
 			}
 
@@ -880,6 +881,8 @@
 			}
 
 			function loop() {
+			
+				requestAnimationFrame( loop, renderer.domElement );
 
 				if ( moveForward )  camera.translateZ( - 15 );
 				if ( moveBackward ) camera.translateZ( 15 );

examples/webgl_lines_colors.html

@@ -50,6 +50,8 @@
 		
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
+			window.onload = init;
+			
 			var mouseX = 0, mouseY = 0,
 
 			windowHalfX = window.innerWidth / 2,
@@ -63,8 +65,6 @@
 
 			var cameraOrtho, sceneScreen, rtTexture1, rtTexture2, rtTexture3, materialScreen, materialConvolution, blurx, blury, quadScreen;
 			
-			init();
-			setInterval( loop, 1000 / 60 );
 
 			function init() {
 
@@ -197,6 +197,8 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				
+				loop();
+				
 			}
 
 			// port of Processing Java code by Thomas Diewald
@@ -274,6 +276,8 @@
 			//
 
 			function loop() {
+			
+				requestAnimationFrame( loop, renderer.domElement );
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;

examples/webgl_lines_cubes.html

@@ -50,6 +50,8 @@
 		
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
+			window.onload = init;
+			
 			var mouseX = 0, mouseY = 0,
 
 			windowHalfX = window.innerWidth / 2,
@@ -59,9 +61,6 @@
 
 			stats;
 
-			init();
-			setInterval( loop, 1000 / 60 );
-
 			function init() {
 
 				var i, material, container;
@@ -125,6 +124,9 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+				
+				loop();
+				
 			}
 
 			// port of Processing Java code by Thomas Diewald
@@ -203,6 +205,8 @@
 
 			function loop() {
 
+				requestAnimationFrame( loop, renderer.domElement );
+				
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 				camera.updateMatrix();

examples/webgl_lines_sphere.html

@@ -49,6 +49,8 @@
 		
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
 
+			window.onload = init;
+			
 			var SCREEN_WIDTH = window.innerWidth,
 				SCREEN_HEIGHT = window.innerHeight,
 
@@ -63,9 +65,6 @@
 
 			stats;
 
-			init();
-			setInterval( loop, 1000 / 60 );
-
 			function init() {
 
 				var container;
@@ -129,6 +128,8 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 				
+				loop();
+				
 			}
 
 			function onDocumentMouseMove(event) {
@@ -166,6 +167,8 @@
 
 			function loop() {
 
+				requestAnimationFrame( loop, renderer.domElement );
+				
 				//camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 				camera.updateMatrix();