How to create guides to off-screen objects?

Question

I've played Metroid Blast on Wii U, and would like to build one of its features in a three.js game.

The feature is: if an opponent is out of view, a guide is displayed showing the direction of the opponent.

An example of it is here:

Notice the small circles with arrows in the left side.

How could I have a similar feature in my game?

Jon · Accepted Answer · 2016-04-17 11:58:15Z

3

For each opponent/object/destination to display:

Project it's worldspace location to view-space (MV)
Flatten the Z to 0
Normalize the direction to unit-length
Multiply by "HUD" radius (world/view-space units)
(the linked image looks like they might have used aspect ratio, instead, to stretch circle into an ellipse)
(i.e. scale by (widthFactor, heightFactor, 0) instead of 1.0f)

I may not be able to provide the code to "find opponents within the proper range" (using three) (I'm betting you can)

answered Apr 17, 2016 at 11:23

Jon

3,7141 gold badge14 silver badges23 bronze badges

1 Answer 1