Make example animations framerate independent

examples/debug-color/index.html

@@ -50,9 +50,12 @@
     modifiers.setDepthColor(butterfly2, 1, 2, true);
     scene.add(butterfly2);
 
+    let lastTime;
     renderer.setAnimationLoop(function animate(time) {
-      butterfly.rotation.y += 0.01;
-      butterfly2.rotation.x += 0.01;
+      const deltaTime = time - (lastTime || time);
+      lastTime = time;
+      butterfly.rotation.y += deltaTime / 2500;
+      butterfly2.rotation.x += deltaTime / 2500;
       renderer.render(scene, camera);
     });
   </script>

examples/envmap/index.html

@@ -80,10 +80,12 @@
     duck.position.set(0, 0.45, -0.4);
     scene.add(duck);
 
-    let renderedEnvMap = false;
+    let lastTime;
     renderer.setAnimationLoop(function animate(time) {
+      const deltaTime = time - (lastTime || time);
+      lastTime = time;
       renderer.render(scene, camera);
-      duck.rotation.y += 0.01;
+      duck.rotation.y += deltaTime / 2500;
 
       // Make sure we only launch async renderEnvMap once
       if (!renderedEnvMap) {

examples/multiple-viewpoints/index.html

@@ -106,10 +106,13 @@
       await createViewpoint(new THREE.Vector3(0.5, -1, -3), new THREE.Vector2(0.5, -0.5), 1),
     ];
 
+    let lastTime;
     renderer.setAnimationLoop(function animate(time) {
+      const deltaTime = time - (lastTime || time);
+      lastTime = time;
       scene.background.set(0x000000);
       renderer.render(scene, camera);
-      butterfly.rotation.y += 0.01;
+      butterfly.rotation.y += deltaTime / 2500;
 
       // Render each viewpoint (with a different background each)
       for (let i = 0; i < viewpoints.length; i++) {