logo

G

  • 教程
  • API
  • 示例
  • 插件
  • 所有产品antv logo arrow
  • 6.1.26
  • 开始使用
  • 第一节:定义场景
  • 第二节:使用渲染器
  • 第三节:增加交互
  • 进阶内容
    • 场景图
    • 创造一个“太阳系”
    • 使用相机
    • 实现一个简单的动画
    • 使用插件
    • GPGPU 初体验
    • 进入 3D 世界
    • 使用 Box2D 物理引擎
    • 使用 matter.js 物理引擎
    • 使用 Yoga 布局引擎
    • 接管 D3 渲染
    • 接管 Observable Plot 渲染
    • 按需引入渲染器
    • 按需渲染
  • 高级话题
    • 性能优化
    • 自定义图形
    • 理解事件传播路径
    • 使用 React 定义图形
    • 导出画布内容
    • 使用轻量版

使用插件

上一篇
实现一个简单的动画
下一篇
GPGPU 初体验

资源

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...

插件可以极大程度丰富渲染器的能力,在本教程中我们将使用 g-webgl 渲染器,配合 g-plugin-3d 插件渲染一个简单的立方体。更多用法可以参考插件系统。

其中会涉及以下 API:

  • 使用 registerPlugin 为渲染器注册插件
  • 使用 getCamera 获取画布相机
  • 使用 setPosition 设置相机位置

最终示例:

  • 官网示例
  • CodeSandbox 示例

使用 WebGL 渲染器

我们使用 g-webgl 渲染器,并为其注册:

  • g-plugin-3d 提供 3D 渲染能力
  • g-plugin-control 提供交互能力
import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-webgl';
import { Plugin as Plugin3D } from '@antv/g-plugin-3d';
import { Plugin as PluginControl } from '@antv/g-plugin-control';
// 创建 WebGL 渲染器
const webglRenderer = new Renderer();
// 注册 3D 插件
webglRenderer.registerPlugin(new Plugin3D());
// 注册 Control 插件
webglRenderer.registerPlugin(new PluginControl());
// 创建画布
const canvas = new Canvas({
container: 'container',
width: 600,
height: 500,
renderer: webglRenderer,
});

创建一个立方体

我们创建一个 200 * 200 * 200 的立方体,并通过 map 给它贴个图:

import {
MeshBasicMaterial,
CubeGeometry,
Mesh,
Plugin as Plugin3D,
} from '@antv/g-plugin-3d';
const cubeGeometry = new CubeGeometry();
const basicMaterial = new MeshBasicMaterial({
map: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*_aqoS73Se3sAAAAAAAAAAAAAARQnAQ',
});
const cube = new Mesh({
style: {
fill: '#1890FF',
opacity: 1,
width: 200,
height: 200,
depth: 200,
geometry: cubeGeometry,
material: basicMaterial,
},
});
canvas.appendChild(cube);

然后使用 setPosition 移动它到画布中央:

cube.setPosition(300, 250, 0);

调整相机视角

现在让我们将相机位置稍稍调整一下,来到立方体的斜上方观察。

  • 使用 getCamera 获取画布相机
  • 使用 setPosition 设置相机位置
const camera = canvas.getCamera();
camera.setPosition(300, 0, 500);

旋转起来

让立方体旋转和其他基础图形一样,使用 rotate 即可:

canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
cube.rotate(0, 1, 0); // 绕 Y 轴旋转 1 度
});