javascript - Three.js 中球体上两点之间的三次贝塞尔曲线

Question

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

问题的一部分是我发现的所有内容都是针对圆弧的，并且只处理 [x,y] 坐标(而我正在使用 [x,y,z])。我发现this另一个问题，我使用QuadraticBezierCurve3得到了一个有点有效的解决方案。我发现了许多其他带有数学/代码的页面，例如 this , this ，和this ，但我真的不知道该申请什么。我遇到的其他内容提到了切线(到所选点)、它们的交点和中点。但同样，我不确定如何在 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 不支持它们，绝对值得提交功能请求，我我想)