fdeng Posted August 30, 2018 Share Posted August 30, 2018 Hi everyone, I'm trying to go from world to screen coordinates, this is my code: onPointerDown = function (evt) { console.log("pointer:", this._scene.pointerX, this._scene.pointerY); var pickResult = this._scene.pick(this._scene.pointerX, this._scene.pointerY, null, null, this._camera); if(pickResult.hit) { var transformMatrix = this._scene.getTransformMatrix(); var viewport = this._camera.viewport.toGlobal(this._engine); var coordinates = BABYLON.Vector3.Project(pickResult.pickedPoint, BABYLON.Matrix.Identity(), transformMatrix, viewport); console.log("screen coordinates:", coordinates.x, coordinates.y); } } But the screen coordinates I got is wrong: I've tried such code in PG, it works fine, but not working in my own code. So, any reason that may cause the wrong result? Quote Link to comment Share on other sites More sharing options...
dbawel Posted August 30, 2018 Share Posted August 30, 2018 @fdeng Here's a post I answered some time ago. If you require more help, I'm sure you'll post back. DB Quote Link to comment Share on other sites More sharing options...
fdeng Posted August 30, 2018 Author Share Posted August 30, 2018 @dbawel I do need more help. Actually, the "screen coordinate" here , is I want to get the 2D coordinate of the pickedPoint on the canvas, not the real screen. I modified the PG in your post, adding these code in onPointerDown var transformMatrix = scene.getTransformMatrix(); var viewport = freeCamera.viewport.toGlobal(engine); var coordinates = BABYLON.Vector3.Project(pickResult.pickedPoint, BABYLON.Matrix.Identity(), transformMatrix, viewport); console.log("screen coordinates:", Math.ceil(coordinates.x), Math.ceil(coordinates.y)); Here is the new PG link: http://www.babylonjs-playground.com/index.html#17QBL9#2 In this PG, the "screen coordinate" is same as the mouse click position on canvas. But in my program, these code can not get the accurate coordinate of the pickedPoint I wonder what else factor may effect this result? Quote Link to comment Share on other sites More sharing options...
dbawel Posted August 30, 2018 Share Posted August 30, 2018 This needs to be accomplished using vanilla JavaScript. Here is a simple app to pick pixels on a canvas and message the (X, Y) values: Quote <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> function writeMessage(canvas, message) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.font = '18pt Calibri'; context.fillStyle = 'black'; context.fillText(message, 10, 25); } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; writeMessage(canvas, message); }, false); </script> </body> </html> Does this help? DB Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted August 30, 2018 Share Posted August 30, 2018 are you using some sort of padding or offset on the canvas/body/element what ever on the page. Quote Link to comment Share on other sites More sharing options...
fdeng Posted August 31, 2018 Author Share Posted August 31, 2018 @dbawel @Pryme8 Thanks for your concern about this issue. I'v got the root cause: In my program, there are two viewport, so the scene.activeCameras has two cameras in it. To use the project function, var transformMatrix = this._scene.getTransformMatrix(); may not get the right transformation matrix. Instead, the transformation matrix should come from the active camera of the active viewport: var transformMatrix = this._activeport.activeCamera.getTranformationMatrix(); dbawel, GameMonetize and Pryme8 2 1 Quote Link to comment Share on other sites More sharing options...
Guest Posted August 31, 2018 Share Posted August 31, 2018 Excellent! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.