Matter-JS Composites 混合材料 · 下

朴灿烈づ我的快乐病毒、 2022-03-31 13:09 218阅读 0赞

**目录**

Composites

car 汽车

newtonsCradle 牛顿摆

--------------------

# Composites #

1、多个刚体通过约束组合在一起，称为复合体。复合体对外当作一个刚体，复合体的物理属性是通过所包含的刚体的属性综合计算出来的。

2、[Matter.Composite 模块][Matter.Composite]包含用于创建和处理复合体的方法。

3、Matter.Composites 模块提供了几种特别的复合材料，如链：Composites.chain、牛顿摆：Composites.newtonsCradle、软体：Composites.softBody、汽车：Composites.car 、堆叠：Composites.stack、网格：mesh、金字塔：pyramid。

4、[Matter.Composites 模块][Matter.Composites]提供了几种特别的复合材料，如链：[Composites.chain][]、牛顿摆：[Composites.newtonsCradle][]、软体：[Composites.softBody][]、汽车：[Composites.car ][Composites.car]、堆叠：[Composites.stack][]、网格：[mesh][]、金字塔：[pyramid][]。

5、本文主要讲解

# car 汽车 #

官网API：[http://brm.io/matter-js/docs/classes/Composites.html\#method\_car][Composites.car]

car 创建包含车身和约束的简单汽车设置的组合。由一个矩形和两个圆形构成，矩形作为汽车的主题，会对4个角进行圆角处理，两个圆形作为轮子。

/**
         * Creates a composite with simple car setup of bodies and constraints.
         * @param {number} xx          汽车中心点的x坐标
         * @param {number} yy          汽车中心点的y坐标
         * @param {number} width       汽车主体(矩形)的宽度
         * @param {number} height      汽车主体(矩形)的高度
         * @param {number} wheelSize   汽车轮子(圆形)的半径
         * @return {composite} A new composite car body
         */
        Composites.car = function(xx, yy, width, height, wheelSize)

<!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="../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 Constraint = Matter.Constraint;//约束
                var MouseConstraint = Matter.MouseConstraint;//鼠标控制
                var Composites = Matter.Composites;//复合材料
                var Bodies = Matter.Bodies;//物体
    
                var engine = Engine.create();//创建引擎
                var render = Render.create({//创建渲染器
                    engine: engine,//渲染创建好的引擎
                    element: document.body,//渲染页面的body元素
                    options: {
                        width: stageWidth,
                        height: stageHeight,
                        //wireframes: false,//是否显示边线框,默认false
                        showAngleIndicator: true,//是否显示角度,默认false
                        showVelocity: true,//是否显示速度,默认false
                        showCollisions: true//是否显示碰撞点,默认false
                    }
                });
    
                Engine.run(engine);//运行引擎
                Render.run(render);//运行渲染器
    
                /**设置鼠标控制*/
                var mouseConstraint = MouseConstraint.create(engine, {});
    
                /**创建左侧滑板————矩形。isStatic：固定物体；
                 * angle：为物体设置倾斜角度，旋转时以物体中心为轴，以顺时针方向为正*/
                var board_left = Bodies.rectangle(200, 180, 400, 30, {
                    isStatic: true,
                    angle: Math.PI * (1 / 10.0)
                });
                /**创建右侧滑板——与上同理*/
                var board_right = Bodies.rectangle(600, 300, 500, 30, {
                    isStatic: true,
                    angle: -Math.PI * (1 / 5.0)
                });
    
                /**Composites.car 创建汽车比较简单，直接设置5个参数即可创建一个简易的汽车
                 * car(xx, yy, width, height, wheelSize)
                 * (xx,yy)表示整个汽车中心的坐标；width, height 表示汽车主体矩形的宽与高(不包括轮子)
                 * wheelSize：汽车轮子(圆形)的半径
                 * */
                World.add(engine.world, [Composites.car(150, 100, 160, 30, 40)]);
                World.add(engine.world, [Composites.car(550, 200, 130, 20, 30)]);
    
                /**将两块固定的滑板，以及鼠标控制添加到世界中*/
                World.add(engine.world, [board_left, board_right, 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>

![20190103155659495.gif][]

提示：上面使用的是 matter.js 0.14.2 版本，亲测 0.12.0 版本时样式不是这样的，而且当两辆车重叠时会有明显的抖动。

官网Demo：[http://brm.io/matter-js/demo/\#car][http_brm.io_matter-js_demo_car]

# newtonsCradle 牛顿摆 #

官网API：[http://brm.io/matter-js/docs/classes/Composites.html\#method\_newtonsCradle][Composites.newtonsCradle]

newtonsCradle 方法源码如下，依次创建 number 个圆形，然后对圆形附加约束挂在约束点上。

/**
         * Creates a composite with a Newton's Cradle setup of bodies and constraints.
         * @method newtonsCradle
         * @param {number} xx       第一个摆的悬挂点的x坐标
         * @param {number} yy       第一个摆的悬挂点的y坐标
         * @param {number} number   摆的总个数
         * @param {number} size     摆球的半径
         * @param {number} length   摆的悬挂点到摆球圆形的距离，即绳子的长度
         * @return {composite} A new composite newtonsCradle body
         */
        Composites.newtonsCradle = function(xx, yy, number, size, length) {
            var newtonsCradle = Composite.create({ label: 'Newtons Cradle' });
            for (var i = 0; i < number; i++) {
                var separation = 1.9,
                    circle = Bodies.circle(xx + i * (size * separation), yy + length, size, 
                                { inertia: Infinity, restitution: 1, friction: 0, frictionAir: 0.0001, slop: 1 }),
                    constraint = Constraint.create({ pointA: { x: xx + i * (size * separation), y: yy }, bodyB: circle });
                Composite.addBody(newtonsCradle, circle);
                Composite.addConstraint(newtonsCradle, constraint);
            }
            return newtonsCradle;
        };

使用示例如下：

<!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="../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 Constraint = Matter.Constraint;//约束
                var MouseConstraint = Matter.MouseConstraint;//鼠标控制
                var Composites = Matter.Composites;//复合材料
                var Bodies = Matter.Bodies;//物体
    
                var engine = Engine.create();//创建引擎
                var render = Render.create({//创建渲染器
                    engine: engine,//渲染创建好的引擎
                    element: document.body,//渲染页面的body元素
                    options: {
                        width: stageWidth,
                        height: stageHeight,
                        //wireframes: false,//是否显示边线框,默认false
                        showAngleIndicator: true,//是否显示角度,默认false
                        showVelocity: true,//是否显示速度,默认false
                        showCollisions: true//是否显示碰撞点,默认false
                    }
                });
    
                Engine.run(engine);//运行引擎
                Render.run(render);//运行渲染器
    
                /**设置鼠标控制*/
                var mouseConstraint = MouseConstraint.create(engine, {});
    
                /**创建牛顿摆——使用比较简单
                 * 200, 25, 5, 40, 150：第一个摆悬挂点位置为(200,25)、一个5个摆球，摆球半径40，绳子长度150
                 * 200, 250, 8, 25, 150：第一个摆悬挂点位置为(200,250)、一个8个摆球，摆球半径25，绳子长度150
                 * */
                var newtonsCradle_1 = Composites.newtonsCradle(200, 25, 5, 40, 150);
                var newtonsCradle_2 = Composites.newtonsCradle(200, 250, 8, 25, 150);
    
                /**Matter.Body.translate(body, translation)——对 body(物体)进行translation(转换)
                 * {x: -100, y: -30}：对第1个牛顿摆中的第一个摆往左偏移100，往上偏移30
                 * {x: 180, y: 10}：对第2个牛顿摆中的第8个摆往右偏移180，往上偏移50
                 */
                Matter.Body.translate(newtonsCradle_1.bodies[0], {x: -100, y: -30});
                Matter.Body.translate(newtonsCradle_2.bodies[7], {x: 180, y: -50});
    
                World.add(engine.world, [newtonsCradle_1, newtonsCradle_2, 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>

![20190103163408414.gif][]

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

[Matter.Composite]: http://brm.io/matter-js/docs/classes/Composite.html
[Matter.Composites]: http://brm.io/matter-js/docs/classes/Composites.html
[Composites.chain]: http://brm.io/matter-js/docs/classes/Composites.html#method_chain
[Composites.newtonsCradle]: http://brm.io/matter-js/docs/classes/Composites.html#method_newtonsCradle
[Composites.softBody]: http://brm.io/matter-js/docs/classes/Composites.html#method_softBody
[Composites.car]: http://brm.io/matter-js/docs/classes/Composites.html#method_car
[Composites.stack]: http://brm.io/matter-js/docs/classes/Composites.html#method_stack
[mesh]: http://brm.io/matter-js/docs/classes/Composites.html#method_mesh
[pyramid]: http://brm.io/matter-js/docs/classes/Composites.html#method_pyramid
[20190103155659495.gif]: /images/20220331/6c66093db2d5402b92aa42ecdea693d1.png
[http_brm.io_matter-js_demo_car]: http://brm.io/matter-js/demo/#car
[20190103163408414.gif]: /images/20220331/e956773124d6458a81453ed949f76193.png
[http_brm.io_matter-js_demo_newtonsCradle]: http://brm.io/matter-js/demo/#newtonsCradle