logo

G

  • Tutorials
  • API
  • Examples
  • Plugins
  • Productsantv logo arrow
  • 6.1.26
  • Canvas
    • Introduction
    • Options
    • Built-in objects
    • Coordinate system
    • Scenegraph & Lifecycle
    • Event
    • OffscreenCanvas & Server-side Rendering
    • CustomElementRegistry
    • Frequently Asked Questions
  • Renderer
    • Introduction
    • Canvas Renderer
    • Canvaskit Renderer
    • SVG Renderer
    • WebGL Renderer
    • WebGPU Renderer
    • Custom Renderer
  • Camera
    • Introduction
    • Camera Parameters
    • Camera action
    • Camera animation
  • Event
    • Introduction
    • Event Object
    • Gesture & Drag'n'Drop
    • Frequently Asked Questions
  • Animation
    • Web Animations API
    • Lottie
  • Basic Shapes
    • Basic Concepts
    • DisplayObject
    • Group
    • Text
    • Circle
    • Ellipse
    • Rect
    • Image
    • Line
    • Polygon
    • Polyline
    • Path
    • HTML
  • Style System
    • Introduction
    • CSS Typed OM
    • Inheritance
    • CSS Properties & Values API
    • CSS Layout API
    • Pattern
    • Gradient
  • 3D
    • 材质
    • 几何
    • Mesh
    • 光源
    • 雾
    • 交互
  • Built-in Objects
    • EventTarget
    • Node
    • Element
    • Document
    • MutationObserver
    • Utils
  • GPGPU
    • Introduction
    • Programming Model
    • Kernel API
    • Principles of classical GPGPU implementation
    • webgpu-graph
  • Declarative programming
    • 使用 Web Components
  • Devtools
    • G 开发者工具
    • 内置的渲染统计信息
    • 第三方开发调试工具

交互

Previous
雾
Next
EventTarget

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

在 2D 场景中对于整个场景的常见交互有平移、缩放和旋转,通过相机动作实现。

例如对场景的平移等价于固定视点,让相机沿 u、v 轴(G 的世界坐标系 Y 轴正向向下)方向移动,也称作 pan 相机动作,在具体实现中通过对鼠标 move 系列事件的监听实现,同时由于相机固定为正交投影,视点是否固定并不影响最终成像效果。

但而在 3D 场景中,同样的鼠标平移动作可能包含不同的语义。例如在模型观察场景中,我们希望固定视点,改变相机位置,而在第一/三人称开放世界中,我们希望固定相机位置,改变视点。

我们提供了 g-plugin-control 插件,目前支持观察者模式,即通过鼠标交互固定视点,改变相机位置:

  • 鼠标拖拽将引起相机在 u、v 轴的移动,即 pan 动作
  • 鼠标滚轮缩放将引起相机在 n 轴的移动,即 dolly 动作

示例:

import { Plugin as PluginControl } from '@antv/g-plugin-control';
renderer.registerPlugin(new Plugin3D());