Wondering what’s next for npm?Check out our public roadmap! »

    @react-vertex/orbit-camera
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    @react-vertex/orbit-camera

    license npm version bundlephobia

    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)
    ...

    Install

    npm i @react-vertex/orbit-camera

    DownloadsWeekly Downloads

    5

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    76.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar