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

【问题标题】：Cubic Bezier Curve between two points on a sphere in three.jsThree.js中球体上两点之间的三次贝塞尔曲线
【发布时间】：2014-08-13 23:25:01
【问题描述】：

我让用户点击球体上的两个点，然后我想在球体表面的两个点之间画一条线（基本上在大圆上）。我已经能够获得两个选定点的坐标并在两点之间绘制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，但同样，我真的无法找到这些控制点。

【问题讨论】：

标签： javascript three.js bezier

【解决方案1】：

我在http://pomax.github.io/bezierinfo/#circles_cubic 上有关于如何将三次曲线拟合到圆弧的描述，3D 情况基本相同，因为您需要找出两个点在球体，然后沿该圆构建三次贝塞尔曲线。

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

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

【讨论】：