- 添加GUI按钮,实现人物移动和转向
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2.5, 150, new BABYLON.Vector3(0, 60, 0));
camera.upperBetaLimit = Math.PI / 2.2;
// camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
// 创建地面
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 100, height: 100}, scene);
ground.material = new BABYLON.StandardMaterial("groundMat", scene);
ground.material.diffuseColor = new BABYLON.Color3(0.2, 0.5, 0.2);
ground.material.specularColor = new BABYLON.Color3(0, 0, 0);
// 创建一个人物模型
var mesh = BABYLON.MeshBuilder.CreateBox("mesh", {size: 10}, scene);
mesh.material = new BABYLON.StandardMaterial("meshMat", scene);
mesh.material.diffuseColor = new BABYLON.Color3(0, 0.5, 1);
mesh.material.specularColor = new BABYLON.Color3(1, 1, 1);
mesh.position.y = 1;
// 获取GUI系统和场景对象
var guiTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
// var scene = engine.scenes[0];
var button2 = new BABYLON.GUI.Ellipse();
button2.width = "100px";
button2.height = "100px";
button2.color = "white";
button2.thickness = 2;
button2.background = "black";
// 设置对齐方式,向上和向左
button2.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
button2.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
button2.alpha = 0.4
button2.onPointerOutObservable.add(function(){
guiTexture.removeControl(button2)
guiTexture.removeControl(button3);
})
// guiTexture.addControl(button2);
var button3 = new BABYLON.GUI.Ellipse('b3');
button3.width = "80px";
button3.height = "80px";
button3.color = "white";
button3.thickness = 2;
button3.background = "black";
// button3.top = "440.43475341796875px";
// button3.left = "10px";
// 设置对齐方式,向上和向左
button3.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
button3.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
// guiTexture.addControl(button3);
button3CenterLocation = new BABYLON.Vector3(50,0,50)
let isClicked = false
// 监听PointerDown事件
// button3.onPointerDownObservable.add(function() {
// // 取消Pointer Lock API
// // scene.onPointerObservable = null;
// // isClicked = true
// console.log("The button is clicked");
// });
// button3.onPointerOutObservable.add(function() {
// // 取消Pointer Lock API
// // scene.onPointerObservable = abserve;
// // isClicked = false
// button2.alpha = 0
// console.log("The button is leave");
// })
// button3.onPointerMoveObservable.add(function(){
// isClicked = true
// console.log('isClicked',isClicked)
// })
// button3.onPointerUpObservable.add(function() {
// // 取消Pointer Lock API
// // scene.onPointerObservable = abserve;
// isClicked = false
// button2.alpha = 0
// console.log("The button is up");
// });
scene.onPointerDown = function (evt, pickResult){
// 将GUI控件放置在一开始点击处
// 获取点击位置的屏幕坐标
// 向左和向上对齐时,减去元素的1/2宽度以及整体高度
var screenPosition = new BABYLON.Vector2(evt.clientX-40, evt.clientY-80);
// 80+(100-80/2)
var screenPosition1 = new BABYLON.Vector2(evt.clientX-50, evt.clientY-90);
console.log('location',screenPosition)
button3.left = screenPosition.x+'px'
button3.top = screenPosition.y+'px'
button2.left = screenPosition1.x+'px'
button2.top = screenPosition1.y+'px'
console.log('left',button3.left)
console.log('top',button3.top)
guiTexture.addControl(button2)
guiTexture.addControl(button3)
// 设置圆形控件的位置
isClicked = true
}
scene.onPointerUp = function(evt, pickResult){
// 删除控件
guiTexture.removeControl(button2)
guiTexture.removeControl(button3);
isClicked = false
}
// 监听PointerMove事件
scene.onPointerMove = function (evt, pickResult) {
// 在控制台中输出鼠标移动的坐标
// console.log("Mouse coordinates: (" + evt.clientX + ", " + evt.clientY + ")");
if(isClicked){
// console.log("Mouse coordinates: (" + evt.clientX + ", " + evt.clientY + ")");
// 计算与人物之间的向量
// console.log('pick',pickResult.pickedPoint)
// var direction = pickResult.pickedPoint.subtract(player.position);
// direction.y = 0;
// direction.normalize();
const pointLocation = new BABYLON.Vector3(evt.clientX,0,evt.clientY)
// var direction = pointLocation.subtract(button3CenterLocation);
var angle = Math.atan2(pointLocation.x, pointLocation.y)*180/Math.PI;
console.log(angle)
// angle = angle < 0 ? angle + 2 * Math.PI : angle;
mesh.rotation.y = -angle;
}
// 在控制台中输出交互对象信息
if (pickResult.hit) {
console.log("Interacted with object: " + pickResult.pickedMesh.name);
}
};
return scene;
};
还未完全实现...