3d-view 中文文档教程

发布于 3年前 浏览 30 项目主页 更新于 3年前

3d-view

这个模块是一个通用接口,它同步几个现有的视图交互

每个相机控制器通过将事件附加到日志来进行。 当前相机状态是通过在这些事件之间进行插值获得的。

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)

在时间 t

  • t is the time to idle at

camera.flush(t)

之前刷新相机状态中的所有事件time t

  • t is the cut off time for the flush

camera.modes

相机支持的模式数组

camera.setMode(mode)

设置相机模式

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

camera.getMode()

检索当前相机模式

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

重置相机位置以聚焦在指定目标上

  • 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)

将相机增量旋转一定量

  • 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)

在局部(相对视图) coordinates

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

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

在世界(绝对全局)坐标中转换相机

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

camera.setMatrix(t, matrix)

将相机矩阵设置为某个固定的 4x4 矩阵

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

camera.setDistance(t, r)

在时间设置相机距离 t

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

camera.setDistanceLimits(lo, hi)

设置相机距离

camera.getDistanceLimits([out])

的界限 检索相机限制

camera.recalcMatrix(t)

在时间重新计算所有矩阵属性t

camera.computedMatrix

计算出的相机 4x4 矩阵 计算出的相机

camera.computedEye

3d 眼睛向量

camera.computedUp

计算出的向上向量(调用 recalcMatrix 时初始化)

camera.computedCenter

计算出的相机中心点

camera.computedRadius

计算出的对数(半径)

License

(c) 2015 Mikola Lysenko。 麻省理工执照

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

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')
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 either turntable, orbit or matrix

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 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

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

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文