Babylon.js

45 阅读1分钟

- 添加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;
};

还未完全实现...