THREE.JS / FOUNDATIONS 94

Draw a frustum. Read the centers.

The official selection helper turns a 2D rectangle into a 3D frustum. Compare camera depth, center-point semantics, and instance IDs without hiding the lifecycle.

Initializing -

Preparing the renderer and selection scene.

Objects: -
Instances: -
Batches: -
Depth: -
Camera: -

Selection contractnone

Camera projection Preset rectangle perspective deep

Drag on the scene to supply start/end NDC points. Selection tests object centers, not full bounds.

Returned selectioncollection + IDs

object collectionnone

instance IDsnone

batch IDsnone

Regular meshes appear in collection; InstancedMesh and BatchedMesh hits stay in instances[uuid] and batches[uuid].

Reusable selection lifecycle

pointer rectangle->NDC endpoints->SelectionBox.select()->center tests->restore

SelectionHelper owns only the DOM rectangle; the scene owns materials, selection state, and resource release.

Drag directly on the canvas. Orthographic selection ignores deep; perspective selection uses it as a far cap. Add ?forceWebGL=1 for an explicit WebGL2 comparison.

SelectionBox docs · SelectionHelper docs · Pinned example

Next: typed animation tracks ->

LAB 94 / BOX SELECTION