Here is a demo. [Edit: I have changed the demo. The original demo was for a direct flight from Boston to Moscow because it was similar to the image posted previously. However, because of changes to three.js, that demo no longer works. The revised demo is my latest version of the program, which includes a multi-leg flight and labels.]
To create my object (airobj), I used the following:
airobj = new THREE.Object3D();
geometry = new THREE.SphereBufferGeometry(0.5, 8, 8);
material = new THREE.MeshPhongMaterial({color: 0xff0000});
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -25.1; // the radius of the earth plus .1
airobj.add(mesh);
scene.add(airobj);
airobj.rotation.order = "YZX";
To rotate the object, using the information you provided, I used the following:
// Compute Starting Rotations
var a = latitude * DegRad; // Starting Latitude
var B = heading * DegRad; // Heading relative to vertical
var A = Math.acos(Math.sin(B)*Math.cos(a)); // Angle at Equator
var b = Math.atan((Math.sin(B)/Math.cos(B))*Math.sin(a)); // Longitude Offset
var c = Math.acos(Math.cos(a)*Math.cos(b)); // Distance
b = Mod360(b * RadDeg);
A = Mod360(A * RadDeg);
// Enter Starting Rotations
airobj.rotation.y = Mod360(longitude - b) * DegRad; // Longitude of intersection
airobj.rotation.z = Mod360(90 - A) * DegRad; // Angle at equator
airobj.rotation.x = c; // Distance
DegRad and RadDeg are used to convert degrees to radians and vice versa. They are defined in the beginning of the program as follows:
var PieVal = Math.PI; // PI
var DegRad = PieVal / 180; // Convert Degrees to Radians
var RadDeg = 180 / PieVal; // Convert Radians to Degrees
The Mod360 is a small subroutine used to keep values within the range of 0 to 360:
function Mod360(deg) {
if (deg < 0) deg = deg + 360;
else if (deg == 360 || deg > 360) deg = deg - 360;
return deg;}
To move the object along the path, you simply increment the value of airobj.rotation.x:
airobj.rotation.x = airobj.rotation.x +.001;
until you have travelled far enough.
I had some problems making the sphere follow certain routes. However, if you are going to pick random headings, this may not be a problem.
In any case, I think this shows that, once you have created and rotated the object, you can simply increase the rotation.x and three.js will automatically move the object along the selected path. No complex math required.