logo

G

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

使用 matter.js 物理引擎

上一篇
使用 Box2D 物理引擎
下一篇
使用 Yoga 布局引擎

资源

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

matter.js 物理引擎提供了一系列针对刚体的仿真计算,例如重力和表面摩擦力。另外,在任意时刻也可以施加外力改变图形的位置和旋转角度,这为我们实现一些基于真实物理规则的布局提供了帮助。

通过 g-plugin-matterjs 插件的支持,我们可以给已有的大部分 2D 图形增加物理属性。

在该示例中,我们创建了一系列动态物体,让它们进行自由落体,最终停留在“U 形槽”中。

注册插件

创建一个渲染器并注册插件:

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

开启 debug

在开发时,我们常常希望能把物理引擎中的世界也渲染出来,便于和“现实世界”对照。

matter.js  本身支持渲染。开启后配合 debugContainer 可以绘制物理引擎世界中每个对象的 wireframe,便于 debug:

const plugin = new PluginMatterjs({
debug: true,
debugContainer: document.getElementById('container'),
debugCanvasWidth: 600,
debugCanvasHeight: 500,
});

例如下图展示了三堵静态墙壁和一些动态物体的 wireframe:

创建静态地面

我们使用 Line 创建一个平地,需要特别注意 rigid 属性,设置为 static 表明它不受重力等作用力影响:

const ground = new Line({
style: {
x1: 50,
y1: 400,
// 省略其他属性
rigid: 'static',
},
});
canvas.appendChild(ground);

创建动态弹力球

接下来我们创建一个受重力影响的“弹力球”,其中:

  • density 表示物体密度,单位为千克/立方米
  • restitution 表示弹力系数
const circle = new Circle({
style: {
fill: '#1890FF',
r: 50,
rigid: 'dynamic',
density: 10,
restitution: 0.5,
},
});
canvas.appendChild(circle);

施加外力

插件会自动完成仿真过程,你可以看到小球自由落体至地面并弹起。

使用 applyForce 可以向图形施加外力。在该 示例 中,点击按钮可以向 Circle 施加一个 [0, 0] 点处 [0, -10] 的外力,因此受力会向上弹起:

plugin.applyForce(circle, [0, -10], [0, 0]);