Matter-JS Composites 混合材料 · 上

我就是我 2022-03-31 06:24 199阅读 0赞

**目录**

Composites

stack 堆叠

chain 链

softBody 软体

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

# 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、本文主要讲解 堆叠：[Composites.stack][]、链：[Composites.chain][]、软体：[Composites.softBody][]。

# stack 堆叠 #

/\*\*Create a new composite containing bodies created in the callback in a grid arrangement. This function uses the body's bounds to prevent overlaps.（创建一个新的组合,其中包含在网格排列的回调中创建的实体,此函数使用主体边界来防止重叠。）

\* @method stack  
 \* @param \{number\} xx                 复合体起点(左上角)的x坐标  
 \* @param \{number\} yy                 复合体起点(左上角)的y坐标  
 \* @param \{number\} columns       堆叠的列数  
 \* @param \{number\} rows             堆叠的行数  
 \* @param \{number\} columnGap   相邻列的距离(px)  
 \* @param \{number\} rowGap         相邻行的距离(px)   
 \* @param \{function\} callback        网格排列的回调函数，用于创建堆叠的物体  
 \* @return \{composite\} A new composite containing objects created in the callback  
 \*/  
Composites.stack = function(xx, yy, columns, rows, columnGap, rowGap, callback)

![20190102115344561.gif][]

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

# chain 链 #

1、官网API地址：[http://brm.io/matter-js/docs/classes/Composites.html\#method\_chain][Composites.chain]

> /\*\*Chains all bodies in the given composite together using constraints.(使用约束将给定组合中的所有实体链接在一起)  
> \* @method chain  
> \* @param \{composite\} composite     被链接的复合体  
> \* @param \{number\} xOffsetA            被链接物体A的x方向偏移量，\[-0.5,0.5\]，0表示中心位置，左右平分0.5  
> \* @param \{number\} yOffsetA            被链接物体A的y方向偏移量，\[-0.5,0.5\]，0表示中心位置，上下平分0.5  
> \* @param \{number\} xOffsetB            被链接物体B的x方向偏移量，\[-0.5,0.5\]，0表示中心位置，左右平分0.5    
> \* @param \{number\} yOffsetB            被链接物体B的y方向偏移量，\[-0.5,0.5\]，0表示中心位置，上下平分0.5  
> \* @param \{object\} options  
> \* @return \{composite\} A new composite containing objects chained together with constraints  
> \*/  
> Composites.chain = function(composite, xOffsetA, yOffsetA, xOffsetB, yOffsetB, options)

<!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 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,//是否显示边线框
                        showVelocity: true//是否显示速度
                    }
                });
    
                Engine.run(engine);//运行引擎
                Render.run(render);//运行渲染器
    
                /**创造两个桥墩————固定的两个竖向矩形代替*/
                var bridge_left = Bodies.rectangle(100, 400, 50, 250, {isStatic: true});
                var bridge_right = Bodies.rectangle(700, 400, 50, 250, {isStatic: true});
    
                /**桥上的木板————使用堆叠的一排矩形代替
                 * stack(xx, yy, columns, rows, columnGap, rowGap, callback)
                 * xx,yy 表示堆叠的混合体起点坐标；clumns 表示列数；rows 表示行数；columnGap表示列距；rowGap表示行距
                 * callback中创建堆叠的物体——矩形
                 * 注意：模板创建的位置要与桥墩配合好，否则铁索会被拉伸到变形
                 */
                var stack = Composites.stack(150, 250, 7, 1, 10, 0, function (x, y) {
                    return Bodies.rectangle(x, y, 60, 30, {
                        chamfer: 15//chamfer 表示切角,这样矩形4个角会有15度的圆角
                    })
                });
    
                /**
                 * 木板创建好之后，现在需要使用 Composites.chain 链接起来，chain 用于将混合体中的刚体进行链接
                 * chain(composite, xOffsetA, yOffsetA, xOffsetB, yOffsetB, options)
                 * composite：被链接的混合体，如下所示为上面创建好的木板混合体
                 * xOffsetA、yOffsetA 表示A物体链接点的偏移量，注意取值为百分比形式：(0,0)表示在物体中心、(0.5,0)表示表示物体右侧的中间位置、(0.5,-0.5)表示物体右上角
                 * (-0.5,-0.5)表示物体左上角、(-0.5,0.5)表示物体左下角、其余以此类推。
                 * xOffsetB, yOffsetB 则表示被链接的B物体，链接操作针对的是相邻物体，依次进行链接
                 * 这里为桥上的木板创建"上、中、下"3条铁索进行链接。用铁索将模板连接起来
                 */
                Composites.chain(stack, 0.4, -0.3, -0.4, -0.3, {});
                Composites.chain(stack, 0.4, 0, -0.4, 0, {});
                Composites.chain(stack, 0.4, 0.3, -0.4, 0.3, {});
    
                /**将已经链接好的木板左侧固定在左侧桥墩上
                 * Constraint.create 创建约束———— 将两个物体通过约束点连接在一起，这个约束点就相当于一个钉子将两个物体固定在一起
                 * 其参数是一个json对象,主要参数有：bodyA,pointA,bodyB,pointB,length,stiffness等
                 * bodyA 和 bodyB 分别被连接的两个物体
                 * pointA 和 pointB 表示约束点的位置，其值为向量，默认为{x=0,y:0}在物体中心位置。以物体中心为原点进行量相减(三角形法则)
                 * bridge_left 为左侧桥墩，pointA: {x: 0, y: -100}表示自身约束点在中心点往上偏移100px的位置
                 * stack.bodies[0]：stack为桥面木板混合体，.bodies为获取混合体中的刚体(数组),[0]取第一块木板
                 * pointB: {x: -25, y: 0}：第一块木板上的约束点位置，木板宽度为60，(-25,0)表示中心点往左偏移25px
                 */
                var nailLeft = Constraint.create({
                    bodyA: bridge_left,
                    pointA: {x: 0, y: -100},
                    bodyB: stack.bodies[0],
                    pointB: {x: -25, y: 0}
                });
    
                /**使用约束(可以看成一个钉子)将最后一块木板与右侧桥墩连接起来————与上面同理*/
                var nailRight = Constraint.create({
                    bodyA: stack.bodies[stack.bodies.length - 1],
                    pointA: {x: 25, y: 0},
                    bodyB: bridge_right,
                    pointB: {x: 0, y: -100}
                });
    
                /**创建鼠标控制*/
                var mouseConstraint = MouseConstraint.create(engine, {element: document.body});
                /**创建一个圆形堆叠复合体，用于从上往下掉落，2行8列*/
                var stack_circle = Composites.stack(stageWidth / 4, 10, 8, 2, 0, 0, function (x, y) {
                    return Bodies.circle(x, y, 20);
                });
    
                World.add(engine.world, [stack_circle, mouseConstraint]);//添加掉落的堆叠圆形、鼠标控制到世界中
                /**添加左右桥墩、左右钉子、以及桥面到世界中*/
                World.add(engine.world, [bridge_left, bridge_right, stack, nailLeft, nailRight]);
                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>

