node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »



This module is a generic interface which synchronizes several existing view interactions

Each camera controller proceeds by appending events onto a log. The current camera state is obtained by interpolating between these events.


Try a more complete demo here

var now            = require('right-now')
var bunny          = require('bunny')
var perspective    = require('gl-mat4/perspective')
var fit            = require('canvas-fit')
var createContext  = require('gl-context')
var createAxes     = require('gl-axes')
var createMesh     = require('gl-simplicial-complex')
var createCamera   = require('3d-view')
//Set up WebGL 
var canvas = document.createElement('canvas')
window.addEventListener('resize', fit(canvas), false)
var gl = createContext(canvas, {}, render)
//Create objects for rendering 
var bounds = [[-10,-10,-10], [10,10,10]]
var mesh = createMesh(gl, {
    cells: bunny.cells,
    positions: bunny.positions,
    colormap: 'jet'
var axes = createAxes(gl, {
    bounds: bounds,
    tickSpacing: [1,1,1],
    textSize: 0.05
//Set up camera 
var projectionMatrix = new Array(16)
var camera = createCamera({
  center:  [
    0.5*(bounds[0][2]+bounds[1][2]) ],
  eye: [0, 0, bounds[1][2]],
  distanceLimits: [1, 1000]
//Create mode drop down 
var modeSelect = document.createElement('select')
camera.modes.forEach(function(mode) {
  modeSelect.add(new Option(mode, mode))
}) = 'absolute' = '10px' = '10px'['z-index'] = 10
//Hook event listeners 
var lastX = 0, lastY = 0
document.oncontextmenu = function(e) { 
  return false 
modeSelect.addEventListener('change', function(ev) {
canvas.addEventListener('mousemove', function(ev) {
  var dx =  (ev.clientX - lastX) / gl.drawingBufferWidth
  var dy = -(ev.clientY - lastY) / gl.drawingBufferHeight
  if(ev.which === 1) {
    if(ev.shiftKey) {
      camera.rotate(now(), 0, 0, dx)
    } else {
      camera.rotate(now(), dx, dy)
  } else if(ev.which === 3) {
    camera.pan(now(), dx, dy)
  lastX = ev.clientX
  lastY = ev.clientY
canvas.addEventListener('wheel', function(e) {
  camera.pan(now(), 0, 0, e.deltaY)
//Redraw frame 
function render() {
  //Update camera parameters 
  var t = now()
  camera.idle(- 20)
  camera.flush(- 100)
  //Compute parameters 
  var cameraParams = {
    view: camera.computedMatrix,
    projection: perspective(
  //Draw everything 
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)


var camera = require('3d-view')([options])



Idles the camera at time t

  • t is the time to idle at


Flush all events in camera state before time t

  • t is the cut off time for the flush


An array of modes supported by the camera


Sets the camera mode

  • mode is the new mode. Must be either turntable, orbit or matrix


Retrieves the current camera mode

camera.lookAt(t, eye, center, up)

Reset camera position to focus on a specified target

  • t is the time of the event
  • eye is the position of the camera
  • center is the target of the camera
  • up is a vector pointing up

camera.rotate(t, yaw, pitch, roll)

Rotates the camera incrementally by some amount

  • t is the time of the input event
  • yaw is the amount to rotate by along y-axis in radians
  • pitch is the amount to rotate by along x-axis in radians
  • roll is the amount to rotate by along z-axis in radians

camera.pan(t, dx, dy, dz)

Pans the camera in local (view relative) coordinates

  • t is the time of the event
  • dx,dy,dz is the amount to move

camera.translate(t, dx, dy, dz)

Translates the camera in world (absolute global) coordinates

  • t is the time of the event
  • dx,dy,dz is the amount to move

camera.setMatrix(t, matrix)

Sets the camera matrix to some fixed 4x4 matrix

  • t is the time of the event
  • matrix is the new camera matrix

camera.setDistance(t, r)

Sets camera distance at time t

  • t is the time of the event
  • r is the new camera distance

camera.setDistanceLimits(lo, hi)

Sets bounds on the camera distance


Retrieves the camera limits


Recomputes all matrix properties at time t


The computed 4x4 matrix of the camera


The computed 3d eye vector for the camera


Computed up vector (initialized when calling recalcMatrix)


Computed camera center point


Computed log(radius)


(c) 2015 Mikola Lysenko. MIT License