摩擦力

1、Matter.js 提供了三种摩擦力(friction )：摩擦力-friction、空气摩擦力-frictionAir、静摩擦力-frictionStatic。

1）friction 取值范围 [0,1]，默认值 0.1，0 表示刚体可以无摩擦力的无限滑动，1 表示对刚体施加力后会立刻停止

2）frictionAir 取值 [0 , 1]，默认值 0.01，0 表示刚体无空气摩擦力，值越高刚体在空间摩擦力越大，运动越慢

3）frictionStatic 取值范围 [0,1]，默认值 0.5，0 表示刚体几乎是静止的，值越高时意味着需要移动刚体所需的力就越大。

2、Matter.Body.create 函数源码如下，可以看到创建物体可以设置的所有属性：

/**
* Creates a new rigid body model. The options parameter is an object that specifies any properties you wish to override the defaults.
* All properties have default values, and many are pre-calculated automatically based on other properties.
* Vertices must be specified in clockwise order.
* See the properties section below for detailed information on what you can pass via the `options` object.
* @method create
* @param {} options
* @return {body} body
*/
Body.create = function(options) {
var defaults = {id: Common.nextId(),type: 'body',label: 'Body',parts: [],plugin: {},angle: 0,vertices: Vertices.fromPath('L 0 0 L 40 0 L 40 40 L 0 40'),position: { x: 0, y: 0 },force: { x: 0, y: 0 },torque: 0,positionImpulse: { x: 0, y: 0 },constraintImpulse: { x: 0, y: 0, angle: 0 },totalContacts: 0,speed: 0,angularSpeed: 0,velocity: { x: 0, y: 0 },angularVelocity: 0,isSensor: false,isStatic: false,isSleeping: false,motion: 0,sleepThreshold: 60,density: 0.001,restitution: 0,friction: 0.1,frictionStatic: 0.5,frictionAir: 0.01,collisionFilter: {category: 0x0001,mask: 0xFFFFFFFF,group: 0},slop: 0.05,timeScale: 1,render: {visible: true,opacity: 1,sprite: {xScale: 1,yScale: 1,xOffset: 0,yOffset: 0},lineWidth: 0}
};

frictionAir 空气阻力

frictionAir 取值 [0 , 1]，默认值 0.01，0 表示刚体无空气摩擦力，值越高刚体在空间摩擦力越大，运动越慢。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>Matter-JS</title><!--matter-js cdnjs地址--><script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script><!--<script src="../js/matter_0.14.2.js"></script>--><script type="text/javascript">var stageWidth = 800;//舞台宽度var stageHeight = 500;//舞台高度window.onload = function () {var Engine = Matter.Engine;//引擎var Render = Matter.Render;//渲染器var World = Matter.World;//世界var MouseConstraint = Matter.MouseConstraint;//鼠标控制var Bodies = Matter.Bodies;//物体var engine = Engine.create();//创建引擎var render = Render.create({//创建渲染器engine: engine,//渲染创建好的引擎element: document.body,//渲染页面的body元素options: {width: stageWidth,height: stageHeight,wireframes: true,//是否显示边线框,默认falseshowAngleIndicator: true,//是否显示角度,默认falseshowVelocity: true,//是否显示速度,默认falseshowCollisions: true//是否显示碰撞点,默认false}});Engine.run(engine);//运行引擎Render.run(render);//运行渲染器/**设置鼠标控制*/var mouseConstraint = MouseConstraint.create(engine, {});/**创建三个矩形，空气摩擦力分别为 0.05、0.1、0.2*/var box_1 = Bodies.rectangle(100, 20, 60, 60, {frictionAir: 0.05});var box_2 = Bodies.rectangle(300, 30, 70, 70, {frictionAir: 0.1});var box_3 = Bodies.rectangle(500, 40, 80, 80, {frictionAir: 0.2});/**将三个矩形以及鼠标控制添加到世界中*/World.add(engine.world, [box_1, box_2, box_3, mouseConstraint]);World.add(engine.world, create4Wall(Bodies));//为世界4周添加4面墙}/***创建4面墙-强制物体在墙内运动*/function create4Wall(Bodies) {var ground_top = Bodies.rectangle(stageWidth / 2, 0, stageWidth, 40, {isStatic: true});var ground_right = Bodies.rectangle(stageWidth, stageHeight / 2, 40, stageHeight, {isStatic: true});var ground_bottom = Bodies.rectangle(stageWidth / 2, stageHeight, stageWidth, 40, {isStatic: true});var ground_left = Bodies.rectangle(0, stageHeight / 2, 40, stageHeight, {isStatic: true});return [ground_top, ground_right, ground_bottom, ground_left];}</script>
</head>
<body>
</body>
</html>

官网demo：http://brm.io/matter-js/demo/#airFriction

friction 摩擦力

friction 取值范围 [0,1]，默认值 0.1，0 表示刚体可以无摩擦力的无限滑动，1 表示对刚体施加力后会立刻停止

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>Matter-JS</title><!--matter-js cdnjs地址--><script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script><!--<script src="../js/matter_0.14.2.js"></script>--><script type="text/javascript">var stageWidth = 800;//舞台宽度var stageHeight = 500;//舞台高度window.onload = function () {var Engine = Matter.Engine;//引擎var Render = Matter.Render;//渲染器var World = Matter.World;//世界var MouseConstraint = Matter.MouseConstraint;//鼠标控制var Bodies = Matter.Bodies;//物体var Composites = Matter.Composites;//符合材料var Composite = Matter.Composite;var engine = Engine.create();//创建引擎var render = Render.create({//创建渲染器engine: engine,//渲染创建好的引擎element: document.body,//渲染页面的body元素options: {width: stageWidth,height: stageHeight,wireframes: true,//是否显示边线框,默认falseshowAngleIndicator: true,//是否显示角度,默认falseshowVelocity: true,//是否显示速度,默认falseshowCollisions: true//是否显示碰撞点,默认false}});Engine.run(engine);//运行引擎Render.run(render);//运行渲染器/**设置鼠标控制*/var mouseConstraint = MouseConstraint.create(engine, {});/**创建两块斜着放的木板(矩形)。isStatic: true：让物体静止；angle：物体倾斜的角度*/var plank_1 = Bodies.rectangle(300, 200, 600, 20, {isStatic: true, angle: Math.PI / 20});var plank_2 = Bodies.rectangle(500, 350, 600, 20, {isStatic: true, angle: -Math.PI / 20});World.add(engine.world, [plank_1, plank_2]);/**使用复合材料Composites创建堆叠物体*/var stack = Composites.stack(100, 20, 20, 5, 0, 0, function (x, y) {/**创建圆形返回* Matter.Common是一个通用的工具模块，random创建随机小数，也直接使用JS的Math对象生成*/return Bodies.circle(x, y, Matter.Common.random(10, 15), {friction: 0.000001, /**设置球的摩擦力*/restitution: 0.5,//补偿值density: 0.001//物质密度});});/**将三个矩形以及鼠标控制添加到世界中*/World.add(engine.world, [mouseConstraint, stack]);World.add(engine.world, create4Wall(Bodies));//为世界4周添加4面墙}/***创建4面墙-强制物体在墙内运动*/function create4Wall(Bodies) {var ground_top = Bodies.rectangle(stageWidth / 2, 0, stageWidth, 40, {isStatic: true});var ground_right = Bodies.rectangle(stageWidth, stageHeight / 2, 40, stageHeight, {isStatic: true});var ground_bottom = Bodies.rectangle(stageWidth / 2, stageHeight, stageWidth, 40, {isStatic: true});var ground_left = Bodies.rectangle(0, stageHeight / 2, 40, stageHeight, {isStatic: true});return [ground_top, ground_right, ground_bottom, ground_left];}</script>
</head>
<body>
</body>
</html>

球是运动的，斜木板是静止的，将 friction 属性设置在球上即可表现出明显效果，如果是默认值 0.1,则球不会像上面运动的这么快。

官网demo：http://brm.io/matter-js/demo/#avalanche

Matter-JS friction 摩擦力相关推荐

【一统江湖的大前端（8）】matter.js 经典物理
[一统江湖的大前端(8)]matter.js 经典物理我的github主页:https://github.com/dashnowords 我的新书上架啦,3天即登京东计算机编程语言类排行榜Top1! ...
【华为云技术分享】【一统江湖的大前端（8）】matter.js 经典物理
[摘要] 介绍前端物理引擎matterjs基本使用及实战示例代码托管在:http://www.github.com/dashnowords/blogs 在前端开发领域,物理引擎是一个相对小众的话题 ...
grav html5,HTML5 Matter.js 重力试验场
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 // Matter.js module aliases var Engine = Matter.Engine ...
物理世界的互动之旅：Matter.js入门指南
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群本文简介戴尬猴,我是德育处主任欢迎来到<物理世界的互动之旅:Matter.js入门指南>. 本文将带您探索 Matter. ...
android 小鸡走动动画,使用Matter.js实现的小鸡掉落动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var chickenContainer = document.getElementById('chicke ...
matter.js文档翻译
学习layabox的时候,发现matter.js的资料比较少,所以配合机器翻译,勉强凑个matter.js的中文文档,以供查询 API文档matter.js0.13.0 2D刚体物理引擎为Web编写的 ...
使用 Phaser3+Matter.js 实现“合成大西瓜”游戏
前言最近有一款"合成大西瓜"的小游戏有点火,试玩了一下,玩法比较简单,实现难度也不大,所以参照游戏原型自己实现了一下,游戏开发主要使用了 Phaser 游戏框架,本文主要分享游戏 ...
html双人台球游戏,使用h5和matter.js实现的简化版台球小游戏
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 // necessary modules const { Engine, Render, World, Bo ...
html音乐跳动的线,HTML5 Audio+Matter.js 随音乐节奏而动的踩单车杂技表演
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var player = document.createElement('audio') player.sr ...
three.js学习笔记(十)——物理引擎
我们可以利用数学函数和一些解决方案像RayCaster来实现自己的物理效果,但是如果需求更加真实的物理效果,像是物体张力.摩擦力.拉伸.反弹等真实物理效果,最好使用外部库原理我们会创建一个Thre ...

Matter-JS friction 摩擦力

摩擦力

frictionAir 空气阻力

friction 摩擦力

Matter-JS friction 摩擦力相关推荐

最新文章

热门文章