Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.

Three.js Interaction Quick Start Raycaster Basic Raycasting Mouse Position Conversion Touch Support Raycaster Options Efficient Raycasting Camera Controls OrbitControls FlyControls FirstPersonControls PointerLockControls TrackballControls MapControls TransformControls Gizmo for moving/rotating/scaling objects. DragControls Drag objects directly. Selection System Click to Select Box Selection Hover Effects Keyboard Input World Screen Coordinate Conversion World to Screen Screen to World Ray Plane Intersection Event Handling Best Practices Performance Tips 1. Limit raycasts : Throttle mousemove handlers 2. Use layers : Filter raycast targets 3. Simple collision meshes : Use invisible simpler geometry for raycasting 4. Disable controls when not needed : controls.enabled = false 5. Batch updates : Group interaction checks See Also threejs fundamentals Camera and scene setup threejs animation Animating interactions threejs shaders Visual feedback effects

threejs-interaction