Cubic Bezier curve between two points on a sphere of three. Js
I am allowing the user to click on two points on the sphere, and then I would like to draw a line between the two points along the surface of the sphere (mostly on the large circle). I managed to get the coordinates of the two selected points and draw QuadraticBezierCurve3
between the points, but I need to use CubicBezierCurve3
. The problem is I don't know how to find the two breakpoints.
Part of the question is all I find for circular arcs and only deals with the [x, y] coordinate (whereas I am working with [x, y, z]). I found this other question that I used to get several working solutions with QuadraticBezierCurve3
. I've found many other math / code pages like this , this , and this , but I really just don't know what to apply. Something else I came across the mentioned tangents (at the selected points), their intersection and their midpoints. But then again, I'm not sure how to do this in 3D space (since the tangent can go in several directions, i.e. In a plane).
An example of my code: http://jsfiddle.net/GhB82/
To draw a line, I use:
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);
}
Where point A and point B are arrays containing the [x, y, z] coordinates of the selected points on the sphere. I need to change QuadraticBezierCurve3
to CubicBezierCurve3
, but again, I am really not able to find these breakpoints.
source to share
I have a description of how to map cubic curves to circular arcs above http://pomax.github.io/bezierinfo/#circles_cubic , the 3D case is essentially the same you need to find out the (large) circular cross section that your two points form on a sphere and then draw a cubic bezier section along that circle.
Downside: If your arc is less than or equal to about a quarter circle, one curve will not be enough, you will need two or more. You can't model true circular curves with Bézier curves, so using cubic instead of quadratic simply means you can zoom in on a long arc segment before it looks awful.
So, on a completely different solution, note that if you have an arc command, it is much better to use it than to collapse your own (and if three.js doesn't support them, it's definitely worth specifying a feature request, I think)
source to share