@psychobolt/react-regl-orbit-camera v0.0.4
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.