Question

我不久前在巴比伦开始，我正在寻找一些方法来找到画布上点击鼠标的坐标。我能够很容易地找到这个给定的对象，但不是为了场景本身（！？）我不知道什么是错的，它看起来很傻，但我还没有找到解决方案......

window.addEventListener('DOMContentLoaded', function () {
    var canvas = document.getElementById('canvas');
    var engine = new BABYLON.Engine(canvas, true); 
            
    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3.White();

        var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
        var camera = new BABYLON.ArcRotateCamera("arcCam",
                     BABYLON.Tools.ToRadians(45),
                     BABYLON.Tools.ToRadians(45),
                     10.0,box.position,scene);
                     camera.attachControl(canvas,true);

        var light = new BABYLON.PointLight("pointLight",new BABYLON.Vector3(
            0,10,0),scene);
        light.diffuse = new BABYLON.Color3(1,1,1);

        var onpickAction = new BABYLON.ExecuteCodeAction(
        BABYLON.ActionManager.OnPickTrigger,
        function(evt) {
            console.log("(",evt.pointerX,",",evt.pointerY,")");  
        });

        //doesn't work (???)
        scene.actionManager = new BABYLON.ActionManager(scene);
        scene.actionManager.registerAction(onpickAction);

        //works fine
        box.actionManager = new BABYLON.ActionManager(scene);
        box.actionManager.registerAction(onpickAction);

        return scene;
    }

    var scene = createScene();
    engine.runRenderLoop(function () {
        scene.render();
    });
 });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js"></script>
    <style>
        #canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

Answer 1

看起来巴比伦没有这种事件。您可以根据canvas事件和简单计算来做到这一点。以下是如何进行此操作的示例：

How do I add a simple onClick event handler to a canvas element?

Answer 2

动作管理器不直接处理场景中的选择，但您可以依赖scene.onPointerDownObservable，它将为您提供所需的一切： https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.scene.ts#L445

它将为您提供一个PointerInfo：http://doc.babylonjs.com/classes/3.0/pointerinfo

Answer 3

要使用scene.onPointerDown获取场景中鼠标单击的位置，还可以像这样获得左右鼠标单击：

let vector = { x:'', y:'', z:'' };
scene.onPointerDown = function (event, pickResult){
        //left mouse click
        if(event.button == 0){
                vector = pickResult.pickedPoint;
                console.log('left mouse click: ' + vector.x + ',' + vector.y + ',' + vector.z );
        }
        //right mouse click
        if(event.button == 2){
                vector.x = pickResult.pickedPoint.x;
                vector.y = pickResult.pickedPoint.y;
                vector.z = pickResult.pickedPoint.z;
                console.log('right mouse click: ' + vector.x + ',' + vector.y + ',' + vector.z );
        }
        //Wheel button or middle button on mouse click
        if(event.button == 1){
                vector['x'] = pickResult.pickedPoint['x'];
                vector['y'] = pickResult.pickedPoint['y'];
                vector['z'] = pickResult.pickedPoint['z'];
                console.log('middle mouse click: ' + vector.x + ',' + vector.y + ',' + vector.z );
        }
}

坐标： 变量pickedResult将返回几个参数，其中一个是pickedPoint，可用于从中提取坐标。

鼠标按钮： event将返回window事件的值，并在使用event.button时为您提供返回的按钮代码。

**注意：每个if语句都显示了获取坐标的不同方法。

在您的示例中：

window.addEventListener('DOMContentLoaded', function () {
    var canvas = document.getElementById('canvas');
    var engine = new BABYLON.Engine(canvas, true); 

    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3.White();

        var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
        var camera = new BABYLON.ArcRotateCamera("arcCam",
                     BABYLON.Tools.ToRadians(45),
                     BABYLON.Tools.ToRadians(45),
                     10.0,box.position,scene);
                     camera.attachControl(canvas,true);

        var light = new BABYLON.PointLight("pointLight",new BABYLON.Vector3(
            0,10,0),scene);
        light.diffuse = new BABYLON.Color3(1,1,1);

        scene.onPointerDown = function (event, pickResult){
              console.log('(' + pickResult.pickedPoint.x + ',' + pickResult.pickedPoint.y +',' + pickResult.pickedPoint.z +')');  
        }
    }
    return scene;
}

var scene = createScene();
engine.runRenderLoop(function () {
    scene.render();
});
});

如何在Babylon.js场景中找到点击的坐标？

3 个答案: