Three.js spherical coordinates formula

Question

I'm trying to figure out what is going on in next example
https://threejs.org/examples/css3d_periodictable.html (the sphere version)

var vector = new THREE.Vector3();
var spherical = new THREE.Spherical();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
    var phi = Math.acos( -1 + ( 2 * i ) / l );
    var theta = Math.sqrt( l * Math.PI ) * phi;
    var object = new THREE.Object3D();

    spherical.set( 800, phi, theta );
    object.position.setFromSpherical( spherical );
    ...
}

I read some math articles (there were just explanations of converting spherical coordinates to Cartesian) and found this question Can someone explain the formula. It was impossible for me to leave a comment there due to my reputation, however after all of that I still don't understand how did they get these two formulas.

var phi = Math.acos( -1 + ( 2 * i ) / l );
var theta = Math.sqrt( l * Math.PI ) * phi;

So my questions are:

1) How do you get these formulas?

2) Why was the length of objects used to get phi and theta?

MBo MBo · Accepted Answer · 2017-06-12T07:49:57

Note that phi varies from Pi to 0 corresponding to arccosine law, while theta linearly depends on phi. So combination of these angles form spiral on hemisphere surface (given code does not contain clues to make the second hemisphere).

Arccosine law provides equidistant coils (loops? don't know exact term for spiral turn). Linear dependence of theta gives some distribution over azimuthal (meridional) angle. Sqrt(Pi*L) multiplier has been chosen due to overall spiral length (to fit L items).

Look at the pole of sphere where periodic table begins - hydrogen at the pole, helium is close to it, lithium is next and so on - forming spiral.

Note that phi/theta names differ from common (and wiki page) designations - here theta is azimuthal angle.

Three.js spherical coordinates formula

1 Answers