Three.js Interaction Systems
Make 3D interaction predictable, state-driven, responsive, and accessible.
Read references/interaction-patterns.md before changing camera controls,
selection, manipulation, configuration, annotations, or general app UI.
For model axes, authoritative transforms, constrained manipulation, or surface
queries, also read ../../references/spatial-contracts.md.
Workflow
- Define the primary user task and supported input methods.
- Choose one camera/control owner and explicit transition rules.
- Keep application state outside transient Three.js object state.
- Implement raycast or GPU picking only at interaction boundaries, with clear
hover, focus, selected, disabled, and error feedback.
- Add manipulation, configuration, annotations, playback, or navigation as
task-specific modules.
- Keep semantic HTML controls available for important actions and status.
- Verify pointer, keyboard, touch, resize, cancellation, and loading/error
paths on relevant viewports.
Use ../../references/mint-mcp-assets.md for generated production assets.
Ordinary interface chrome should remain HTML/CSS/SVG/Canvas unless a true 3D
surface is required.
Final Response
Report the interaction model, controls, state ownership, supported input paths,
responsive/accessibility evidence, screenshots, and remaining risks.
1---2name: threejs-interaction-systems3description: Build Three.js app interaction systems including cameras, controls, picking, selection, manipulation, annotations, configuration UI, loading states, responsive input, and accessibility.4---56# Three.js Interaction Systems78Make 3D interaction predictable, state-driven, responsive, and accessible.910Read `references/interaction-patterns.md` before changing camera controls,11selection, manipulation, configuration, annotations, or general app UI.12For model axes, authoritative transforms, constrained manipulation, or surface13queries, also read `../../references/spatial-contracts.md`.1415## Workflow16171. Define the primary user task and supported input methods.182. Choose one camera/control owner and explicit transition rules.193. Keep application state outside transient Three.js object state.204. Implement raycast or GPU picking only at interaction boundaries, with clear21 hover, focus, selected, disabled, and error feedback.225. Add manipulation, configuration, annotations, playback, or navigation as23 task-specific modules.246. Keep semantic HTML controls available for important actions and status.257. Verify pointer, keyboard, touch, resize, cancellation, and loading/error26 paths on relevant viewports.2728Use `../../references/mint-mcp-assets.md` for generated production assets.29Ordinary interface chrome should remain HTML/CSS/SVG/Canvas unless a true 3D30surface is required.3132## Final Response3334Report the interaction model, controls, state ownership, supported input paths,35responsive/accessibility evidence, screenshots, and remaining risks.
mintdotgg