Open code, practice, and notes →
Download source with English comments · for reading
Three.js · 20 Instance Selection and Updates
Series contents · Technology map
Stage: Animation, Instancing, and Render Passes · Editable example · Storage ID: threejs-step-20
Goals and learning outcomes
- Preserve other instances’ colors after selection.
- Select moved instances at their new positions.
Prerequisites
Prerequisite concepts: Shared Drawing, Instance Buffers. Prepare the result files and observation notes from unit 19.
Key concepts and explanations
Instance Identification
Raycaster results may contain instanceId. Map it to a data id to preserve individual selection.
Bounds Updates
Review bounds when instance positions change. Stale bounds may affect culling or selection.
Practice setup
First read the execution-scope guidance on the example screen. The following environment is for extending the assignment in a separate project. Implement it yourself in an HTML and ES module project served by a separate local HTTP development server. Pin three and addons to the same installed version and record it.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Prepare day-20.js and index.html in the external exercise project. Convert instanceId to a data id and apply setColorAt to the selected instance.
- After moving positions, upload instanceMatrix and instanceColor and recalculate bounds.
- Save the output under the First instance input condition, then run again under the Last instance condition. Expected: Only that item is highlighted and its data id matches. Compare with the actual screen and logs, and record the actual result and reasons for any differences in day-20-notes.md.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Selection target | First instance | Last instance | Only that item is highlighted and its data id matches. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Preserve other instances’ colors after selection.
- Select moved instances at their new positions.
Self-check
- Is it safe to use instanceId as a permanent data id?
- Where do you set needsUpdate after setColorAt?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
This is an editable browser experiment. Measurements vary with the current device and browser.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Instancing Basics · Next: Offscreen Objects and Level of Detail