Matter-JS Composites 混合材料 · 下
阿新 • • 發佈：2019-01-06
目錄
Composites
1、多個剛體通過約束組合在一起，稱為複合體。複合體對外當作一個剛體，複合體的物理屬性是通過所包含的剛體的屬性綜合計算出來的。
2、Matter.Composite 模組包含用於建立和處理複合體的方法。
3、Matter.Composites 模組提供了幾種特別的複合材料，如鏈：Composites.chain、牛頓擺：Composites.newtonsCradle、軟體：Composites.softBody、汽車：Composites.car 、堆疊：Composites.stack、網格：mesh、金字塔：pyramid。
4、Matter.Composites 模組提供了幾種特別的複合材料，如鏈：Composites.chain、牛頓擺：Composites.newtonsCradle、軟體：Composites.softBody、汽車：Composites.car 、堆疊：Composites.stack、網格：mesh、金字塔：pyramid。
5、本文主要講解
car 汽車
官網API：http://brm.io/matter-js/docs/classes/Composites.html#method_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>
<!--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 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>
提示：上面使用的是 matter.js 0.14.2 版本，親測 0.12.0 版本時樣式不是這樣的，而且當兩輛車重疊時會有明顯的抖動。
官網Demo：http://brm.io/matter-js/demo/#car
newtonsCradle 牛頓擺
官網API：http://brm.io/matter-js/docs/classes/Composites.html#method_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>
<!--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 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>
官網demo：http://brm.io/matter-js/demo/#newtonsCradle