Show the ray, then show the hits.

This focused contract follows the official raycaster-helper example: three animated capsules share one geometry and material, a bounded Raycaster traverses the scene, and the external RaycasterHelper draws the origin, near/far bounds, ray segment, and hit points.

This route claims the installed WebGPURenderer with explicit WebGL2 fallback labeling, shared CapsuleGeometry and MeshNormalMaterial, animated capsule positions/rotations, Raycaster origin/direction/near/far, the actual @gsimone/three-raycaster-helper package, raycaster.intersectObjects(scene.children), helper updates, bounded sampling, reset, and teardown. The official page layout, exact camera choreography, random light/color path, browser/device backend matrix, and whole-example fidelity remain separate.

Source: official three.js raycaster-helper example · helper package: @gsimone/three-raycaster-helper.