React Regl Orbit Camera

Configurable orbit camera model and controls for react-regl.

Install

npm install --save @psychobolt/react-regl-orbit-camera
# or
yarn add @psychobolt/react-regl-orbit-camera

Examples

See demos. Also check out their sources. Here is one to get you started:

import React from 'react';
import { ReglContainer, Frame } from '@psychobolt/react-regl';
import Camera from '@psychobolt/react-regl-orbit-camera';

import Bunny from './Bunny';

const clear = ({ regl }) => regl.clear({
  color: [0, 0, 0, 1],
});

const center = [0, 2.5, 0];

export default () => (
  <ReglContainer>
    <Frame onFrame={clear}>
      <Camera center={center}>
        <Bunny />
      </Camera>
    </Frame>
  </ReglContainer>
);

The above wraps the view with orbit controls with the bunny's position (0, 2.5, 0). The Camera component computes on control actions (orbit/dolly) and passes the projection and view model matrices to regl's context. Holding left mouse and dragging will orbit the camera around the rabbit. Scrolling the mouse wheel will dolly the camera.

Components

Camera

Props

center?: number[] | number

The position of the camera. Default value is [3, 3, 3].

theta?: number

The initial latitude angle in radians. Default value is 0.

phi?: number

The initial longitude angle in radians. Value should be between -Math.PI / 2 and Math.PI / 2. Default value is 0.

distance? number

The initial distance from the target. Value should be between minDistance and maxDistance. Default value is 10.

up?: number[]

The up direction of the camera. The default value is [0, 1, 0].

minDistance?: number

How far the camera can dolly in. The default value is 0.1.

maxDistance?: number

How far the camera can dolly out. The default value is 1000.

Credits

Credits goes to Mikola Lysenko for the simplified implementation of regl-camera.