I want to position an object at the end of a sphere's radius based on its coordinates (x, y, z).
In traditional mathematical formulas for the coordinates of a point on a sphere, we use:
var x = radius * Math.cos(phi) * Math.cos(theta);
var y = radius * Math.cos(phi) * Math.sin(theta);
var z = radius * Math.cos(phi);
Instead, I am using:
var x = radius * Math.cos(angleZ) * Math.cos(angleX);
var y = radius * Math.cos(angleZ) * Math.sin(angleX);
var z = radius * Math.cos(angleZ);
I understand that these are not the correct angles. How can I relate these angles (angleX, angleY, angleZ) to phi and theta in order to transform them correctly?
In Three.js, I have:
cylinderX.rotation.x = degToRad(angleX);
cylinderX.rotation.y = degToRad(angleY);
cylinderX.rotation.z = degToRad(angleZ);
- degToRad - function that converts degrees to radians
Where:
angleX is the angle between the y plane and the z plane
angleY is the angle between the z plane and the x plane
angleZ is the angle between the x plane and the y plane
Phi and theta are different angles because theta is the angle between the radius and the plane.
When I run the animation, the position of the object (x, y, z) and its location on the sphere's plane are incorrect.
How can I solve this issue?
To be more specific, the code and example can be found here:
I want to place the green cube at the end of the red cuboid as the car rotates on all axes (x, y, z).
In the arrays: x[...], y[...], z[...], there are values of angles representing how the car (object) rotates on all axes (X, Y, Z).
I am unsure how to connect angleX, angleZ, angleY to "phi" and "theta" in order to correctly position the "green cube" based on a radius of 100, for example.
The full code and example can be found in the animate.js file below:
var container, stats, camera, scene, renderer, object;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var angleX=0, angleY=0, angleZ=0, G=0;
var x; var y; var z;
var times = [];
x = ["0", "10", "20","30", "40", "50" ];
y = ["0", "20", "40","60", "70", "80" ];
z = ["0", "30", "60","90", "120", "150" ];
gX = ["1", "1.4", "0.7", "0.4", "1", "1.2", "0.5", "1.2", "1.4", "1.3", "1", "0.7" ];
gY = ["1", "2", "1", "2", "1", "2", "3", "1.2", "1.4", "1.3", "1", "2" ];
gZ = ["1", "2", "1", "2", "1", "2", "3", "1.2", "1.4", "1.3", "1", "2" ];
// more code here...