球面上两点之间的三次贝塞尔曲线

Cubic Bezier Curve between two points on a sphere in three.js

本文关键字：三次 曲线 之间 两点      更新时间：2023-09-26

我让用户点击球体上的两点，然后我想沿着球体表面(基本上在大圆上)在两点之间画一条线。我已经能够得到两个选定点的坐标，并在这两个点之间画一个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，但是再一次，我真的找不到那些控制点。

我在http://pomax.github.io/bezierinfo/#circles_cubic上有一个关于如何将三次曲线拟合为圆弧的描述，3D情况基本上是相同的，因为你需要找出两点在球体上形成的(大)圆形截面，然后沿着该圆建立三次贝塞尔截面。

缺点:除非你的弧线小于或等于大约四分之一圆，否则一条曲线是不够的，你需要两条或更多。你实际上不能用贝塞尔曲线来模拟真正的圆形曲线，所以使用三次曲线而不是二次曲线只是意味着你可以在它开始看起来很糟糕之前近似一个更长的弧段。

因此，一个完全不同的解决方案注意:如果你有一个arc命令可用，使用它比自己滚(如果three.js不支持它们，绝对值得提交一个特性请求，我认为)

相关文章：