Three.js camera and picking
Makes selection hit the object the player actually points at. It accounts for camera projection, canvas position and overlapping menus, then maps visual objects back to stable game identities.
threejs-camera-picking
See how it helpsWhen is it useful?
Use when clicking an embedded 3D scene selects the wrong object.
What does it help you do?
- Converts canvas-relative pointers into normalized device coordinates.
- Limits raycast candidates and maps objects to stable identifiers.
- Resolves interface input capture before gameplay actions.
Try asking this
In our 3D strategy game, select a unit beside a minimap. Test after resizing, scrolling the page and zooming the camera. The selected unit must match the pointer, decorative meshes must not intercept selection and clicking the minimap must not select behind it.
Detailed documentation
Read the skill’s original instructions, examples and checks in their authored language.
Show less
Three.js — camera picking
Use when implementing Three.js cameras, raycasting, pointer lock, selection or world-space UI.
Version and project gate
Inspect Three.js revision, renderer/backend, addons import style, bundler, color-management conventions, animation loop owner, scene scale, glTF/decoder versions and existing physics wrapper. Never turn a task into an engine upgrade without the user’s intent. Read the version-matching official reference when an API decision depends on it.
Work
Define camera projection, world scale and input action ownership. Convert pointer coordinates from the canvas bounding rectangle into normalized device coordinates. Limit raycast candidates and map render objects to stable game identifiers. Resolve UI capture before gameplay input.
Deliver
A coordinate-space diagram and working select/move/interact behavior under resize and canvas offsets. Keep the change in the existing project structure; separate actual observations from the proposed acceptance scenario below.
Failure to prevent
Using the window size for an embedded canvas creates offset picking; smooth camera visuals must not change simulation authority.
Acceptance scenario
Pick the same object before and after resize, CSS layout shifts, device-pixel-ratio changes and overlapping UI. Follow the project’s execution and verification permissions. If execution or a target device is unavailable, provide the reproduction steps and name the remaining uncertainty; do not mark it passed.
Scope and sources
This skill belongs to Vex. Agent selection is restricted by Orqestria’s assigned-agent policy, including forced skill selection; instruction text alone is not an access control. These are original task workflows researched from official documentation, not a copied or endorsed vendor skill.
Included files 1
SKILL.md