Heya,
I’m working on a game with a team, but I have an issue where the crosshair is behind the GUI.
See image:
This is pretty annoying as it also means that the onPointerMoveObservable will not fire, but weirdly the onPointerDownObservable will.
I somehow can’t perfectly reproduce my case in a playground because the crosshair won’t show.
Here it is anyway. It has a GUI button and the crosshair which won’t show:
https://playground.babylonjs.com/#JU1DZP#2
The camera we use is normally an FPS camera like [the freecamera].(Babylon.js/freeCamera.ts at master · BabylonJS/Babylon.js · GitHub)
1 Like
You can’t see the crosshair in the PG because you parented it to the camera, so you need to set a z value greater than the camera.minZ property (which is 1 by default):
https://playground.babylonjs.com/#JU1DZP#3
As this crosshair is a 3D plane, it is drawn before the GUI, so appears below it. I think you will need another camera to draw the crosshair after the GUI or a utility layer to achieve what you want to do.
4 Likes
Thank you!
I added a utililyLayer and it did the job wonderfully! (by the way you shared the wrong playground, you meant ..#3 
)
Here is the new playground for those looking for an answer. I added a pointerLock
https://playground.babylonjs.com/#JU1DZP#4