add-mouse-driven-orbit

name	add-mouse-driven-orbit
description	Add restrained mouse-driven orbit and parallax depth to a Three.js hero by damping one pointer target and splitting it across camera translation, look-at, and small object rotations. Use for passive cinematic 3D heroes, pointer-responsive scenes, organic model parallax, and interactive depth where OrbitControls would feel like a product viewer.

Add Mouse-Driven Orbit

Turn one damped pointer target into a shallow camera arc and smaller object rotations. Reach for threejs with OrbitControls when the user must inspect a product directly; reach for build-game-camera-controls for drag, zoom, occlusion, or gameplay cameras. This Skill is passive cinematic depth, not direct manipulation.

Extracted from inner-green-3d.html, where a procedural moss root had to turn toward the pointer without sliding away from the headline, cards, and pinned silhouette landmarks.

Record intent, not layout

In the pointer handler, write normalized coordinates only:

function recordPointer(event) {
  if (event.pointerType === "touch") return;
  target.x = (event.clientX / viewport.width) * 2 - 1;
  target.y = (event.clientY / viewport.height) * 2 - 1;
}

Cache the interactive rectangle from . Do not call for every layer on every ; synchronous layout turns a light effect into frame spikes.