Orbiting 3D camera for WebGL


Simple arcball camera built on top of gl-matrix

var shell = require("gl-now")()
var createMesh = require("gl-mesh")
var glm = require("gl-matrix")
var mat4 = glm.mat4
var simple3DShader = require("simple-3d-shader")
var createOrbitCamera = require("orbit-camera")
var camera = createOrbitCamera([0, 10, 20],
                               [0, 3, 0],
                               [0, 1, 0])
var shader, mesh
shell.on("gl-init", function() {
  shader = simple3DShader(shell.gl)
  mesh = createMesh(shell.gl, require("bunny"))
shell.on("gl-render", function(t) {
  var scratch = mat4.create()
  shader.uniforms.model = scratch
  shader.uniforms.projection = mat4.perspective(scratch, Math.PI/4.0, shell.width/shell.height, 0.1, 1000.0)
  shader.uniforms.view = camera.view(scratch)
shell.on("tick", function() {
  if(shell.wasDown("mouse-left")) {
    camera.rotate([shell.mouseX/shell.width-0.5, shell.mouseY/shell.height-0.5],
                  [shell.prevMouseX/shell.width-0.5, shell.prevMouseY/shell.height-0.5])
  if(shell.wasDown("mouse-right")) {
                10*(shell.mouseY - shell.prevMouseY)/shell.height])
  if(shell.scroll[1]) {
    camera.zoom(shell.scroll[1] * 0.1)
npm install orbit-camera
var createOrbitCamera = require("orbit-camera")

Creates an orbit camera looking at center. This has the same semantics as gluLookAt

  • eye is the eye vector of the camera
  • center is the target the camera is looking at
  • up is the up direction for the camera

Returns A new orbit camera object

Move the camera to look at the new position.

Moves the center of the camera by translation. Note that translation must be an array of length either 2 or 3

Applies a rotation to the camera. cur and prev are the state of the previous locations. These can be pairs of 2D arrays representing the mouse coordinates in distance relative to the center of the sceen.

Zooms in or out by some amount

Returns the current view matrix associated to the camera

(c) 2013 Mikola Lysenko. MIT License