三维视图
此模块是一个通用界面, 可以同步多个已存在的视图交互
每个相机控制器通过将事件附加到日志来进行. 目前相机状态是通过在这些事件之间插入而得到的.
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)
}
构造器
var camera = require('3d-view')([options])
方法
camera.idle(t)
将相机及时抛出 t
t是闲置的时间
camera.flush(t)
将所有事件在不录影状态中流出 t
t是冲浪时间的中断
camera.modes
相机支持的一系列模式
camera.setMode(mode)
设定相机模式
mode是新模式。 一定是两个turntable, (中文(简体) ),orbit或者说matrix
camera.getMode()
获取当前相机模式
camera.lookAt(t, eye, center, up)
重置相机位置以聚焦指定目标
t是事件的时间eye是相机的位置center是相机的目标up是一个向量指向上
camera.rotate(t, yaw, pitch, roll)
逐步旋转相机
t是输入事件的时间yaw是按弧度以y轴旋转的量pitch是用弧度以 x 轴旋转的量roll是在弧度中由z轴旋转的量
camera.pan(t, dx, dy, dz)
在本地( 视图相对) 坐标中覆盖相机
t是事件的时间dx,dy,dz是移动的金额
camera.translate(t, dx, dy, dz)
在世界上翻译相机(绝对全球)坐标
t是事件的时间dx,dy,dz是移动的金额
camera.setMatrix(t, matrix)
将相机矩阵设置为一些固定的 4x4 矩阵
t是事件的时间matrix是新相机矩阵
camera.setDistance(t, r)
设定相机时间距离 t
t是事件的时间r是新的相机距离
camera.setDistanceLimits(lo, hi)
设定相机距离的界限
camera.getDistanceLimits([out])
获取相机限制
camera.recalcMatrix(t)
及时重算所有矩阵属性 t
camera.computedMatrix
相机计算出4x4矩阵
camera.computedEye
相机3d眼向量计算
camera.computedUp
计算向量( 在调用 recalcuMatrix 时初始化)
camera.computedCenter
计算相机中心点
camera.computedRadius
已计算日志( 辐射)
许可证
(c) 2015年Mikola Lysenko。 MIT 许可证