Matter-JS friction 摩擦力

最新推荐文章于 2025-04-06 10:21:07 发布

蚩尤后裔-汪茂雄

最新推荐文章于 2025-04-06 10:21:07 发布

阅读量1.5k

点赞数 1

分类专栏： MatterJS

本文链接：https://blog.csdn.net/wangmx1993328/article/details/85762507

版权

MatterJS 专栏收录该内容

9 篇文章

订阅专栏

摩擦力

frictionAir 空气阻力

friction 摩擦力

摩擦力

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,//是否显示边线框,默认false
                    showAngleIndicator: true,//是否显示角度,默认false
                    showVelocity: true,//是否显示速度,默认false
                    showCollisions: 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,//是否显示边线框,默认false
                    showAngleIndicator: true,//是否显示角度,默认false
                    showVelocity: true,//是否显示速度,默认false
                    showCollisions: 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>