How to find the coordinates of a click on the Babylon.js site?

Asked

Viewed 89 times

0

Good afternoon, you guys

I’ve just started on Babylon, I’m looking for some way to find out the mouse position when there’s a click on the canvas. I could easily discover this for a given object, but not for the Cene itself (!?) I don’t know what could be wrong, it sounds silly, but I haven’t found out for hours... Who can help, thank you!

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

    //não funciona
    scene.actionManager = new BABYLON.ActionManager(scene);
    scene.actionManager.registerAction(onpickAction);

    //funciona normalmente
    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>

javascript webgl graphics

1 answer

0

Hello,

There is the onPointerDown event in Babylon where you can catch the events follows the documentation and a example.

I hope it helps.

Browser other questions tagged javascript webgl graphics

You are not signed in. Login or sign up in order to post.