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 不支持它们，绝对值得提交功能请求，我会想)