Chapter 834: Optimize Lots of Objects, Animated (Manual)

Core Idea

Continuing from merging thousands of boxes into one geometry (which makes moving individual boxes hard), this lesson shows how to animate between multiple whole datasets using morph targets, plus a TweenManager that keeps animation working with on-demand (not continuous) rendering.

Key Concepts

• The trade-off from merging: one merged BufferGeometry draws efficiently but loses the ability to move individual boxes independently.
• Morph targets for whole-dataset animation: build a separate merged geometry per dataset, then attach each one's position (and color) attribute as a morph target on a shared base geometry — every target must have exactly the same vertex count, so datasets with missing values at a given point must be handled consistently across all sets (e.g. omit a box everywhere if any dataset lacks data there).
• Morph influence: instead of showing/hiding meshes, you animate each morph target's influence between 0 and 1 to blend visually from one dataset's shape to another's.
• Animating on-demand rendering: typical tweening libraries (like tween.js) assume a continuous render loop; a small TweenManager wrapper tracks active tweens and reports whether any are still running, so the render loop can keep re-rendering only while an animation is in progress and go idle otherwise.

Code Examples

const baseGeometry = geometries[0];
baseGeometry.morphAttributes.position = geometries.map((geometry, ndx) => {
  const attribute = geometry.getAttribute("position");
  attribute.name = `target${ndx}`;
  return attribute;
});
const material = new THREE.MeshBasicMaterial({ vertexColors: true });
const mesh = new THREE.Mesh(baseGeometry, material);

• What it demonstrates: turning each dataset's merged geometry into a morph target on one shared base geometry.

Key Takeaways

1. Morph targets require every target to have exactly the same vertex count and layout — reconcile datasets (e.g. by omitting missing points everywhere) before building them.
2. Animate a morph target's influence (0→1) rather than swapping mesh visibility to get a smooth visual transition between datasets.
3. A TweenManager-style wrapper that reports "still animating or not" lets you combine a tweening library with render-on-demand instead of forcing continuous rendering.
4. This same morph-target technique generalizes to other "animate between many pre-built shapes" problems, not just this dataset-comparison use case.

Connects To

• Optimize Lots of Objects (manual): the earlier lesson whose single-merged-geometry limitation this chapter works around.
• Aligning HTML Elements to 3D (manual): suggested next step for adding labels to the same globe visualization.