logo

G

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

进入 3D 世界

上一篇
GPGPU 初体验
下一篇
使用 Box2D 物理引擎

资源

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-plugin-3d 插件的支持,我们可以绘制 3D 图形,当然渲染器必须指定为 g-webgl。

示例

注册 3D 插件

创建画布和渲染器与之前的教程完全一致,注册 g-plugin-3d 插件

import { Canvas, CanvasEvent } from '@antv/g';
import { Renderer } from '@antv/g-webgl';
import { Plugin as Plugin3D } from '@antv/g-plugin-3d';
// create a renderer
const renderer = new Renderer();
renderer.registerPlugin(new Plugin3D());
// create a canvas
const canvas = new Canvas({
container: 'container',
width: 600,
height: 500,
renderer,
});

获取 GPU Device

在创建 3D 图形时,需要使用 材质 和 几何,它们都需要使用 GPU 底层资源(Buffer 和 Texture),创建时需要获取 GPU Device:

(async () => {
// wait for canvas' initialization complete
await canvas.ready;
// use GPU device
const plugin = renderer.getPlugin('device-renderer');
const device = plugin.getDevice();
})();

创建几何、材质和 Mesh

不同于各种各样的 2D 图形(Circle、Rect),3D 图形使用 Mesh(三角网格)描述,它的形状由 几何 定义,外观样式由 材质 定义。例如这里我们使用 CubeGeometry 和 MeshBasicMaterial:

import { MeshBasicMaterial, CubeGeometry, Mesh } from '@antv/g-plugin-3d';
// 立方体几何
const cubeGeometry = new CubeGeometry(device, {
width: 200,
height: 200,
depth: 200,
});
// 基础材质
const basicMaterial = new MeshBasicMaterial(device);
const cube = new Mesh({
style: {
fill: '#1890FF',
opacity: 1,
geometry: cubeGeometry,
material: basicMaterial,
},
});

加入画布

创建好的 Mesh 和 2D 基础图形一样,可以进行变换。例如我们使用 setPosition 设置它的全局坐标:

cube.setPosition(300, 250, 0);
canvas.appendChild(cube);