How to find the coordinates of a click in the Babylon.js scene?

Question

I'm starting in Babylon not long ago, I'm looking for some way to find the coordinates of mouse when there is a click on the canvas. I was able to easily find this for a given object, but not for the scene itself (!?) I do not know what could be wrong, it seems silly, but I have not found the solution...

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>

score 2 · Answer 1 · edited Apr 14 '20 at 00:07

To get the position of a mouse click within the scene use scene.onPointerDown, you can also obtain left and right mouse clicks as well like so:

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 );
        }
}

Coordinates: Variable pickedResult will come back with a few parameters, one being pickedPoint that you can use to pull the coordinates from.

Mouse Button: The event will return back values for the window event and will give you back button codes upon using event.button.

**note: each if statement shows a different way to grab the coordinates.

In your example:

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();
});
});

score 1 · Answer 2 · answered Aug 27 '17 at 21:59

the action manager does not handle pick directly on the scene but you can rely on scene.onPointerDownObservable which will give you all that you need: https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.scene.ts#L445

It will provide you a PointerInfo: http://doc.babylonjs.com/classes/3.0/pointerinfo

score 0 · Answer 3 · answered Aug 27 '17 at 13:26

0

Looks like Babylon doesn't have this kind of event. You can make this base on canvas events and simple calculation. Here is example how to make this:

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

answered Aug 27 '17 at 13:26

hsd

452
5
12

How to find the coordinates of a click in the Babylon.js scene?

3 Answers3