Globe with markers and label: thoughts, ideas, approaches, solutions

Now that I’ve published a stand-alone version of TexFont for Three.js, I’m equally happy (but less proud) to publish my entry into this collection of “Globes with labels”:

In my entry, the labels are textured 3D-planes, and as such benefit from the full range of 3D features like:

  • depth cueing
  • automatic visibility handling
  • various billboarding options
  • dynamic content updating
  • sensitivity for fog
  • plus the rest I didn’t think of :wink:

Be warned, that the code is a monolithic mess (it contains an earlier version of TexFont) - please take this only as an MVP to see what this approach can do in terms of visual impact.

Please take particular note of the one label at latitude 0°, longitude 0° (Gulf of Guinea), which can be configured (GUI) as having [No | 2D | 3D] billboarding properties. In addition, its contents is dynamcally updated and displays pitch and yaw angles, as well as distance from the target of the OrbitControlled camera.

https://jsfiddle.net/Chrisssie/s63jnpea/

2 Likes