logo

G

  • 教程
  • API
  • 示例
  • 插件
  • 所有产品antv logo arrow
  • 6.1.26
  • 画布
    • 简介
    • 初始化参数
    • 场景图能力与生命周期
    • 内置对象
    • 坐标系
    • 画布事件
    • OffscreenCanvas 和服务端渲染
    • CustomElementRegistry
    • 常见问题
  • 渲染器
    • 简介
    • Canvas 渲染器
    • Canvaskit 渲染器
    • SVG 渲染器
    • WebGL 渲染器
    • WebGPU 渲染器
    • 自定义渲染器
  • 相机
    • 简介
    • 相机参数
    • 相机动作
    • 相机动画
  • 事件
    • 简介
    • 事件对象
    • 手势和拖放
    • 常见问题
  • 动画
    • Web Animations API
    • Lottie 动画
  • 基础图形
    • 基础概念
    • DisplayObject
    • Group 图形分组
    • Text 文本
    • Circle 圆形
    • Ellipse 椭圆
    • Rect 矩形
    • Image 图片
    • Line 直线
    • Polygon 多边形
    • Polyline 折线
    • Path 路径
    • HTML 内容
  • 样式系统
    • 简介
    • 继承机制
    • CSS Typed OM
    • CSS Properties & Values API
    • CSS Layout API
    • Pattern
    • Gradient
  • 三维世界
    • 材质
    • 几何
    • 光源
    • Mesh
    • 雾
    • 交互
  • 内置对象
    • EventTarget
    • Node
    • Element
    • Document
    • MutationObserver
    • 工具方法
  • GPGPU
    • 简介
    • 编程模型
    • Kernel API
    • 经典 GPGPU 的实现原理
    • webgpu-graph
  • 声明式用法
    • 使用 Web Components
  • 开发调试工具
    • G 开发者工具
    • 内置的渲染统计信息
    • 第三方开发调试工具

相机动作

上一篇
相机参数
下一篇
相机动画

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

在相机坐标系中相机的三轴为 uvn

后面我们介绍的相机动作实际就是沿这三轴进行移动和旋转。

下图来自 Television Production Handbook p.97。早年的电视台使用的摄像机通过轨道完成移动:

我们不考虑依靠摇臂完成的 crane 和 tongue 动作,沿 uvn 三轴的平移和旋转可总结出以下动作:

动作名相机位置视点uvn
dolly平移
pedestal平移
truck平移
cant旋转中心旋转
pan旋转中心旋转
tilt旋转中心旋转
arc旋转中心旋转

很自然的,根据相机类型的不同,同一个摄像机动作对应的实现也不同。 我们以 dolly 动作为例,同样都是一个向前向后移动摄像机位置的动作,对于 Orbiting / Exploring 模式视点不变,而在 Tracking 模式下视点是需要调整的。

pan

沿 u / v 轴,即水平和垂直方向平移相机。

方法签名如下:

pan(tx: number, ty: number)

参数:

  • tx 沿 u 轴正向平移
  • ty 沿 v 轴正向平移

在该示例 中,下面的操作将导致原本处于视点处的物体展示在左上角:

camera.pan(200, 200);

在 g-plugin-control 中我们响应鼠标平移事件,调用该方法:

dolly

沿 n 轴移动相机。固定视点,改变相机位置从而改变视距。会保持视距在 minDistance 和 maxDistance 之间。

方法签名如下:

dolly(value: number)

参数:

  • value 以 dollyingStep 为单位,正向远离视点,负向靠近

使用示例:

camera.dolly(10); // 远离视点
camera.dolly(-10); // 靠近视点

在透视投影中效果如下,在 g-plugin-control 中我们响应鼠标滚轮事件,调用该方法:

rotate

按相机方位角旋转,逆时针方向为正。

方法签名如下:

rotate(azimuth: number, elevation: number, roll: number)

2D 场景只需要指定 roll,例如让相机“歪下头”:

camera.rotate(0, 0, 30);