BabylonJS - 物理引擎
Babylon.js 具有物理引擎插件系统，可帮助为场景添加交互。它显示两个对象之间的碰撞和弹跳，使其更像现实生活中的交互。演示将显示球相互碰撞并在碰撞中移动并随后静止。我们注意到台球等游戏中也有同样的行为，玩家用球杆击球，球与其他球碰撞等等。在这里，物理引擎试图提供球撞击地面时碰撞和弹跳的真实视图。引擎具有类和 API，可帮助应用脉冲、力、改变速度、回调函数(在需要时调用)，以及当网格与其他网格发生碰撞时，我们需要执行某些操作时调用回调函数。
有 3 个物理插件可供使用 −
- Cannon.js
- Oimo.js
- Energy.js
演示
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Ball/Ground Demo</title>
<script type = "text/javascript" src="https://cdn.babylonjs.com/Oimo.js"></script>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var v3 = BABYLON.Vector3;
var createScene = function () {
// 这将创建一个基本的 Babylon Scene 对象(非网格)
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", 0.86, 1.37, 250, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas);
camera.maxZ = 5000;
camera.lowerRadiusLimit = 120;
camera.upperRadiusLimit = 430;
camera.lowerBetaLimit =0.75;
camera.upperBetaLimit =1.58 ;
new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
var randomNumber = function (min, max) {
if (min == max) {
return (min);
}
var random = Math.random();
return ((random * (max - min)) + min);
};
var mat = new BABYLON.StandardMaterial("ground", scene);
var t = new BABYLON.Texture("images/gr1.jpg", scene);
t.uScale = t.vScale = 10;
mat.diffuseTexture = t;
mat.specularColor = BABYLON.Color3.Black();
var g = BABYLON.Mesh.CreateBox("ground", 200, scene);
g.position.y = -20;
g.position.x = 0
g.scaling.y = 0.01;
g.material = mat;
scene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.OimoJSPlugin());
g.physicsImpostor = new BABYLON.PhysicsImpostor(g, BABYLON.PhysicsImpostor.BoxImpostor, {
mass: 0,
restitution: 0.9
}, scene);
var getPosition = function(y) {
return new v3(randomNumber(-100, 100), y, randomNumber(-100, 100));
};
var allspheres = [];
var y = 50;
var max = 50;
for (var index = 0; index < max; index++) {
var redSphere = BABYLON.Mesh.CreateSphere("s" + index, 32, 8, scene);
redSphere.position = getPosition(y);
redSphere.physicsImpostor = new BABYLON.PhysicsImpostor(redSphere, BABYLON.PhysicsImpostor.SphereImpostor,{
mass: 1, restitution:0.9
}, scene);
redSphere.physicsImpostor.applyImpulse(new BABYLON.Vector3(1, 2, -1), new BABYLON.Vector3(1, 2, 0));
var redMat = new BABYLON.StandardMaterial("ground", scene);
redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
redMat.emissiveColor = BABYLON.Color3.Red();
redSphere.material = redMat;
// 将所有球体推送到 allspheres 变量中
allspheres.push(redSphere);
y += 10; // increment height
}
scene.registerBeforeRender(function() {
allspheres.forEach(function(obj) {
// if the sphers falls down its updated again over here
// If object falls
if (obj.position.y < -100) {
obj.position = getPosition(200);
}
});
})
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
输出
上述代码行生成以下输出 −
在此演示中，我们使用了图像 images/gr1.jpg。图像存储在本地 images/ 文件夹中，也粘贴在下面以供参考。您可以下载您选择的任何图像并在演示链接中使用。
images/gr1.jpg
解释
scene.enablePhysics(new BABYLON.Vector3(0,-10,0), new BABYLON.OimoJSPlugin());
上述代码行启用了物理插件。您可以使用您选择的插件。我们使用了 OimoJsplugin()。
g.physicsImpostor = newBABYLON.PhysicsImpostor(g, BABYLON.PhysicsImpostor.BoxImpostor, {
mass: 0,
restitution: 0.9
}, scene);
对于交互，物理引擎使用替代者。当应用于替代者时，对象的形状无法更改。如果更改，则必须创建一个新的替代者。
对于球体，我们将设置替代者并为其添加脉冲以实现弹跳效果，如图所示 −
redSphere.physicsImpostor = new BABYLON.PhysicsImpostor(
redSphere, BABYLON.PhysicsImpostor.SphereImpostor, {
mass: 1,
restitution:0.9
}, scene
);
redSphere.physicsImpostor.applyImpulse(
new BABYLON.Vector3(1, 2, -1),
new BABYLON.Vector3(1, 2, 0)
);
physicsImposter 的参数
考虑以下物理效果参数 −
对象
此处的对象是您想要应用交互的对象。例如，球体、盒子等。
类型
类型可以是以下之一 −
- BABYLON.PhysicsImpostor.SphereImpostor;
- BABYLON.PhysicsImpostor.BoxImpostor;
- BABYLON.PhysicsImpostor.PlaneImpostor;
- BABYLON.PhysicsImpostor.MeshImpostor;
- BABYLON.PhysicsImpostor.CylinderImpostor;
- BABYLON.PhysicsImpostor.ParticleImpostor;
- BABYLON.PhysicsImpostor.HeightmapImpostor;
质量
唯一必需的参数是质量，即物体的质量(以千克为单位)。值为 0 时将创建静态冒名顶替者 - 适用于地板。
恢复
这是物体在碰撞时"回馈"的力量。值较低时不会产生反弹，值为 1 时会产生非常有弹性的相互作用。
scene.registerBeforeRender(function() {
allspheres.forEach(function(obj) {
// 如果球体掉落，它会在这里再次更新
// If object falls
if (obj.position.y < -100) {
obj.position = getPosition(200);
}
});
})
上述代码将掉落的球体带回到地面。它会不断更新掉落球体的地面。在浏览器中尝试上述演示以查看物理效果。
