立方贝塞尔曲线在三个球体中的两个点之间的曲线.js

Question

我让用户点击球体上的两个点然后我想在球体表面的两个点之间画一条线（基本上在大圆上）。 我已经能够获得两个选定点的坐标并在点之间绘制QuadraticBezierCurve3 ，但我需要使用CubicBezierCurve3 。 问题是我不知道如何找到两个控制点。

部分问题是我找到的所有东西都是圆弧，只处理[x，y]坐标（而我正在使用[x，y，z]）。 我发现了另一个问题，我曾经使用QuadraticBezierCurve3获得了一个有点工作的解决方案。 我已经找到了许多其他的数学/代码页面， 这个 ， 这个 ， 这个 ，但我真的只是不知道该适用什么。 我遇到的其他事情提到了切线（到选定点），它们的交点和它们的中点。 但同样，我不确定如何在3D空间中做到这一点（因为切线可以进入多个方向，即一个平面）。

我的代码示例： http ： //jsfiddle.net/GhB82/

画线，我正在使用：

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);
}

其中pointA和pointB是包含球体上所选点的[x，y，z]坐标的数组。 我需要将QuadraticBezierCurve3更改为CubicBezierCurve3 ，但同样，我真的不知道找到那些控制点。

Answer 1

我在http://pomax.github.io/bezierinfo/#circles_cubic上描述了如何将立方曲线拟合成圆弧，3D情况基本相同，因为你需要找到（伟大的）圆形十字架 - 在球体上划分你的两个点形状，然后沿着该圆形构建立方贝塞尔曲线。

缺点：除非你的弧小于或等于大约四分之一圆，否则一条曲线是不够的，你需要两条或更多条曲线。 您实际上无法使用贝塞尔曲线建模真正的圆形曲线，因此使用立方而不是二次方意味着您可以在开始看起来非常糟糕之前逼近更长的弧段。

所以在一个完全不同的解决方案说明：如果你有一个arc命令可用，那么使用它比滚动你自己更好（如果three.js不支持它们，绝对值得提交功能请求，我想）