threejs-interaction_skill

Overview

This skill provides a compact, practical reference for handling user interaction in Three.js scenes. It covers raycasting, mouse and touch input, camera controls, selection systems, drag/transform gizmos, and coordinate conversion. Use it to implement reliable click/hover detection, camera navigation, and object manipulation in interactive 3D apps.

How this skill works

The skill explains how to convert pointer coordinates to normalized device coordinates and cast rays from the camera or arbitrary origins to find intersections with scene objects. It summarizes setup and tuning for Three.js Raycaster, control modules (Orbit, Fly, FirstPerson, PointerLock, Trackball, Map), and transform/drag helpers. It also shows patterns for selection (single, box), hover effects, throttling, and converting between world and screen coordinates.

When to use it

• Detect clicks, taps, or hovers on 3D objects for UI or selection
• Add camera navigation and constraints for exploration (orbit, fly, first-person)
• Implement drag-and-drop, transform gizmos, or direct object manipulation
• Map screen-space UI to world objects or translate screen input to world coordinates
• Optimize interaction for many objects using layers, limited lists, or throttling

Best practices

• Convert pointer coordinates relative to the correct canvas using getBoundingClientRect() to avoid misaligned clicks
• Limit raycasts to specific arrays or layers instead of full scene traversal for performance
• Throttle hover raycasts (e.g., 20 FPS) to reduce CPU usage during mousemove events
• Disable competing controls while dragging or transforming (toggle orbit/controls.enabled)
• Store original material state (color/emissive) in userData before applying hover/selection visuals to allow clean restore

Example use cases

• Click-to-select items in a 3D product configurator and highlight selection with emissive color
• Box-select multiple scene objects for batch operations in an editor
• Pointer-lock or first-person controls for immersive navigation in architectural walkthroughs
• Drag and snap objects to a ground plane using DragControls and ray-plane intersections
• Convert a mesh position to screen coordinates to position HTML labels or HUD elements