3d-view-controls 中文文档教程

Question

3d-view-controls

具有输入绑定的易于使用的 3D 相机。

默认控件：

Button	Interaction
Left mouse	Rotate
Shift + left mouse or scroll horizontally	Roll
Right mouse	Pan
Middle mouse or scroll vertically	Zoom

Example

以下是如何在应用程序中使用此模块的完整工作示例：

var createCamera = require('3d-view-controls')
var bunny = require('bunny')
var perspective = require('gl-mat4/perspective')
var createMesh = require('gl-simplicial-complex')

var canvas = document.createElement('canvas')
document.body.appendChild(canvas)
window.addEventListener('resize', require('canvas-fit')(canvas))

var gl = canvas.getContext('webgl')

var camera = createCamera(canvas, {
  eye:    [50,0,0],
  center: [0,0,0],
  zoomMax: 500
})

var mesh = createMesh(gl, {
  cells:      bunny.cells,
  positions:  bunny.positions,
  colormap:   'jet'
})

function render() {
  requestAnimationFrame(render)
  if(camera.tick()) {
    gl.viewport(0, 0, canvas.width, canvas.height)
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
    gl.enable(gl.DEPTH_TEST)
    mesh.draw({
      projection: perspective([], Math.PI/4, canvas.width/canvas.height, 0.01, 1000),
      view: camera.matrix
    })
  }
}
render()

您可以在浏览器中试用它现在。

Install

npm i 3d-view-controls

API

Constructor

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

创建一个新的相机对象。

• element is a DOM node onto which this
• options is an object with the following optional properties:
  • eye - the position of the camera in world coordinates (Default [0,0,10])
  • center - the target of the camera in world coordinates (Default [0,0,0])
  • up - the up vector of the camera (Default [0,1,0])
  • mode - the interaction mode for the camera (Default 'orbit')
  • delay - amount to delay interactions by for interpolation in ms (Default 16)
  • rotateSpeed - rotation scaling factor (Default 1)
  • zoomSpeed - zoom scaling factor (Default 1)
  • translateSpeed - translation/panning scale factor (Default 1)
  • flipX - flip X axis for rotations (Default false)
  • flipY - flip Y axis for rotations (Default false)
  • zoomMin - minimum zoom distance (Default 0.01)
  • zoomMax - maximum zoom distance (Default Infinity)

Geometric properties

请注意，您可以通过分配给任何属性来更新它。 例如：

camera.eye = [100, 100, 100]

camera.matrix = [
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1]

camera.matrix

编码为长度为 16 的数组的 4x4 矩阵表示从世界坐标到视图（相机）坐标的齐次变换。

camera.mode

相机的当前交互模式。 可能的值包括：

• orbit - free orbiting mode
• turntable - behaves like a turntable/gimbal
• matrix - manual matrix control

camera.eye

相机在世界坐标中的位置 世界坐标中

camera.up

指向上方的矢量 世界坐标

camera.center

中相机的目标

camera.distance

从eye 到center 的欧氏距离

Methods

camera.tick()

更新相机状态。 在渲染每一帧之前调用它来计算相机的当前状态。

返回 true 如果自从上次调用 tick 后相机的状态发生了变化

camera.lookAt(center, eye, up)

设置相机中心/眼睛/向上矢量看一个固定目标

• center is the new center/target for the camera
• eye is the position of the camera in world coordinates
• up is a vector pointing up

camera.rotate(yaw, pitch, roll)

对相机应用增量旋转 对相机

• yaw is the amount to rotate about the y-axis (in xz plane of camera)
• pitch is the amount to rotate about the x-axis (in yz plane of camera)
• roll is the amount to rotate about the forward axis (in xy plane of camera)

camera.pan(dx, dy, dz)

应用相对运动，在视图坐标中移动

• dx,dy,dz are the components of the camera motion vector

camera.translate(dx, dy, dz)

在世界坐标中转换相机

• dx,dy,dz are the components of the translation vector

Tuning parameters

camera.distanceLimits

表示缩放距离上的 [lo,hi] 边界的 2D 数组。 请注意 0 <; lo < 你好。

camera.flipX

控制相机旋转是否沿 x 轴翻转

camera.flipY

的标志 控制相机旋转是否沿 y 轴翻转的标志

camera.delay

以毫秒为单位的相机状态插值延迟量

camera.rotateSpeed

相机旋转速度缩放因子

camera.zoomSpeed

相机缩放速度缩放factor

camera.translateSpeed

Camera translation speed scaling factor

camera.element

相机附加到的 DOM 元素

Future

扩展以支持更多输入类型：

• Touch
• Keyboard
• GamePad
• VR?

License

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