Even though some of you liked this little break-down (thanks, guys!) , my explanation was a little quick and dirty, that’s why I would like to add the following refinements:
The Math.acos()
of the value range [ -1 … +1 ] (as seen above) of course covers the angle range [ 180° … 0° ] , counting angles ccw from positive x-axis, instead of [ -90° … +90° ], as I falsely claimed. (The picture of going from south pole to north pole and phi
representing the geographic latitude was just too tempting to resist.)
But then looking at how the “current” spiral radius sinPhiRadius
is computed in the vector3()
method
setFromSphericalCoords( radius, phi, theta ) {
const sinPhiRadius = Math.sin( phi ) * radius;
this.x = sinPhiRadius * Math.sin( theta );
this.y = Math.cos( phi ) * radius;
this.z = sinPhiRadius * Math.cos( theta );
return this;
}
I realised, that the author of the Vector3().setFromSphericalCoords( radius, phi, theta )
set up a little “trap” or two, which sort of obfuscates what the code is actually doing. Let me explain:
This is how sinPhiRadius
is computed:
And this is how that computed sinPhiRadius
is used in computing this.x, this.y and this.z
:
Note, how the author of the spiral sphere demo implicitly uses the symmetry which lies in computing sinPhiRadius
with phi increasing CCW from 0° => 180° vs. phi going CW from 180° => 0°, both of which yield the same sinPhiRadius
!
Also note, how the author of the setFromSphericalCoords()
method implicitly computes the sinPhiRadius in a vertical fashion, while using it horizontally.
Both authors may do so with impunity, because a sphere has perfect symmetry with respect to any plane passing through its center.