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() each 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 handlers to touchstart on the renderer canvas.

OrbitControls rotates the camera around a target point, ideal for model viewers and configurators. PointerLockControls provides first-person mouse-look for games and walkthroughs, requiring manual WASD movement logic.

Raycasting every mousemove event against the whole scene is expensive. Throttle handlers to around 20fps, restrict intersection checks to a list of clickable objects, and use layers or simplified invisible collision meshes.

Clone the object's world position, call vector.project(camera), then map the result from normalized coordinates to pixel coordinates using window dimensions. Update the element's left and top styles each frame.