Im trying to get a waypoint indicator on the screen when a user is not looking at a particular object. So when they look away an indicator shows up that indicates which way they need to look to see the target again. All of the UI is mapped inside a sphere. So for example if your target is off screen to the left and above you - on your screen you’d seed an arrow on the top left pointing toward the offscreen object. For example this image has a green indicator on screen pointing to a target offscreen at a lower left.
Its a maze inside a sphere. You just have to work your way through it. The end has an indicator pointing to it.
Is there a straight forward way to do this with JS? Or will I have to do math?
1 Like
You can either unproject the 3D position to screen so you check if the point is outside the boundary, or do a frustum check in case the volume is relevant. Using only the center point will show the arrow once the center position of your object is outside the screen.
For the arrow it depends how it should look, should it be 3D or 2D? Basically you can use a Object3D in position of your camera and call yourObject.lookAt(target.position) in order to make this point to the target. If your arrow will be 3D, you can simply use a arrow mesh instead the plain Object3D.
In case the arrow is 3D you can for example render it by setting the viewport, take a look at the examples to see how to use viewports.
1 Like
Thanks. I’m using frustum to determine if it’s in view. If not I’d like to place an indicator/arrow on a fixed radius from the center of the current view. So as I look around (but still have the target out of view) this indicator will move around in a circle some distance from the center of the screen. Not clear on how I do that yet.
1 Like