create-orbit-camera
v0.0.2
Published
Create a camera that orbits a target
Downloads
14
Maintainers
chinedufnReadme
create-orbit-camera 
A standalone, stateless orbital camera API
Background / Initial Motivation
create-orbit-camera aims to provide an API for orbital camera management while letting the consumer control the relevant state.
Thus, create-orbit-camera is a stateless abstraction around the math required to create an orbital camera's view matrix.
Your camera can orbit and look at some target position in your scene (world space).
When combined with event listeners on DOM canvas elements, or other types of controls, create-orbit-camera can help to power
camera's for demos and third person games.
To Install
$ npm install --save create-orbit-cameraDemo
To run the demo locally:
$ git clone https://github.com/chinedufn/create-orbit-camera
$ cd create-orbit-camera
$ npm install
$ npm run demoChanges to the demo and src directories will now live reload in your browser.
Usage
var createCamera = require('create-orbit-camera')
var cameraData = createCamera({
position: [0, 3, 5],
target: [0, 0, 0],
xRadians: Math.PI / 2,
yRadians: -Math.PI / 3.5
})
console.log(cameraData.viewMatrix) // ...
console.log(cameraData.position) // ...API
createCamera(options) -> cameraData
options
options.position
Type: Array[3]
Default: [0, 1, -10]
Your camera's position in world space.
Note: This is your position BEFORE applying your X and Y axis rotations.
options.up
Type: Array[3]
Default: [0, 1, 0]
The up direction. This is almost always 1 in the Y direction unless you're doing something very strange.
options.target
Type: Array[3]
Default: [0, 0, 0]
The position in world space that your camera is looking at.
options.xRadians
Type: Number
Default: 0
The number of radians to rotate about your target about the X axis who's origin is at your targets position.
If your thumb is pointed to your left the direction that your fingers rotate is the direction that your camera rotates.
options.yRadians
Type: Number
Default: 0
The number of radians to rotate about your target about the Y axis who's origin is at your targets position.
If your thumb is pointed up the direction that your fingers rotate is the direction that your camera rotates.
Returns -> cameraData
cameraData.position
Type: Array[3]
You can use the calculated camera's position when projecting rays into your scene.
One example use case for this is mouse picking.
cameraData.viewMatrix
You can use this 4x4 view matrix to transform your scene into your camera's eye matrix.
Type: Array[16]
See Also
References
License
MIT