From cd40e139d1e4430f43fda5ee9ecb254b7fb2ec64 Mon Sep 17 00:00:00 2001
From: Diego Marcos Segura <diego.marcos@gmail.com>
Date: Fri, 4 Jul 2025 08:39:25 -0500
Subject: [PATCH] Make example animations framerate independent

---
 examples/debug-color/index.html         | 7 +++++--
 examples/envmap/index.html              | 6 ++++--
 examples/multiple-viewpoints/index.html | 5 ++++-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/examples/debug-color/index.html b/examples/debug-color/index.html
index dd6ffe6..6528464 100644
--- a/examples/debug-color/index.html
+++ b/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>
diff --git a/examples/envmap/index.html b/examples/envmap/index.html
index 77b359b..f3ff903 100644
--- a/examples/envmap/index.html
+++ b/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) {
diff --git a/examples/multiple-viewpoints/index.html b/examples/multiple-viewpoints/index.html
index 0cddf4e..c0c62b2 100644
--- a/examples/multiple-viewpoints/index.html
+++ b/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++) {