Converting Geographic Coordinates to 3D Positions in three.js

The author, a former 360 front‑end engineer, introduces the problem of converting geographic texture coordinates (latitude and longitude) into three‑dimensional positions on a sphere rendered with three.js.

Geographic texture coordinates map longitude to the horizontal axis (‑180° to 180°) and latitude to the vertical axis (‑90° to 90°). To place points on a three.js sphere, these must be converted to spherical coordinates used by the library.

When creating a sphere in three.js, important parameters include radius, phiStart, phiLength, thetaStart, and thetaLength. The default phiStart is 0 (pointing along the negative X‑axis) and thetaStart is 0 (pointing along the positive Z‑axis). The conversion from geographic to spherical angles is:

phi = (180 + lng) * (Math.PI / 180)

theta = (90 - lat) * (Math.PI / 180)

Using basic trigonometry, the Cartesian coordinates can be computed as:

x = -radius * Math.sin(theta) * Math.cos(phi);
 y = radius * Math.cos(theta);
 z = radius * Math.sin(theta) * Math.sin(phi);

A ready‑made JavaScript function implementing this conversion is:

function lglt2xyz(lng, lat, radius) {
  const phi = (180 + lng) * (Math.PI / 180);
  const theta = (90 - lat) * (Math.PI / 180);
  return {
    x: -radius * Math.sin(theta) * Math.cos(phi),
    y: radius * Math.cos(theta),
    z: radius * Math.sin(theta) * Math.sin(phi)
  };
}

three.js also provides built‑in classes for this purpose. THREE.Spherical represents spherical coordinates and can be instantiated as new THREE.Spherical(radius, phi, theta) . Its parameters are radius, phi (vertical angle from the positive Y‑axis), and theta (horizontal angle from the positive Z‑axis). Note that the library’s phi and theta are opposite to the geographic definitions, so the conversion is:

phi' = theta = 90 - lat

theta' = phi - 90 = 90 + lng

THREE.Vector3 represents a 3‑D vector and offers the method setFromSpherical to convert a THREE.Spherical instance into Cartesian coordinates. Conversely, THREE.Spherical has setFromVector3 to perform the reverse conversion.

Putting it together, the conversion using three.js utilities can be written as:

function lglt2xyz(lng, lat, radius) {
  const theta = (90 + lng) * (Math.PI / 180);
  const phi = (90 - lat) * (Math.PI / 180);
  return new THREE.Vector3()
    .setFromSpherical(new THREE.Spherical(radius, phi, theta));
}