---
url: /3d/camera.md
---
# 相机与交互

三维图的视角由一台轨道相机控制：相机绕目标点环绕（`yaw` 方位角 / `pitch` 仰角 /
`distance` 距离），所有交互本质都是在改这三个量（外加 `target` 看向哪里）。

## 指针交互

| 手势 | 行为 |
| --- | --- |
| 拖拽 | 环绕视角（向下拖看到更多顶面） |
| Shift + 拖拽 | 平移画面（移动 target） |
| 滚轮 | 缩放（拉近 / 推远） |
| 双指捏合 | 缩放（触屏） |
| 双击 | 复位到初始视角 |
| 悬浮 | 拾取数据，弹出 tooltip |

关闭某项能力：

```js
{
  interaction: {
    zoom: false,           // 关滚轮/捏合缩放
    resetOnDblClick: false // 关双击复位
  }
}
```

## 自动旋转

`autoRotateSpeed` 单位是度/秒，正负决定方向；拖拽时自动暂停，松手后继续。

## 初始视角

`camera` 里的四个量决定开场构图，全部可省略：

* `yaw`：方位角（度），默认 -52，即从左前上方看；
* `pitch`：仰角（度），默认 27，限制在 2–88 之间，不会钻到地下；
* `distance`：相机距离，默认 3.6，装不下数据时会自动外推（autoFit）；
* `target`：看向的世界坐标点，默认略高于地面。

用户一旦手动拖拽或缩放，autoFit 即停止，避免和用户操作打架；双击或 `resetCamera()`
可回到配置的初始视角。

## 键盘

图表容器可聚焦（Tab 进入），方向键环绕、`+` / `-` 缩放、`Home` 复位、`Esc` 清除悬浮、
`Enter` 触发点选。

## 事件与实例方法

```vue
<template>
  <EvChart3d ref="chart" :options="options" @camera-change="onCamera" />
</template>

<script setup>
import { ref } from 'vue'

const chart = ref(null)

function onCamera(cam) {
  // { yaw, pitch, distance, target }
  console.log(cam.yaw, cam.pitch)
}

// 命令式控制
chart.value.setCamera({ yaw: -30, pitch: 40 })
chart.value.resetCamera()
</script>
```

相机变化只会重绘画面，不会重放进场动画；`camera-change` 在拖拽结束时补发一次终态，
拖拽过程中不刷事件。