Globe Markers using Texfont

Demonstrates the use of a bitmapped font texture for use in a globe with labels

by Chrisssie

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import { GUI } from "https://cdn.skypack.dev/[email protected]/examples/jsm/libs/lil-gui.module.min.js";

   let fp = 0;				// byte pos in file; file starts @ fp = 0;
   var format = 99;		// 0: bytemap; 1: bitmap
   var swap = false;		// false: Big Endian; true: Little Endian - needs byte swapping
	
	let texture_ready = false;
	let srcTexture;
	let texMasterGroup = new THREE.Group();	// this is used for the dynamically updated label
	let texLineGroup = new THREE.Group();	// this is also used for the dynamcally updated label
	let cr = String.fromCharCode( 0x0D );	// carriage return, for multi-line strings/labels
	let lf = String.fromCharCode( 0x0A );	// line feed, for multi-line strings/labels
	let globeRadius = 2000;						// this is sort of the MASTER switch to control
														// the _relative_ size of the label font wrt. the globe radius
	let labelOffset = globeRadius + 100;		// the difference prevents a "fringe" label to dive into the globe, due to its width

	let dir = new THREE.Vector3();
	
	let lineContext = {	// used by the dynamically updated label
		known: false,		// 1st time around, allocate all kinds of stuff and re-use in later frames
		geometries: [],
		meshes: [],
		group: 0
	};

   var Texfont = {
      texobj:         0,       // GLuint
      tex_width:      0,       // int
      tex_height:     0,       // int
      max_ascent:     0,       // int
      max_descent:    0,       // int
      num_glyphs:     0,       // int
      min_glyph:      0,       // int
      range:          0,       // int
      teximage:       [],      // unsigned char *
      tgi:            [],      // TexGlyphInfo *
      tgvi:           [],      // TexGlyphVertexInfo *
      lut:            []       // lookup table: TexGlyphVertexInfo **
   };

	let txf = txfLoadTexfont(...