three.js3dcoordinates3d-modelspherical-coordinate

How setFromSphericalCoords in Three.js works?


I am creating a Three.js App. It is a 3D ISS Visualizer, and I am using this API to get the latitude, longitude and altitude of the ISS. My problem is that I want to rotate the ISS model around my Earth model. But the problem is that I don't know how .setFromSphericalCoords() works, because when I try to convert my latitude, longitude and altitude int (x, y, z) coordinates with this formulas:

x = Math.cos(lat) * Math.cos(lon) * alt
y = Math.cos(lat) * Math.sin(lon) * alt
z = Math.sin(lat) * alt

taken from here it doesn't work
And all I get are weird coordinates, for example the difference bewtween 2 consecutive xs will be big, and it shouldn't be like this. With this big defferences my space station just teleports from Africa to USA, or something like this, or even goes inside the Earth.

So can someone explain me how to convert these coordinates and how the .setFromSphericalCoords() method works? As you know, the Three.js documentation does not really explain much about each method. I am also aware of the .setFromCarthesian() method, but I still need the carthesian coordinates and an explanation about how it works.


Solution

  • The bottom of each Three.js documentation page has a link to the source code. So if you look for that method on the source code, you’ll find exactly what it’s doing:

    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;
    
    }