Matter-JS friction 摩擦力

忘是亡心i 2022-04-10 10:50 134阅读 0赞

**目录**

摩擦力

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>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.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>

![20190104111559951.gif][]

官网demo：[http://brm.io/matter-js/demo/\#airFriction][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>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.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>

![20190104115350956.gif][]

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

官网demo：[http://brm.io/matter-js/demo/\#avalanche][http_brm.io_matter-js_demo_avalanche]

[20190104111559951.gif]: /images/20220331/0130cdb3294042d6a112e04253e5ce06.png
[http_brm.io_matter-js_demo_airFriction]: http://brm.io/matter-js/demo/#airFriction
[20190104115350956.gif]: /images/20220331/89ad5c9a666c43de8c6970ec2da28513.png
[http_brm.io_matter-js_demo_avalanche]: http://brm.io/matter-js/demo/#avalanche

Matter-JS friction 摩擦力

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Matter-JS friction 摩擦力