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 intersection's object, point, and distance properties.

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() each animation frame.

Yes, raycasting works with touch events by reading event.touches[0].clientX and clientY, converting them to normalized coordinates, and calling setFromCamera. Attach handlers to touchstart on the renderer canvas and call preventDefault to avoid scrolling.

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

Use DragControls from three/addons with an array of draggable meshes, camera, and canvas. Listen to dragstart, drag, and dragend events to disable OrbitControls while dragging and constrain positions, such as locking movement to the ground plane.