Fix a repeating bug in lession threejs-optimize-lots-of-objects-animated

threejs/lessons/threejs-optimize-lots-of-objects-animated.md

@@ -384,19 +384,18 @@ And then create a `Tween` to animate the influences.
 ```js
 // show the selected data, hide the rest
 function showFileInfo(fileInfos, fileInfo) {
-  fileInfos.forEach((info) => {
++  const targets = {};
+-  fileInfos.forEach((info) => {
++  fileInfos.forEach((info, i) => {
     const visible = fileInfo === info;
 -    info.root.visible = visible;
     info.elem.className = visible ? 'selected' : '';
-+    const targets = {};
-+    fileInfos.forEach((info, i) => {
-+      targets[i] = info === fileInfo ? 1 : 0;
-+    });
-+    const durationInMs = 1000;
-+    new TWEEN.Tween(mesh.morphTargetInfluences)
-+      .to(targets, durationInMs)
-+      .start();
++    targets[i] = visible ? 1 : 0;
   });
++  const durationInMs = 1000;
++  new TWEEN.Tween(mesh.morphTargetInfluences)
++    .to(targets, durationInMs)
++    .start();
   requestRenderIfNotRequested();
 }
 ```
@@ -461,19 +460,17 @@ We'll use it to create our `Tween`s.
 ```js
 // show the selected data, hide the rest
 function showFileInfo(fileInfos, fileInfo) {
-  fileInfos.forEach((info) => {
+  const targets = {};
+  fileInfos.forEach((info, i) => {
     const visible = fileInfo === info;
     info.elem.className = visible ? 'selected' : '';
-    const targets = {};
-    fileInfos.forEach((info, i) => {
-      targets[i] = info === fileInfo ? 1 : 0;
-    });
-    const durationInMs = 1000;
--    new TWEEN.Tween(mesh.morphTargetInfluences)
-+    tweenManager.createTween(mesh.morphTargetInfluences)
-      .to(targets, durationInMs)
-      .start();
+    targets[i] = visible ? 1 : 0;
   });
+  const durationInMs = 1000;
+-  new TWEEN.Tween(mesh.morphTargetInfluences)
++  tweenManager.createTween(mesh.morphTargetInfluences)
+    .to(targets, durationInMs)
+    .start();
   requestRenderIfNotRequested();
 }
 ```

threejs/threejs-lots-of-objects-morphtargets-w-colors.html

@@ -394,18 +394,16 @@ function main() {
 
     // show the selected data, hide the rest
     function showFileInfo(fileInfos, fileInfo) {
-      fileInfos.forEach((info) => {
+      const targets = {};
+      const durationInMs = 1000;
+      fileInfos.forEach((info, i) => {
         const visible = fileInfo === info;
         info.elem.className = visible ? 'selected' : '';
-        const targets = {};
-        fileInfos.forEach((info, i) => {
-          targets[i] = info === fileInfo ? 1 : 0;
-        });
-        const durationInMs = 1000;
-        tweenManager.createTween(mesh.morphTargetInfluences)
-          .to(targets, durationInMs)
-          .start();
+        targets[i] = visible ? 1 : 0;
       });
+      tweenManager.createTween(mesh.morphTargetInfluences)
+        .to(targets, durationInMs)
+        .start();
       requestRenderIfNotRequested();
     }
 

threejs/threejs-lots-of-objects-morphtargets.html

@@ -318,18 +318,16 @@ function main() {
 
     // show the selected data, hide the rest
     function showFileInfo(fileInfos, fileInfo) {
-      fileInfos.forEach((info) => {
+      const targets = {};
+      fileInfos.forEach((info, i) => {
         const visible = fileInfo === info;
         info.elem.className = visible ? 'selected' : '';
-        const targets = {};
-        fileInfos.forEach((info, i) => {
-          targets[i] = info === fileInfo ? 1 : 0;
-        });
-        const durationInMs = 1000;
-        tweenManager.createTween(mesh.morphTargetInfluences)
-          .to(targets, durationInMs)
-          .start();
+        targets[i] = visible ? 1 : 0;
       });
+      const durationInMs = 1000;
+      tweenManager.createTween(mesh.morphTargetInfluences)
+        .to(targets, durationInMs)
+        .start();
       requestRenderIfNotRequested();
     }