I would like to implement a snap grid function in my pointer, but it seems when I zoom in or out, the grid distance changes. Is there a solution for this?
I think we could do it just by hiding the native cursor and use a 3d simulated cursor by doing some magic in the background. Let me think about it for a while
I did something similar here (the yellow is native cursor, the uggly duck is the simulated one)
The texture you are using currently must be replaced and we have to draw the grid using lines. There is a GridMaterial in BabylonJS though (Grid Material | Babylon.js Documentation), but I am pretty sure we can’t match the exact positions because it would be quite hard to match the exact math used in the GridMaterial shader.
I think we could cast a ray from the camera to the cursor position and calculate the nearest snapping position. I need to finish my regular work so I can come back to this topic in a few hours but this is definitelly an interesting topic for me as well
However in the example you have provided you’re snapping the plane not the cursor, so are you sure you want to snap the cursor?
EDIT: I have another simpler idea Have a look at this. It is snapping a box onto the grid. Should be easy to adapt to your needs.
wow that is great. That solve my problem. There is only one thing I would like to clear out. I would like to be able only to snap grid when shift is pressed. My intention is to create walls on a plane like the following playground