SmoothOrbitControls

A drop-in OrbitControls replacement for React Three Fiber with smooth, damped zoom.

What it does

Default drei OrbitControls zoom in discrete, snappy steps. SmoothOrbitControls keeps the familiar orbit/pan behaviour but replaces the abrupt zoom with a smooth, inertial one by pairing OrbitControls (for rotation and panning, with its own zoom disabled) with TrackballControls (for damped zoom). A useFrame effect keeps the TrackballControls target aligned with the OrbitControls target so the camera stays consistent.

It is a single, self-contained TypeScript/React component that accepts every prop the standard OrbitControls does, plus two extras to tune the zoom feel.

Installation

There is no npm package: simply download SmoothOrbitControls.tsx and drop it into your project.

It relies on the React Three Fiber stack as peer dependencies, so make sure they are installed:

npm install three @react-three/fiber @react-three/drei

Usage

Use it exactly like drei's OrbitControls, inside your <Canvas>:

import { Canvas } from '@react-three/fiber';
import SmoothOrbitControls from './SmoothOrbitControls';

export default function Scene() {
  return (
    <Canvas>
      {/* your meshes, lights, etc. */}
      <SmoothOrbitControls zoomSpeed={0.07} zoomDamping={0.03} />
    </Canvas>
  );
}

Props

Prop	Type	Default	Description
zoomSpeed	number	0.07	Speed of the smooth zoom.
zoomDamping	number	0.03	Dynamic damping factor applied to the zoom.
...props	—	—	Any standard drei OrbitControlsProps (spread onto the underlying OrbitControls).

Features

• Smooth, inertial zoom instead of the default stepped zoom.
• Drop-in API — accepts all OrbitControls props.
• Tunable feel via zoomSpeed and zoomDamping.
• Single file, zero extra dependencies beyond the R3F stack you already use.

Tech stack

• React + TypeScript
• @react-three/fiber
• @react-three/drei
• three.js

Credits

Built by niccolofanton. Powered by the pmndrs ecosystem.