Babylon.js實作碰撞效果
- 前言
- 最終實作效果
- 本文實作效果
- 完整代碼
- 代碼分解
-
- 0.NPM安裝Ammo.js實體引擎依賴
- 1.初始化實體引擎
- 2.地面和小車加入碰撞體
- 3.引入方塊碰撞體
- 後續計劃
-
- Babylon.js
- Blockly
- 開源項目GitHub連結
- 資源下載下傳連結
- 你的點贊是我繼續編寫的動力
前言
前段時間想要做一個web端的圖形化積木式程式設計（類似少兒程式設計）的案例，網上沖浪了一圈又一圈，終于技術選型好，然後代碼一頓敲，終于出來了一個雛形。
TIPS：該案例設計主要參考iRobot Coding,隻用做學習用途，侵删。
https://code.irobot.com/#/
最終實作效果
本文實作效果
- 實作碰撞效果
Vue實作圖形化積木式程式設計(四)前言最終實作效果本文實作效果完整代碼代碼分解後續計劃開源項目GitHub連結資源下載下傳連結你的點贊是我繼續編寫的動力
完整代碼
- 實作碰撞效果
<template>
<div style="height: 100%;width: 100%;">
<div>
<canvas id="renderCanvas"></canvas>
</div>
</div>
</template>
<script>
import * as BABYLON from 'babylonjs';
import * as BABYLON_MATERAIAL from "babylonjs-materials"
import ammo from "ammo.js";
import utils from "./utils";
//全局變量
var scene = null //場景執行個體
var engine = null //3d引擎執行個體
var camera = null //錄影機執行個體
var plane = null //綠地
var ground = null //網格
var skybox = null //天空盒
var car = null //小車
var cubeParent = null //方塊組
var startingPoint = new BABYLON.Vector3(0, 0, 0)//目前點選位置
// 品質 、摩擦系數、反彈系數
const bodyMass = 0.5, bodyFriction = 0.5, bodyRestitution = 0.9;
const groundFriction = 0.8, groundRestitution = 0.5;
async function loadScene() {
//場景初始化，可看文章一
scene = initScene()
//加載網絡模型，可看文章二
await initRobot()
//可看文章三，監聽拖動事件，實作點選拖動模型
dragListening()
//本文内容
// 1、初始化重力碰撞系統
await initAmmo()
// 2、将地面和小車加入碰撞體
addPhysicEffect()
//3、加入碰撞體方塊
initCubes()
//開啟debug視窗
// scene.debugLayer.show()
}
async function initAmmo() {
const Ammo = await ammo();
console.log("Ammo", Ammo)
//啟用y方向重力
scene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.AmmoJSPlugin(true, Ammo));
scene.onReadyObservable.add(function () {
console.log(scene.getPhysicsEngine()._physicsPlugin.bjsAMMO.btDefaultCollisionConfiguration());
console.log(scene.getPhysicsEngine()._physicsPlugin._collisionConfiguration);
console.log(scene.getPhysicsEngine()._physicsPlugin._dispatcher);
console.log(scene.getPhysicsEngine()._physicsPlugin._solver);
console.log(scene.getPhysicsEngine()._physicsPlugin.world);
});
}
function addPhysicEffect() {
//地面啟用碰撞體
plane.physicsImpostor = new BABYLON.PhysicsImpostor(plane, BABYLON.PhysicsImpostor.BoxImpostor, {
mass: 0,
restitution: groundRestitution,
friction: groundFriction
}, scene);
//小車啟用碰撞體
var robotBody = utils.getMeshFromMeshs(car, "Glass_Plane.006")
console.log('robotBody', robotBody)
var robotSize = utils.getMeshSize(robotBody)
var robotScale = 50
const robotScalingFactor = robotScale / 10;
var physicsRoot = makePhysicsObjects(car, scene, robotScalingFactor, robotSize)
//小車執行個體
car = physicsRoot
}
function makePhysicsObjects(newMeshes, scene, scaling, size) {
var physicsRoot = new BABYLON.Mesh("robot", scene);
physicsRoot.position.y -= 2
newMeshes.forEach((m) => {
if (m.parent == null) {
physicsRoot.addChild(m)
}
})
// 将所有碰撞體加入physics impostor
physicsRoot.getChildMeshes().forEach((m) => {
m.scaling.x = Math.abs(m.scaling.x)
m.scaling.y = Math.abs(m.scaling.y)
m.scaling.z = Math.abs(m.scaling.z)
// console.log("m.name",m.name)
m.physicsImpostor = new BABYLON.PhysicsImpostor(m, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 0.1}, scene);
})
// 縮放根對象并将其變成physics impostor
physicsRoot.scaling.scaleInPlace(scaling)
physicsRoot.physicsImpostor = new BABYLON.PhysicsImpostor(physicsRoot, BABYLON.PhysicsImpostor.NoImpostor, {
mass: bodyMass,
friction: bodyFriction,
restitution: bodyRestitution
}, scene);
//轉為碰撞體後，其y軸會偏移，偏移比例根據實際調整
const impostorOffset = -(size.y) / 1.1
physicsRoot.physicsImpostor.setDeltaPosition(new BABYLON.Vector3(0, impostorOffset, 0));
physicsRoot.position.subtractInPlace(new BABYLON.Vector3(0, -impostorOffset, 0));
return physicsRoot
}
function initCubes() {
var scale = 1
const scalingFactor = scale / 10;
cubeParent = new BABYLON.TransformNode("cubes");
const cubeHeight = 80 * scalingFactor
var cube = createBasicRoundedBox(scene, "cube", cubeHeight)
cube.position._y += cubeHeight / 2
cube.position._x -= 100
cube.material = new BABYLON.StandardMaterial("amaterial", scene);
cube.material.diffuseColor = new BABYLON.Color3(16 / 255.0, 156 / 255.0, 73 / 255.0);
cubeParent[0] = cube
var cube2 = createBasicRoundedBox(scene, "cube2", cubeHeight)
cube2.position._y += cubeHeight / 2
cube2.position._x -= 100
cube2.position._z += cubeHeight * 2
cube2.material = new BABYLON.StandardMaterial("amaterial", scene);
cube2.material.diffuseColor = new BABYLON.Color3(48 / 255.0, 102 / 255.0, 150 / 255.0);
cubeParent[1] = cube2
var cube3 = createBasicRoundedBox(scene, "cube3", cubeHeight)
cube3.position._y += cubeHeight / 2
cube3.position._x -= 100
cube3.position._z -= cubeHeight * 2
cube3.material = new BABYLON.StandardMaterial("amaterial", scene);
cube3.material.diffuseColor = new BABYLON.Color3(199 / 255.0, 88 / 255.0, 93 / 255.0);
cubeParent[2] = cube3
//對象事件監聽
let actionManager = new BABYLON.ActionManager(scene);
cube.actionManager = actionManager;
cube2.actionManager = actionManager;
cube3.actionManager = actionManager;
// 方塊滑鼠hover高亮
var hl = new BABYLON.HighlightLayer("hl1", scene);
actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, function (evn) {
var hover_cube = evn.meshUnderPointer.id
if (hover_cube == cube.name) {
hl.addMesh(cube, BABYLON.Color3.White());
} else if (hover_cube == cube2.name) {
hl.addMesh(cube2, BABYLON.Color3.White());
} else if (hover_cube == cube3.name) {
hl.addMesh(cube3, BABYLON.Color3.White());
}
}));
//方塊滑鼠hover離開取消高亮
actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, function (evn) {
var hover_cube = evn.meshUnderPointer.id
if (hover_cube == cube.name) {
hl.removeMesh(cube);
} else if (hover_cube == cube2.name) {
hl.removeMesh(cube2);
} else if (hover_cube == cube3.name) {
hl.removeMesh(cube3);
}
}));
scene.freezeMaterials();
}
//建立帶碰撞體的方塊
function createBasicRoundedBox(scene, name, size, mass = 0.25, restitution = 0.5, friction = 0.5) {
const boxSide = size;
const sphereSide = boxSide * 3.1 / 2;
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: sphereSide, segments: 16}, scene);
const box = BABYLON.Mesh.CreateBox('box', boxSide, scene);
const intersection = BABYLON.CSG.FromMesh(box).intersect(BABYLON.CSG.FromMesh(sphere));
sphere.dispose();
box.dispose();
const roundedBox = intersection.toMesh(
name,
new BABYLON.StandardMaterial('roundedBoxMaterial', scene),
scene
);
roundedBox.draggable = true;
roundedBox.physicsImpostor = new BABYLON.PhysicsImpostor(
roundedBox,
BABYLON.PhysicsImpostor.BoxImpostor,
{mass: mass, restitution: restitution, friction: friction}
);
roundedBox.material.freeze();
roundedBox.material.specularColor = new BABYLON.Color3(0, 0, 0);
roundedBox.freezeWorldMatrix()
return roundedBox;
}
//滑鼠點選拖動監聽
function dragListening() {
// 物體拖拽事件
var canvas = engine.getRenderingCanvas();
var currentMesh;//目前點選的模型網格
//判斷目前點選對象是否是地闆
var getGroundPosition = function () {
var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {
return (mesh == ground || mesh == plane);
});
if (pickinfo.hit) {
return pickinfo.pickedPoint;
}
return null;
}
//滑鼠點下
var onPointerDown = function (evt) {
if (evt.button !== 0) {
return;
}
//判斷目前是否點選一個模型網格，如果是地闆、天空盒等對象，則設定hit為false
var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) {
return (mesh !== ground && mesh !== plane && mesh !== skybox);
});
console.log("pickInfo", pickInfo)
//如果hit為true，則不為地闆、天空盒等對象
if (pickInfo.hit) {
currentMesh = pickInfo.pickedMesh;//擷取目前點選對象
if (currentMesh.parent == null) {
console.log("no parent")//沒有父節點則就是car對象了
} else if (currentMesh.parent.name == car.name) {
//有父節點，證明現在點選的是子對象，而移動需要移動整個小車對象，是以設定目前點選mesh為父節點（即car對象）
currentMesh = currentMesh.parent
}
console.log("currentMesh", currentMesh)
//擷取目前移動時地闆的坐标
startingPoint = getGroundPosition(evt);
//移動物體時，暫時屏蔽相機的移動控制
if (startingPoint) { // we need to disconnect camera from canvas
setTimeout(function () {
camera.detachControl(canvas);
}, 0);
}
}
}
//滑鼠點選着移動中
var onPointerMove = function (evt) {
if (!startingPoint) {
return;
}
if (!currentMesh) {
return;
}
//更新目前點選的地闆位置
var current = getGroundPosition(evt);
if (!current) {
return;
}
//更新目前小車坐标位置為點選的地闆位置
console.log('startingPoint', startingPoint)
var diff = current.subtract(startingPoint);
console.log('diff', diff)
currentMesh.position.addInPlace(diff);
console.log("currentMesh.name", currentMesh.name)
//更新位置資訊
startingPoint = current;
}
//滑鼠點選後松開
var onPointerUp = function () {
//恢複相機移動控制
if (startingPoint) {
camera.attachControl(canvas, true);
startingPoint = null;
return;
}
}
//canvas綁定監聽事件
canvas.addEventListener("pointerdown", onPointerDown, false);
canvas.addEventListener("pointerup", onPointerUp, false);
canvas.addEventListener("pointermove", onPointerMove, false);
}
async function initRobot() {
console.log('initRobot')
//模型url路徑
const url = "http://localhost:8088/static/model/"
//模型名稱
const modelName = "sportcar.babylon"
var result = await BABYLON.SceneLoader.ImportMeshAsync(null, url, modelName, scene);
var meshes = result.meshes
console.log("meshes", meshes)
car = meshes
}
function initScene() {
//擷取到renderCanvas這個元素
var canvas = document.getElementById("renderCanvas");
//初始化引擎
engine = new BABYLON.Engine(canvas, true);
//初始化場景
var scene = new BABYLON.Scene(engine);
//注冊一個渲染循環來重複渲染場景
engine.runRenderLoop(function () {
scene.render();
});
//浏覽器視窗變化時監聽
window.addEventListener("resize", function () {
engine.resize();
});
//相機初始化
camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 5, new BABYLON.Vector3(0, 0, 10), scene);
camera.setPosition(new BABYLON.Vector3(20, 200, 400));
//相機角度限制
camera.upperBetaLimit = 1.5;//最大z軸旋轉角度差不多45度俯瞰
camera.lowerRadiusLimit = 50;//最小縮小比例
camera.upperRadiusLimit = 1500;//最大放大比例
//變焦速度
camera.wheelPrecision = 1; //電腦滾輪速度 越小靈敏度越高
camera.pinchPrecision = 20; //手機放大縮小速度 越小靈敏度越高
scene.activeCamera.panningSensibility = 100;//右鍵平移靈敏度
// 将相機和畫布關聯
camera.attachControl(canvas, true);
//燈光初始化
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 10, 0), scene);
//設定高光顔色
light.specular = new BABYLON.Color3(0, 0, 0);
//設定燈光強度
light.intensity = 1
// 綠地初始化
var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
materialPlane.diffuseColor = new BABYLON.Color3(152 / 255.0, 209 / 255.0, 115 / 255.0)
materialPlane.backFaceCulling = false;
materialPlane.freeze()
plane = BABYLON.MeshBuilder.CreateDisc("ground", {radius: 3000}, scene);
plane.rotation.x = Math.PI / 2;
plane.material = materialPlane;
plane.position.y = -0.1;
plane.freezeWorldMatrix()
//網格地闆初始化
const groundSide = 144;
ground = BABYLON.Mesh.CreateGround("ground", groundSide, groundSide, 1, scene, true);
var groundMaterial = new BABYLON_MATERAIAL.GridMaterial("grid", scene);
groundMaterial.mainColor = BABYLON.Color3.White();//底闆顔色
groundMaterial.alpha = 1;//透明度
const gridLineGray = 0.95;
groundMaterial.lineColor = new BABYLON.Color3(gridLineGray, gridLineGray, gridLineGray);
groundMaterial.backFaceCulling = true; // 可看到背面
//大網格間距
groundMaterial.majorUnitFrequency = 16;
//小網格間距
groundMaterial.minorUnitVisibility = 0;
const gridOffset = 8; // 網格偏移量
groundMaterial.gridOffset = new BABYLON.Vector3(gridOffset, 0, gridOffset);
groundMaterial.freeze(); // 當機材質，優化渲染速度
ground.material = groundMaterial
ground.freezeWorldMatrix()
//天空盒初始化
var skyMaterial = new BABYLON_MATERAIAL.SkyMaterial("skyMaterial", scene);
skyMaterial.inclination = 0
skyMaterial.backFaceCulling = false;
skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, scene);
skybox.material = skyMaterial;
return scene
}
export default {
name: "test",
data() {
return {}
},
async mounted() {
//加載場景
await loadScene()
},
}
</script>
<style scoped>
#renderCanvas {
width: 680px;
height: 680px;
touch-action: none;
z-index: 10000;
border-radius: 10px;
}
</style>
- utils.js - 公用方法封裝
var utils = {
//meshs中根據名稱擷取mesh
getMeshFromMeshs(newMeshes, name) {
var mesh = null
newMeshes.forEach(m => {
if (m.name == name) {
mesh = m
}
})
return mesh
},
//擷取mesh的尺寸資訊
getMeshSize(checkmesh) {
const sizes = checkmesh.getHierarchyBoundingVectors()
const size = {
x: (sizes.max.x - sizes.min.x),
y: (sizes.max.y - sizes.min.y),
z: (sizes.max.z - sizes.min.z)
}
return size
},
}
export default utils;
代碼分解
本文要實作的功能:
1、引入Ammo.js實體引擎
2、将地面和小車加入碰撞體，測試小車和地面的碰撞效果
3、加入方塊碰撞體，測試小車和方塊的碰撞效果
0.NPM安裝Ammo.js實體引擎依賴
npm install kripken/ammo.js
1.初始化實體引擎
async function initAmmo() {
const Ammo = await ammo();
console.log("Ammo", Ammo)
//啟用y方向重力
scene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.AmmoJSPlugin(true, Ammo));
scene.onReadyObservable.add(function () {
console.log(scene.getPhysicsEngine()._physicsPlugin.bjsAMMO.btDefaultCollisionConfiguration());
console.log(scene.getPhysicsEngine()._physicsPlugin._collisionConfiguration);
console.log(scene.getPhysicsEngine()._physicsPlugin._dispatcher);
console.log(scene.getPhysicsEngine()._physicsPlugin._solver);
console.log(scene.getPhysicsEngine()._physicsPlugin.world);
});
}
2.地面和小車加入碰撞體
function addPhysicEffect() {
//地面啟用碰撞體
plane.physicsImpostor = new BABYLON.PhysicsImpostor(plane, BABYLON.PhysicsImpostor.BoxImpostor, {
mass: 0,
restitution: groundRestitution,
friction: groundFriction
}, scene);
//小車啟用碰撞體
var robotBody = utils.getMeshFromMeshs(car, "Glass_Plane.006")
console.log('robotBody', robotBody)
var robotSize = utils.getMeshSize(robotBody)
var robotScale = 50
const robotScalingFactor = robotScale / 10;
var physicsRoot = makePhysicsObjects(car, scene, robotScalingFactor, robotSize)
//小車執行個體
car = physicsRoot
}
- 其中，小車初始化部分作小改動，不直接執行個體化，而是先存儲meshs的網格清單
async function initRobot() {
console.log('initRobot')
//模型url路徑
const url = "http://localhost:8088/static/model/"
//模型名稱
const modelName = "sportcar.babylon"
var result = await BABYLON.SceneLoader.ImportMeshAsync(null, url, modelName, scene);
var meshes = result.meshes
console.log("meshes", meshes)
// 直接構造一個car的父節點，然後執行個體化
// var parent = new BABYLON.Mesh("car", scene);
// const scale = 10//縮放比例
// for (var mesh of meshes) {
// mesh.scaling = new BABYLON.Vector3(scale, scale, scale)
// mesh.parent = parent
// }
// //将根節點設定為全局變量
// car = parent
//不直接執行個體化小車節點，car對象存儲meshes網格清單，在小車引入碰撞體後再執行個體化
car = meshes
}
3.引入方塊碰撞體
- 為了友善看碰撞效果，引入方塊組
- 初始化方塊組，加入碰撞體和hover高亮
function initCubes() {
var scale = 1
const scalingFactor = scale / 10;
cubeParent = new BABYLON.TransformNode("cubes");
const cubeHeight = 80 * scalingFactor
var cube = createBasicRoundedBox(scene, "cube", cubeHeight)
cube.position._y += cubeHeight / 2
cube.position._x -= 100
cube.material = new BABYLON.StandardMaterial("amaterial", scene);
cube.material.diffuseColor = new BABYLON.Color3(16 / 255.0, 156 / 255.0, 73 / 255.0);
cubeParent[0] = cube
var cube2 = createBasicRoundedBox(scene, "cube2", cubeHeight)
cube2.position._y += cubeHeight / 2
cube2.position._x -= 100
cube2.position._z += cubeHeight * 2
cube2.material = new BABYLON.StandardMaterial("amaterial", scene);
cube2.material.diffuseColor = new BABYLON.Color3(48 / 255.0, 102 / 255.0, 150 / 255.0);
cubeParent[1] = cube2
var cube3 = createBasicRoundedBox(scene, "cube3", cubeHeight)
cube3.position._y += cubeHeight / 2
cube3.position._x -= 100
cube3.position._z -= cubeHeight * 2
cube3.material = new BABYLON.StandardMaterial("amaterial", scene);
cube3.material.diffuseColor = new BABYLON.Color3(199 / 255.0, 88 / 255.0, 93 / 255.0);
cubeParent[2] = cube3
//對象事件監聽
let actionManager = new BABYLON.ActionManager(scene);
cube.actionManager = actionManager;
cube2.actionManager = actionManager;
cube3.actionManager = actionManager;
// 方塊滑鼠hover高亮
var hl = new BABYLON.HighlightLayer("hl1", scene);
actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, function (evn) {
var hover_cube = evn.meshUnderPointer.id
if (hover_cube == cube.name) {
hl.addMesh(cube, BABYLON.Color3.White());
} else if (hover_cube == cube2.name) {
hl.addMesh(cube2, BABYLON.Color3.White());
} else if (hover_cube == cube3.name) {
hl.addMesh(cube3, BABYLON.Color3.White());
}
}));
//方塊滑鼠hover離開取消高亮
actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, function (evn) {
var hover_cube = evn.meshUnderPointer.id
if (hover_cube == cube.name) {
hl.removeMesh(cube);
} else if (hover_cube == cube2.name) {
hl.removeMesh(cube2);
} else if (hover_cube == cube3.name) {
hl.removeMesh(cube3);
}
}));
scene.freezeMaterials();
}
- 建立方塊碰撞體公共方法
//建立方塊碰撞體公共方法
function createBasicRoundedBox(scene, name, size, mass = 0.25, restitution = 0.5, friction = 0.5) {
const boxSide = size;
const sphereSide = boxSide * 3.1 / 2;
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: sphereSide, segments: 16}, scene);
const box = BABYLON.Mesh.CreateBox('box', boxSide, scene);
const intersection = BABYLON.CSG.FromMesh(box).intersect(BABYLON.CSG.FromMesh(sphere));
sphere.dispose();
box.dispose();
const roundedBox = intersection.toMesh(
name,
new BABYLON.StandardMaterial('roundedBoxMaterial', scene),
scene
);
roundedBox.draggable = true;
roundedBox.physicsImpostor = new BABYLON.PhysicsImpostor(
roundedBox,
BABYLON.PhysicsImpostor.BoxImpostor,
{mass: mass, restitution: restitution, friction: friction}
);
roundedBox.material.freeze();
roundedBox.material.specularColor = new BABYLON.Color3(0, 0, 0);
roundedBox.freezeWorldMatrix()
return roundedBox;
}
後續計劃
Babylon.js
- 自定義啟動界面
- babylonjs-gui 按鈕實作
- 将3d界面放入可拖動視窗中
Blockly
- 入門使用blockly
- 自定義block塊
- blockly第三方元件使用
- 接入js-interpreter，步驟運作block塊
- …(想到啥寫啥)
開源項目GitHub連結
https://github.com/Wenbile/Child-Programming-Web
資源下載下傳連結
- Vue前端源碼
- ThinkJS後端源碼