Changed some examples to be framerate independent.

These ran too fast with v-sync off.

examples/misc_lights_test.html

@@ -31,7 +31,7 @@
 			<span id="rwebgl" class="button">WebGL renderer</span>
 			<br/>
 
-			<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
+			<p>Best viewed in Chrome or Firefox using WebGL renderer.
 			<p>Canvas renderer is very slow on anything other than Chrome.
 		</div>
 
@@ -62,6 +62,10 @@
 			var render_canvas = 1, render_gl = 1;
 			var has_gl = 0;
 
+			var lightAdded = false;
+
+			var clock = new THREE.Clock();
+
 			var bcanvas = document.getElementById( 'rcanvas' );
 			var bwebgl = document.getElementById( 'rwebgl' );
 
@@ -180,25 +184,24 @@
 
 			}
 
-			var r = 0, counter = 0;
-
 			function render() {
 
-				if ( counter == 30 ) {
+				var delta = clock.getDelta();
+				var r = clock.getElapsedTime();
+
+				if ( ! lightAdded && r >= 3.0 ) {
 
 					scene.add( directionalLight );
 
 					materialTorus.needsUpdate = true;
 					materialSpheres.needsUpdate = true;
 
-				} else {
-
-					counter ++;
+					lightAdded = true;
 
 				}
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 				camera.lookAt( scene.position );
 
@@ -210,15 +213,15 @@
 
 						if ( i % 3 == 1 )
 
-							object.rotation.z += 0.05;
+							object.rotation.z += 1.5 * delta;
 
 						else if ( i % 3 == 2 )
 
-							object.rotation.y += 0.05;
+							object.rotation.y += 1.5 * delta;
 
 						else if ( i % 3 == 0 )
 
-							object.rotation.x += 0.05;
+							object.rotation.x += 1.5 * delta;
 
 					}
 
@@ -228,8 +231,6 @@
 				lightMesh.position.x = 200 * Math.cos( r );
 				lightMesh.position.z = 200 * Math.sin( r );
 
-				r += 0.1;
-
 				if ( render_canvas ) canvasRenderer.render( scene, camera );
 				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
 

examples/webgl_camera.html

@@ -53,8 +53,6 @@
 			var cameraPerspective, cameraOrtho;
 			var cameraPerspectiveHelper, cameraOrthoHelper;
 
-			var r = 0;
-
 			init();
 			animate();
 
@@ -211,6 +209,8 @@
 
 			function render() {
 
+				var r = Date.now() * 0.0005;
+
 				mesh.position.x = 700 * Math.cos( r );
 				mesh.position.z = 700 * Math.sin( r );
 				mesh.position.y = 700 * Math.sin( r );
@@ -251,8 +251,6 @@
 				renderer.setViewport( SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT );
 				renderer.render( scene, camera );
 
-				r += 0.01;
-
 			}
 
 

examples/webgl_lights_pointlights.html

@@ -52,6 +52,8 @@
 			light1, light2, light3, light4,
 			object, loader;
 
+			var clock = new THREE.Clock();
+
 			init();
 			animate();
 
@@ -131,8 +133,9 @@
 			function render() {
 
 				var time = Date.now() * 0.0005;
+				var delta = clock.getDelta();
 
-				if( object ) object.rotation.y -= 0.01;
+				if( object ) object.rotation.y -= 0.5 * delta;
 
 				light1.position.x = Math.sin( time * 0.7 ) * 30;
 				light1.position.y = Math.cos( time * 0.5 ) * 40;

examples/webgl_loader_collada.html

@@ -131,11 +131,15 @@
 			//
 
 			var t = 0;
+			var clock = new THREE.Clock();
+
 			function animate() {
 
+				var delta = clock.getDelta();
+
 				requestAnimationFrame( animate );
 
-				if ( t > 30 ) t = 0;
+				if ( t > 1 ) t = 0;
 
 				if ( skin ) {
 
@@ -152,9 +156,9 @@
 
 					}
 
-					skin.morphTargetInfluences[ Math.floor( t ) ] = 1;
+					skin.morphTargetInfluences[ Math.floor( t * 30 ) ] = 1;
 
-					t += 0.5;
+					t += delta;
 
 				}
 

examples/webgl_shader2.html

@@ -183,6 +183,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
+			var clock = new THREE.Clock();
+
 			init();
 			animate();
 
@@ -274,13 +276,15 @@
 
 			function render() {
 
-				uniforms1.time.value += 0.05;
-				uniforms2.time.value = ( Date.now() - start_time ) / 1000;
+				var delta = clock.getDelta();
+
+				uniforms1.time.value += delta * 5;
+				uniforms2.time.value = clock.elapsedTime;
 
 				for( var i = 0; i < meshes.length; ++ i ) {
 
-					meshes[ i ].rotation.y += 0.01 * ( i % 2 ? 1 : -1 );
-					meshes[ i ].rotation.x += 0.01 * ( i % 2 ? -1 : 1 );
+					meshes[ i ].rotation.y += delta * 0.5 * ( i % 2 ? 1 : -1 );
+					meshes[ i ].rotation.x += delta * 0.5 * ( i % 2 ? -1 : 1 );
 
 				}