# 3d-view 中文文档

规范地址：https://npmcn.com/package/3d-view/

版本：2\.0\.1
npm 元数据更新时间：2022-06-12T14:07:22.028Z
中文译文更新时间：2026-11-05T18:17:15.827Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/3d-view
原文对照：https://npmcn.com/package/3d-view/?lang=original
项目主页：https://github.com/mikolalysenko/3d-view
源码仓库：https://github.com/mikolalysenko/3d-view

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：23.7 kB，7 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：3 个
- 首次发布：2015-02-13T20:26:13.312Z
- 最新版本发布：2021-09-03T23:23:25.512Z
- 近 30 天下载量：87294（2026-10-04 至 2026-11-02，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

三维相机视图控制器

## 安装

```sh
npm install 3d-view
```

也可以使用：`pnpm add 3d-view`、`yarn add 3d-view`、`bun add 3d-view`

## README

# 三维视图

此模块是一个通用界面, 可以同步多个已存在的视图交互

-   [旋转台相机控制器](https://github.com/mikolalysenko/turntable-camera-controller)
-   [轨道相机控制器](https://github.com/mikolalysenko/orbit-camera-controller)
-   [矩阵相机控制器](https://github.com/mikolalysenko/orbit-camera-controller)

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

# API 密码

[在此尝试更完整的演示](https://mikolalysenko.github.io/3d-view)

```javascript
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 许可证

## 常见问题

### 3d-view 是什么？

三维相机视图控制器

### 如何安装 3d-view？

在项目目录运行 npm install 3d-view，或使用 pnpm add / yarn add / bun add。

### 3d-view 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/3d-view 是否存在。

### 3d-view 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### 3d-view 可以商用吗？

3d-view 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### 3d-view 的下载量有多少？

根据 npm 官方下载统计，3d-view 在 2026/10/04 – 2026/11/02 这 30 天内被下载 87,294 次，日均约 2,910 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### 3d-view 还在维护吗？

最新版本 2\.0\.1 发布于 2021/09/04（5 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2015/02/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。