Changed few more examples to use requestAnimationFrame.

Interestingly, sometimes it seems to go nuts when there are more renderers active at the same time. With uqbiquity, it works ok when using "container" div as element parameter, with large geometry example this doesn't work (calls to loop happen rarely).

examples/misc_uqbiquity_test.html

@@ -87,11 +87,14 @@
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
 		<script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
+		<script type="text/javascript" src="../src/extras/MiscUtils.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript">
 
+			window.onload = init;
+			
 			var SCREEN_WIDTH = window.innerWidth / 3;
 			var SCREEN_HEIGHT = window.innerHeight;
 			var AMOUNT = 100;
@@ -110,11 +113,6 @@
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-			init();
-			// loop();
-			setInterval( loop, 1000 / 60 );
-
-
 			function init() {
 
 				container = document.createElement('div');
@@ -236,6 +234,8 @@
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
+				
+				loop();
 
 			}
 
@@ -247,6 +247,8 @@
 			}
 
 			function loop() {
+				
+				requestAnimationFrame( loop, container );
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;

examples/webgl_geometry_blenderexport_colors.html

@@ -12,6 +12,7 @@
 
 				background-color: #000;
 				margin: 0px;
+				padding: 0px;
 				overflow: hidden;
 			}
 
@@ -22,7 +23,6 @@
 			}
 
 			a {
-
 				color: #0080ff;
 			}
 
@@ -39,6 +39,8 @@
 		<script type="text/javascript">
 
 			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
+			
+			window.onload = init;
 
 			var container, stats;
 
@@ -52,10 +54,6 @@
 			var windowHalfY = window.innerHeight / 2;
 
 
-			init();
-			setInterval( loop, 1000 / 60 );
-
-
 			function init() {
 
 				container = document.getElementById( 'container' );
@@ -86,6 +84,8 @@
 				container.appendChild( stats.domElement );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				
+				loop();
 
 			}
 
@@ -109,6 +109,8 @@
 
 			function loop() {
 
+				requestAnimationFrame( loop, renderer.domElement );
+				
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 

examples/webgl_geometry_dynamic.html

@@ -51,6 +51,8 @@
 				
 			}
 
+			window.onload = init;
+			
 			var container, stats;
 
 			var camera, scene, renderer;
@@ -70,10 +72,6 @@
 			var windowHalfY = window.innerHeight / 2;
 
 
-			init();
-			setInterval( loop, 1000 / 60 );
-
-
 			function init() {
 
 				container = document.getElementById( 'container' );
@@ -146,6 +144,8 @@
 				
 				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 				document.addEventListener( 'keyup', onDocumentKeyUp, false );
+				
+				loop();
 
 			}
 
@@ -224,6 +224,8 @@
 			}
 			
 			function loop() {
+			
+				requestAnimationFrame( loop, renderer.domElement );
 
 				var time = new Date().getTime() * 0.01;