I made another post earlier, but I didn’t explain myself clearly and it got messy, so I’ll make another one.
The goal is to have an indicator on the UI of the positions of some objects, even when out of screen. Exactly as in the objectives direction indicator in FPS games.
So, what I want to do, in it’s simplest form:
I have a cube moving around, and I want to have a marker on screen indicating it’s position to the user.
When the cube is within the frustum of the camera, the marker should overlap the cube.
When the cube is not within the frustum, the marker should be in the edge of the screen, indicating where the camera should turn to see the cube.
Here is a JSFiddle showing where I am at now:
The top view on the output shows you the scene from afar, to understand what’s going on.
The cube rotates around the camera.
The white pane is set at the camera position, orthogonal to where it’s looking at. It’s just a visual aid to know when the cube is in front or behind the camera.
The bottom view shows the result, where I expect to see the marker on top of the cube.
As you can see right now it works as long as the cube is in front of the white pane.
But when the cube is behind, everything is inverted.
This problem is expected, and I just need to invert the coordinates. My problem is knowing when to invert the coordinates, therefore knowing when the cube is behind the camera.
In this exemple of doing the same in Unity:
The developer uses the z values of the position projected by the camera. It’s positive when the position is in front, negative when behind. Great.
This doesn’t work with THREE.js. The z value, witch I display at the top of the output in the JSFiddle seems to have a logic of it’s own. Goes shortly under 0 when close to the pane, jumps to over 1 when behind the pane… And it’s not even the same values in my real project.
So if I cannot use this z value, what can I use to know when the cube is behind the camera?