CAD Camera Controls

Resources
, , ,
1

Just sharing a new camera library I developed while working on a CAD-related
project: https://www.npmjs.com/package/cad-camera-controls

I found none of the existing camera libraries had the right settings
to mimic the cameras in CAD platforms like Fusion or Onshape. The main feature
I needed was zoom/dolly to cursor while keeping a fixed pivot point.

The short version of why existing controls didn’t fit: OrbitControls (and most
third-party controls) are look-at based — the camera always faces a target,
rotation and zoom both happen around it, and zoom-to-cursor works by moving
the target. CAD cameras decouple these: the pivot is purely a rotation center,
the camera isn’t forced to look at it, and dollying toward the cursor leaves
the pivot exactly where it is. Pan moves the camera without dragging the pivot
along.

It also has other features like:

  • Three zoom modes: dolly, fov, or auto
    • auto dollies until it reaches
      the minimum distance, then seamlessly switches to narrowing the FOV (and
      reverses on the way back out)
  • Two orbit styles: turntable (horizontal drag rotates about the scene’s
    world-up axis, so the horizon always stays level) and free (horizontal
    drag rotates about the camera’s own up axis, like Onshape’s default rotate), plus a levelHorizon() method to remove
    accumulated roll
  • Animated transitions: fitToBox / fitToSphere with padding, and setView
    for view-cube snaps and saved views
  • Fully remappable inputs: mouse buttons with modifier keys, touch gestures,
    and keyboard bindings
  • Works with both perspective and orthographic cameras, including
    cursor-anchored zoom for both
  • Inertial damping, start/change/end events, and iOS Safari pinch
    support

You can check out the demo to see all of the settings, and the npm package has
code examples for both vanilla three.js and React Three Fiber projects.

Demo: CADCameraControls Playground
npm: https://www.npmjs.com/package/cad-camera-controls
GitHub: GitHub - alankalb/cad-camera-controls · GitHub

MIT licensed. Feedback welcome and contributions welcome!