README
3d-view
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.
API
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')
document.body.appendChild(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][0]+bounds[1][0]),
0.5*(bounds[0][1]+bounds[1][1]),
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))
})
modeSelect.style.position = 'absolute'
modeSelect.style.left = '10px'
modeSelect.style.top = '10px'
modeSelect.style['z-index'] = 10
document.body.appendChild(modeSelect)
//Hook event listeners
var lastX = 0, lastY = 0
document.oncontextmenu = function(e) {
e.preventDefault()
e.stopPropagation()
return false
}
modeSelect.addEventListener('change', function(ev) {
camera.setMode(modeSelect.value)
})
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) {
//zoom
camera.rotate(now(), 0, 0, dx)
} else {
//rotate
camera.rotate(now(), dx, dy)
}
} else if(ev.which === 3) {
//pan
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(t - 20)
camera.flush(t - 100)
camera.recalcMatrix(t-25)
//Compute parameters
var cameraParams = {
view: camera.computedMatrix,
projection: perspective(
[],
Math.PI/4.0,
gl.drawingBufferWidth/gl.drawingBufferHeight,
0.1,
1000.0)
}
//Draw everything
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
gl.enable(gl.DEPTH_TEST)
axes.draw(cameraParams)
mesh.draw(cameraParams)
}
Constructor
var camera = require('3d-view')([options])
Methods
camera.idle(t)
Idles the camera at time t
t
is the time to idle at
camera.flush(t)
Flush all events in camera state before time t
t
is the cut off time for the flush
camera.modes
An array of modes supported by the camera
camera.setMode(mode)
Sets the camera mode
mode
is the new mode. Must be eitherturntable
,orbit
ormatrix
camera.getMode()
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 eventeye
is the position of the cameracenter
is the target of the cameraup
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 eventyaw
is the amount to rotate by along y-axis in radianspitch
is the amount to rotate by along x-axis in radiansroll
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 eventdx,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 eventdx,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 eventmatrix
is the new camera matrix
camera.setDistance(t, r)
Sets camera distance at time t
t
is the time of the eventr
is the new camera distance
camera.setDistanceLimits(lo, hi)
Sets bounds on the camera distance
camera.getDistanceLimits([out])
Retrieves the camera limits
camera.recalcMatrix(t)
Recomputes all matrix properties at time t
camera.computedMatrix
The computed 4x4 matrix of the camera
camera.computedEye
The computed 3d eye vector for the camera
camera.computedUp
Computed up vector (initialized when calling recalcMatrix)
camera.computedCenter
Computed camera center point
camera.computedRadius
Computed log(radius)
License
(c) 2015 Mikola Lysenko. MIT License