Applet: Spherical coordinates
Applet loading
Given the values for spherical coordinates $\rho$, $\theta$, and $\phi$, which you can change by dragging the points on the sliders, the large red point shows the corresponding position in Cartesian coordinates. The green dot is the projection of the point in the $xy$-plane. You can visualize each of the spherical coordinates by the geometric structures that are colored corresponding to the slider colors. The length of the red line segment from the origin is $\rho$. The angle of the green portion of the disk in the $xy$-plane is $\theta$. The angle of the blue portion of the vertical disk is $\phi$. You can also move the large red point and the green projection of that point directly with the mouse.
Applet links
This applet is found in the pages
General information about three.js applets
The applet was made using three.js and requires Javascript as well as a browser that supports WebGL. For most three.js applets, you can drag with the mouse to rotate the view, drag with the right button to pan, and zoom in/out with the mouse wheel. Many applets contain points that you can drag to change values of variables.