Awesome

perspective-camera

demo - source

A high-level 3D perspective camera with a familiar and convenient interface, built from modular pieces.

var createCamera = require('perspective-camera')

var camera = createCamera({
  fov: Math.PI/4,
  near: 0.01,
  far: 100,
  viewport: [0, 0, width, height]
})

//set up our camera
camera.translate([ x, y, z ])
camera.lookAt([ 0, 0, 0 ])
camera.update()

//do some 3D hit-testing
var ray = camera.createPickingRay(mouseInput)

if (ray.intersectsSphere(center, radius)) {
  console.log("Mouse hit 3D sphere!")
}

See demo/canvas.js for a full example, using Canvas2D.

Usage

camera = createCamera([opts])

Creates a new camera with options:

• fov field of view in radians, default Math.PI / 4
• far the far range, default 100
• near the near range, default 1 / 100
• position the camera position, default [0, 0, 0]
• direction the camera direction, default [0, 0, -1]
• up the camera up vector, default [0, 1, 0]
• viewport the screen-space viewport bounds, default [-1, -1, 1, 1]

The viewport is used to determine the aspect ratio of the projection, as well as projecting and ray-picking.

methods

camera.update()

Updates the camera projection and view matrices from the camera's current state (position, direction, viewport, etc).

camera.identity()

Resets the position, direction, up, projection and view values to their identity; the defaults described in the constructor.

camera.translate(vec3)

Translates this camera's position by the given vec3.

camera.lookAt(vec3)

Updates the direction and up to look at the given vec3 target.

camera.project(vec3)

Projects the world space 3D point vec3 into 2D screen-space based on this camera's viewport bounds. Returns a new vec4 point with z and w components representing the computed depth (similar to gl_FragCoord).

camera.unproject(vec3)

Unprojects the screen-space point into 3D world-space. The Z of the screen-space point is between 0 (near plane) and 1 (far plane).

camera.createPickingRay(vec2)

Creates a new picking ray from the 2D screen-space vec2 point (i.e. the mouse).

The ray is an instance of ray-3d, and it can be used for hit-testing.

var ray = camera.createPickingRay(mouse)
if (ray.intersectsSphere(center, radius))
  console.log("Hit!")

properties

camera.viewport

A [x, y, width, height] array defining the viewport in screen space.

camera.projection, camera.view

The 4x4 projection and view matrices, computed after a call to update().

camera.position, camera.direction, camera.up

The current position, direction, and up vectors.

See Also

• camera-unproject
• camera-project
• camera-picking-ray
• ray-3d
• ray-aabb-intersection
• ray-sphere-intersection
• ray-plane-intersection
• ray-triangle-intersection

License

MIT, see LICENSE.md for details.