BabylonJS - Công cụ vật lý
Babylon.js có hệ thống plugin cho công cụ Vật lý giúp thêm các tương tác vào cảnh, hiển thị va chạm và nảy giữa 2 đối tượng và làm cho nó giống như tương tác trong đời thực hơn. Bản demo sẽ cho thấy các quả bóng va chạm với nhau và di chuyển xung quanh chúng tôi nhận thấy hành vi tương tự với các trò chơi như bida, trong đó người chơi đánh bóng bằng gậy và các quả bóng va chạm với các quả bóng khác, v.v. Ở đây, Công cụ Vật lý cố gắng cung cấp một cái nhìn thực tế về các quả bóng va chạm và nảy lên khi chúng chạm mặt đất. Engine có các lớp và API giúp áp dụng các hàm xung, lực, thay đổi vận tốc, gọi lại được gọi bất cứ khi nào được yêu cầu và cũng như khi chúng ta cần thực hiện một số hành động nếu các mắt lưới va chạm với các mắt lưới khác.
Có 3 plugin Vật lý có thể được sử dụng -
- Cannon.js
- Oimo.js
- Energy.js
Bản giới thiệu
<!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 () {
// This creates a basic Babylon Scene object (non-mesh)
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;
// push all spheres in the allspheres variable
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>Đầu ra
Dòng mã trên tạo ra kết quả sau:
Trong bản demo này, chúng tôi đã sử dụng hình ảnh images/gr1.jpg. Các hình ảnh được lưu trữ trong thư mục image / local và cũng được dán bên dưới để tham khảo. Bạn có thể tải xuống bất kỳ hình ảnh nào bạn chọn và sử dụng trong liên kết demo.
hình ảnh / gr1.jpg
Giải trình
scene.enablePhysics(new BABYLON.Vector3(0,-10,0), new BABYLON.OimoJSPlugin());Dòng trên bật plugin Vật lý. Bạn có thể sử dụng plugin mà bạn chọn. Chúng tôi đã sử dụng OimoJsplugin ().
g.physicsImpostor = newBABYLON.PhysicsImpostor(g, BABYLON.PhysicsImpostor.BoxImpostor, {
mass: 0,
restitution: 0.9
}, scene);Để tương tác, động cơ Vật lý sử dụng kẻ mạo danh. Khi áp dụng cho kẻ mạo danh, hình dạng của đối tượng không thể thay đổi. Nếu thay đổi, một kẻ mạo danh mới sẽ phải được tạo.
Đối với quả cầu, chúng tôi sẽ đặt bộ phận giả mạo và cũng thêm xung lực vào quả cầu để có hiệu ứng dội lại như được minh họa -
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)
);Các thông số cho vật lýImposter
Xem xét các thông số sau cho các hiệu ứng Vật lý:
Vật
Đây là đối tượng mà bạn muốn áp dụng tương tác. Ví dụ, hình cầu, hình hộp, v.v.
Kiểu
Loại có thể là một trong những loại sau:
- BABYLON.PhysicsImpostor.SphereImpostor;
- BABYLON.PhysicsImpostor.BoxImpostor;
- BABYLON.PhysicsImpostor.PlaneImpostor;
- BABYLON.PhysicsImpostor.MeshImpostor;
- BABYLON.PhysicsImpostor.CylinderImpostor;
- BABYLON.PhysicsImpostor.ParticleImpostor;
- BABYLON.PhysicsImpostor.HeightmapImpostor;
Khối lượng
Tham số bắt buộc duy nhất là khối lượng, là khối lượng của vật thể tính bằng kg. Giá trị 0 là một giá trị sẽ tạo ra một kẻ giả mạo tĩnh - tốt cho các tầng.
Sự thay thế
Đây là lực mà cơ thể sẽ "trả lại" khi va chạm. Giá trị thấp sẽ không tạo ra số trang không truy cập và giá trị 1 sẽ là tương tác rất nhiều lần thoát.
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);
}
});
})Đoạn mã trên mang lại những quả cầu rơi trên mặt đất. Nó tiếp tục cập nhật mặt đất cho bất kỳ quả cầu rơi nào. Hãy thử bản trình diễn trên trong trình duyệt để xem hiệu ứng Vật lý.