@react-vertex/orbit-camera

`@react-vertex/orbit-camera`

Documentation and Examples

React hooks for basic orbit style perspective camera and controls.

Install via npm:

npm install @react-vertex/orbit-camera

Importing:

import {
  useOrbitCamera,
  useOrbitControls,
} from '@react-vertex/orbit-camera'

`useOrbitCamera(fov, aspect, near?, far?, configure?)` => `camera`

React hook for creating an orbit camera.

Arguments:

fov: Number defining the field of view in degrees (not radians).

aspect: Number defining the aspect ratio.

near (optional): Number for the camera frustum near plane (defaults to 1).

far (optional): Number for the camera frustum far plane (defaults to 1000).

configure (optional): Function to configure the instance before being returned. Changes to this parameter will not cause the hook to update, so you can provide an in-line function.

Returns:

camera: The camera instance.

Example Usage:

import { useCanvasSize } from '@react-vertex/core'
import { useOrbitCamera, useOrbitControls } from '@react-vertex/orbit-camera'

...
  const { width, height } = useCanvasSize()
  
  const camera = useOrbitCamera(55, width / height, 1, 1000, c => {
    c.setPosition([0, 0, 25])
  })
  useOrbitControls(camera)
...

Set userRotate to false to disable rotation in x and y (orbit camera only rotates in x and y).
Set userRotateX to false to disable only rotation in x.
Set userRotateY to false to disable only rotation in y.
Set userDolly to false to disable dolly function.

  const camera = useOrbitCamera(55, width / height, 1, 5000, c => {
    c.setPosition([0, 0, 500])
    c.userRotate = false
  })

`useOrbitControls(camera, configure?)` => `controls`

React hook to setup camera controls.

Arguments:

camera: An instance of the orbit camera.

configure (optional): Function to configure the instance before being returned. Changes to this parameter will not cause the hook to update, so you can provide an in-line function.

Returns:

controls: The controls instance.

Example Usage:

import { useCanvasSize } from '@react-vertex/core'
import { useOrbitCamera, useOrbitControls } from '@react-vertex/orbit-camera'

...
  const { width, height } = useCanvasSize()
  
  const camera = useOrbitCamera(55, width / height, 1, 1000, c => {
    c.setPosition([0, 0, 25])
  })
  useOrbitControls(camera)
...

@react-vertex/orbit-camera