I'm currently working on a project where the user can click on two points on a sphere and I want to connect these points with a line along the surface of the sphere, following the great circle path. I have managed to obtain the coordinates of the selected points and draw a QuadraticBezierCurve3 between them, but now I need to use a CubicBezierCurve3. The challenge is that I am not sure how to determine the two control points needed for this.
My main struggle is that most resources I find deal with circular arcs and only [x,y] coordinates, while I am working in 3D space with [x,y,z]. I have explored various links such as this one that helped me create a semi-functional solution using QuadraticBezierCurve3. Other sources include math/code references like this, this, and this, but I am unsure which approach to apply. I also came across suggestions involving tangents, their intersections, and midpoints, but again, implementing these concepts in 3D space poses challenges due to tangent directions possibly being varied (i.e., forming a plane).
An example snippet of my code: http://jsfiddle.net/GhB82/
To render the line, I am using:
function drawLine(point) {
var middle = [(pointA['x'] + pointB['x']) / 2, (pointA['y'] + pointB['y']) / 2, (pointA['z'] + pointB['z']) / 2];
var curve = new THREE.QuadraticBezierCurve3(new THREE.Vector3(pointA['x'], pointA['y'], pointA['z']), new THREE.Vector3(middle[0], middle[1], middle[2]), new THREE.Vector3(pointB['x'], pointB['y'], pointB['z']));
var path = new THREE.CurvePath();
path.add(curve);
var curveMaterial = new THREE.LineBasicMaterial({
color: 0xFF0000
});
curvedLine = new THREE.Line(path.createPointsGeometry(20), curveMaterial);
scene.add(curvedLine);
}
In the above function, pointA and pointB are arrays containing the [x,y,z] coordinates of the selected points on the sphere. I need assistance transitioning from using QuadraticBezierCurve3 to CubicBezierCurve3, particularly in determining the required control points.