效果如图
单开门playground地址:
Babylon.js Playgroundhttps://playground.babylonjs.com/#XU8VDN
注意:通过代码调整中心点,inspector显示bug,显示的是初始中心点位置
这段代码例子中 【左门】使用了【LocalPostion】进行设置中心点位置,
相对于自身坐标系向x轴正向+1
(pg里左门为了开门x是 -1)
var doorMeshLeft = BABYLON.MeshBuilder.CreateBox("doorMeshLeft", {height: 4, width: 2, depth: 0.25});
doorMeshLeft.position = new BABYLON.Vector3(-1, 2, 0);
doorMeshLeft.setPivotPoint(new BABYLON.Vector3(1, 0, 0), BABYLON.Space.LOCAL);// pivot offset x
【右门】使用了 【世界空间坐标系】设置中心点
var doorMeshRight = BABYLON.MeshBuilder.CreateBox("doorMeshRight", {height: 4, width: 2, depth: 0.25});
doorMeshRight.position = new BABYLON.Vector3(1, 2, 0);
doorMeshRight.setPivotPoint(new BABYLON.Vector3(2, 2, 0), BABYLON.Space.WORLD);// pivot offset x
绘制xyz辅助线方法
// add guide line 辅助坐标系 xyz线
var showAxis = function (size) {
var makeTextPlane = function (text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);
var plane = BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size / 10);
xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),
new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size / 10);
yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size * 0.95),
new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size / 10);
zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
};
showAxis(10);
额外补充
注册鼠标点击事件 和 代码自动执行事件
//无动画,注册鼠标点击事件
_tempMesh.actionManager = new BABYLON.ActionManager(scene);
_tempMesh.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(
BABYLON.ActionManager.OnPickTrigger, function(e){
console.log(e.source.id);
console.log(e.source.rotation);
e.source.rotation = new BABYLON.Vector3(0, 30, 0);//reset rotationQuaternion OK
e.source.rotation.y = -Math.PI/2 ;
}));
//自动执行事件中的动作
let openDoorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, _tempMesh, "rotation.y",_tempOpenRotator , 1500);
_tempMesh.openDoorAction = openDoorAction;
setTimeout(function(){
_tempMesh.openDoorAction.execute();
},1500);
Playground代码如下:
var createScene = function () {
var scene = new BABYLON.Scene(engine);
// Lights
var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, 2, 2), scene);
var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, 12, -15), scene);
// Need a free camera for collisions
var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 2.2, -16), scene);
camera.setTarget(new BABYLON.Vector3(0, 0, 0));
camera.attachControl(canvas, true);
camera.keysUp.push(87);
camera.keysDown.push(83);
camera.keysLeft.push(65);
camera.keysRight.push(68);
camera.speed=0.2;
camera.inertia =0.8;
camera.minZ=0.05;
//limit
scene.registerBeforeRender(function () {
console.log(camera.rotation.x);
if(camera.rotation.x>0.5 ){//look down
camera.rotation.x = 0.5;
}else if(camera.rotation.x<-0.3){//look up
camera.rotation.x = -0.3;
}
})
var doorMeshLeft = BABYLON.MeshBuilder.CreateBox("doorMeshLeft", {height: 4, width: 2, depth: 0.25});
doorMeshLeft.position = new BABYLON.Vector3(-1, 2, 0);
doorMeshLeft.setPivotPoint(new BABYLON.Vector3(-1, 0, 0), BABYLON.Space.LOCAL);// pivot offset x
openDoorRegAction(doorMeshLeft,true);
var doorMeshRight = BABYLON.MeshBuilder.CreateBox("doorMeshRight", {height: 4, width: 2, depth: 0.25});
doorMeshRight.position = new BABYLON.Vector3(1, 2, 0);
doorMeshRight.setPivotPoint(new BABYLON.Vector3(2, 2, 0), BABYLON.Space.WORLD);// pivot offset x
openDoorRegAction(doorMeshRight,false);
/**
* open single door
* */
function openDoorRegAction(_tempMesh,isLeft){
_tempMesh.checkCollisions = false;
console.log(_tempMesh.id);
_tempMesh.actionManager = new BABYLON.ActionManager(scene);
var _tempOpenRotator = 0;
if(isLeft){
_tempOpenRotator = -Math.PI/2;
}else{
_tempOpenRotator = Math.PI/2;
}
_tempMesh.rotationQuaternion = null;
// _tempMesh.rotation = new BABYLON.Vector3(0, 0, 0);//reset rotationQuaternion OK
let openDoorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, _tempMesh, "rotation.y",_tempOpenRotator , 1500);
_tempMesh.openDoorAction = openDoorAction;
let closeDoorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, _tempMesh, "rotation.y", 0, 1500);
_tempMesh.closeDoorAction = closeDoorAction;
_tempMesh.actionManager.registerAction(openDoorAction)
.then(closeDoorAction);
console.log("openDoorRegAction - _tempMesh:",_tempMesh.name);
/*
//delay auto open door
setTimeout(function(){
_tempMesh.openDoorAction.execute();
},1500);
*/
/*
//1. no anim
_tempMesh.actionManager = new BABYLON.ActionManager(scene);
_tempMesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function(e){
console.log(e.source.id);
console.log(e.source.rotation);
e.source.rotation = new BABYLON.Vector3(0, 30, 0);//reset rotationQuaternion OK
e.source.rotation.y = -Math.PI/2 ;
}));
*/
}
// add guide line
var showAxis = function (size) {
var makeTextPlane = function (text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);
var plane = BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size / 10);
xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),
new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size / 10);
yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size * 0.95),
new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size / 10);
zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
};
showAxis(10);
//Ground
var ground = BABYLON.Mesh.CreatePlane("ground", 80.0, scene);
ground.material = new BABYLON.StandardMaterial("groundMat", scene);
ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
ground.material.backFaceCulling = false;
ground.position = new BABYLON.Vector3(0, 0, 0);
ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
//Simple crate
var box = BABYLON.Mesh.CreateBox("crate", 2, scene);
box.material = new BABYLON.StandardMaterial("Mat", scene);
box.material.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);
box.material.diffuseTexture.hasAlpha = true;
box.position = new BABYLON.Vector3(5, 1, -10);
//Set gravity for the scene (G force like, on Y-axis)
scene.gravity = new BABYLON.Vector3(0, -0.9, 0);
// Enable Collisions
scene.collisionsEnabled = true;
//Then apply collisions and gravity to the active camera
camera.checkCollisions = true;
// camera.applyGravity = true;
//Set the ellipsoid around the camera (e.g. your player's size)
camera.ellipsoid = new BABYLON.Vector3(1, 1.1, 1);// Y*2 is character Height
//finally, say which mesh will be collisionable
ground.checkCollisions = true;
box.checkCollisions = true;
return scene;
}