Hello. I have a very tricky situation. I want to get 4 points (top right, top left, bottom right, bottom left) relative to the HTML canvas when I click on a mesh. In the attached pictures I showed a red square outside of the mesh, this symbolises the smallest square possible. My goal is to draw this square with HTML and not via BabylonJS. A different solution would also be to get the center point of the mesh relative to the HTML canvas and the radius (also relative to the HTML pixels of the canvas). So when I zoom out the radius would be smaller than when I zoom in.
I am not sure if that is even possible. Any help or hint is highly appreciated.
I used a base playground: https://playground.babylonjs.com/#DWPQ9R#236
1 Like
You can do it by projecting the vertices of the bounding box in screen space and by computing the min/max x/y coordinates from these projected vertices:
https://playground.babylonjs.com/#DWPQ9R#240
3 Likes
Ok wow. You are amazing - that is better than I thought. Thanks a lot !
Add some z-index values to the html elements of the page to make the box disappear under those elements.
1 Like
@Evgeni_Popov - I still have one off-topic question (just in case you know it - if not it’s fine too ofc). Do you know if there is some specific dpi normalisation applied to this playground? Because when I am using this snippet locally i have to apply following to make it work on my higher dpi screens:
viewport.width /= window.devicePixelRatio;
viewport.height /= window.devicePixelRatio;
No, I don’t think there’s a normalization going on in the Playground.
I think what people do is:
engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
1 Like
