Skip to content

chinedufn/create-orbit-camera

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

create-orbit-camera npm version Build Status

A standalone, stateless orbital camera API

View live demo

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-camera

Demo

To run the demo locally:

$ git clone https://github.com/chinedufn/create-orbit-camera
$ cd create-orbit-camera
$ npm install
$ npm run demo

Changes 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

Releases

No releases published

Packages

No packages published