adjust to match article

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

@@ -304,8 +304,7 @@ function main() {
     const baseGeometry = geometries[0];
     baseGeometry.morphAttributes.position = geometries.map((geometry, ndx) => {
       const attribute = geometry.getAttribute('position');
-      // put the number in front so we can more easily parse it later
-      const name = `${ndx}target`;
+      const name = `target${ndx}`;
       attribute.name = name;
       return attribute;
     });
@@ -368,6 +367,30 @@ function main() {
     const mesh = new THREE.Mesh(baseGeometry, material);
     scene.add(mesh);
 
+    function updateMorphTargets() {
+      // remove all the color attributes
+      for (const {name} of colorAttributes) {
+        baseGeometry.deleteAttribute(name);
+      }
+
+      // three.js provides no way to query this so we have to guess and hope it doesn't change.
+      const maxInfluences = 8;
+
+      // three provides no way to query which morph targets it will use
+      // nor which attributes it will assign them to so we'll guess.
+      // If the algorithm in three.js changes we'll need to refactor this.
+      mesh.morphTargetInfluences
+        .map((influence, i) => [i, influence])            // map indices to influence
+        .sort((a, b) => Math.abs(b[1]) - Math.abs(a[1]))  // sort by highest influence first
+        .slice(0, maxInfluences)                          // keep only top influences
+        .sort((a, b) => a[0] - b[0])                      // sort by index
+        .filter(a => !!a[1])                              // remove no influence entries
+        .forEach(([ndx], i) => {                          // assign the attributes
+          const name = `morphColor${i}`;
+          baseGeometry.setAttribute(name, colorAttributes[ndx].attribute);
+        });
+    }
+
     // show the selected data, hide the rest
     function showFileInfo(fileInfos, fileInfo) {
       fileInfos.forEach((info) => {
@@ -400,30 +423,6 @@ function main() {
     // show the first set of data
     showFileInfo(fileInfos, fileInfos[0]);
 
-    function updateMorphTargets() {
-      // remove all the color attributes
-      for (const {name} of colorAttributes) {
-        baseGeometry.deleteAttribute(name);
-      }
-
-      // three.js provides no way to query this so we have to guess and hope it doesn't change.
-      const maxInfluences = 8;
-
-      // three provides no way to query which morph targets it will use
-      // nor which attributes it will assign them to so we'll guess.
-      // If the algorithm in three.js changes we'll need to refactor this.
-      mesh.morphTargetInfluences
-        .map((influence, i) => [i, influence])            // map indices to influence
-        .sort((a, b) => Math.abs(b[1]) - Math.abs(a[1]))  // sort by highest influence first
-        .slice(0, maxInfluences)                          // keep only top influences
-        .sort((a, b) => a[0] - b[0])                      // sort by index
-        .filter(a => !!a[1])                              // remove no influence entries
-        .forEach(([ndx], i) => {                          // assign the attributes
-          const name = `morphColor${i}`;
-          baseGeometry.setAttribute(name, colorAttributes[ndx].attribute);
-        });
-    }
-
     return updateMorphTargets;
   }