![2019010313202851.gif][]

# softBody 软体 #

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

softBody 函数源码如下，本质是先建一个圆形的堆叠，然后使用网孔连接起来。

/**创建一个简单的类似软体的对象
    * Creates a simple soft body like object.
    * @param {number} xx
    * @param {number} yy
    * @param {number} columns
    * @param {number} rows
    * @param {number} columnGap
    * @param {number} rowGap
    * @param {boolean} crossBrace
    * @param {number} particleRadius
    * @param {} particleOptions
    * @param {} constraintOptions
    * @return {composite} A new composite softBody
    */
    
    Composites.softBody = function(xx, yy, columns, rows, columnGap, rowGap, crossBrace, particleRadius, particleOptions, constraintOptions) {
         particleOptions = Common.extend({ inertia: Infinity }, particleOptions);
         constraintOptions = Common.extend({ stiffness: 0.2, render: { type: 'line', anchors: false } }, constraintOptions);
    
         var softBody = Composites.stack(xx, yy, columns, rows, columnGap, rowGap, function(x, y) {
             return Bodies.circle(x, y, particleRadius, particleOptions);
         });
    
         Composites.mesh(softBody, columns, rows, crossBrace, constraintOptions);
    
         softBody.label = 'Soft Body';
    
         return softBody;
     };

演示如下：

![20190103142451490.gif][]

当将 var particleOptions = \{friction: 0.0001, collisionFilter: \{group: -1\}, render: \{visible: true\}\}; 中的 true 改为 false 时：

![20190103142654536.gif][]

官网demo地址：[http://brm.io/matter-js/demo/\#cloth][http_brm.io_matter-js_demo_cloth]

[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
[20190102115344561.gif]: /images/20220331/df3fa23cfa2146e98c0a5000142d2c4a.png
[http_brm.io_matter-js_demo_stack]: http://brm.io/matter-js/demo/#stack
[2019010313202851.gif]: /images/20220331/dbd11f03c6d544239c4aa57bc765400e.png
[20190103142451490.gif]: /images/20220331/ee553b6ef6784a398d6da0b969ffb44b.png
[20190103142654536.gif]: /images/20220331/6e48723eeffb4fed8f617eddd67f1d6c.png
[http_brm.io_matter-js_demo_cloth]: http://brm.io/matter-js/demo/#cloth