react-angle-3d-viewport

React + React Three Fiber viewport: orbit ring, vertical arc, GLTF “camera” drag targets, central textured image, small orbit preview, optional frozen PNG snapshot (for heavy canvases / remount).

Peer dependencies

• react, react-dom (18+ or 19+)
• three (0.16x–0.17x tested)
• @react-three/fiber (8.x or 9.x)

Install

npm install react-angle-3d-viewport three @react-three/fiber

From this monorepo (workspace):

"dependencies": {
  "react-angle-3d-viewport": "workspace:*"
}

Usage

The default camera model is bundled with the package (dist/assets/arri_camera.glb); the library resolves it via DEFAULT_CAMERA_MODEL_URL (file URL next to the published module). Override cameraModelUrl if you use another asset or your bundler cannot resolve that URL.

import { Angle3DViewport } from 'react-angle-3d-viewport'

;<Angle3DViewport
  rotateDeg={0}
  verticalDeg={0}
  zoom={1}
  onAngleChange={(r, v, z) => {}}
  srcImageUrl="https://example.com/panorama.png"
  srcImageAspectRatio={16 / 9}
/>

React Flow / zoomed UI

Pass the flow viewport zoom so WebGL backing size matches CSS pixels:

import { useViewport } from '@xyflow/react'

const { zoom } = useViewport()
;<Angle3DViewport parentZoom={zoom} cameraModelUrl="..." {...rest} />

Customization

config is a deep partial merged onto DEFAULT_ANGLE_3D_VIEWPORT_CONFIG (colors, orbit limits, lights, grid, DPR, debounce timings, aria labels, classNames.controlHover for nodrag nopan, etc.).

import {
  Angle3DViewport,
  DEFAULT_ANGLE_3D_VIEWPORT_CONFIG,
  resolveAngle3DViewportConfig,
} from 'react-angle-3d-viewport'

const cfg = resolveAngle3DViewportConfig({
  colors: { orbitRing: '#00bcd4' },
  orbit: { zoomMax: 3 },
})

Publish to npm

1. Set name / repository in package.json as needed.
2. cd packages/react-angle-3d-viewport && npm run build
3. npm publish --access public

Build (maintainers)

cd packages/react-angle-3d-viewport && npm run build

Outputs ESM + CJS + types under dist/.