threejs-interaction

Use THREE.Raycaster with setFromCamera after converting mouse coordinates to normalized device coordinates (-1 to 1). Call intersectObjects on your clickable meshes and read the first result for the closest hit object, point, and face data.

Import OrbitControls from three/addons/controls/OrbitControls.js and instantiate it with your camera and renderer.domElement. Enable damping with controls.enableDamping = true and call controls.update() every animation frame for smooth movement.

Yes, raycasting works with touch events by reading event.touches[0].clientX and clientY, then converting them to normalized device coordinates the same way as mouse input. Attach a touchstart listener to the renderer canvas and call preventDefault to avoid scrolling conflicts.

OrbitControls rotates the camera around a target point and suits model viewers and configurators. PointerLockControls hides the cursor for first-person navigation, making it the right choice for walkthroughs and FPS-style experiences.

Raycasting every mousemove against the full scene is expensive. Throttle handlers to around 20fps, restrict intersection tests to a list of clickable objects, use layers for filtering, and substitute invisible simple collision meshes for complex geometry.