SmoothOrbitControls — smooth, damped zoom for React Three Fiber

This page runs the same three.js scene twice, side by side: on the left drei's stock OrbitControls, on the right SmoothOrbitControls. Scroll or pinch on either half and only the zoom differs. The component keeps drei's OrbitControls for rotation and panning with its own dolly disabled, and delegates the zoom to TrackballControls with dynamic damping, so the wheel produces an inertial glide instead of discrete steps. A useFrame effect copies the orbit target onto the trackball target every frame so the two controls never disagree about the pivot. The zoomSpeed and zoomDamping sliders in the panel retune the feel live, and the readout under each canvas plots the resulting camera distance over time.

SmoothOrbitControls is a single self-contained TypeScript component you drop into an existing React Three Fiber project — there is no npm package, you copy SmoothOrbitControls.tsx from the SmoothOrbitControls repository on GitHub and install three, @react-three/fiber and @react-three/drei as peer dependencies. It accepts every prop stock OrbitControls takes, plus the two zoom knobs.

More of the same kind of thing on the three.js and WebGL demo hub, and the rest of the work on Niccolò Fanton's portfolio.