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情况基本相同，因为您需要找出（两个）点形成的（大）圆形横截面在球体上，然后沿着该圆形构建立方贝塞尔曲线。

下行：除非您的弧线小于或等于大约四分之一圆，否则一条曲线不够，您需要两条或更多条曲线。你实际上不能用Bezier曲线建模真正的圆形曲线，所以使用立方而不是二次方意味着你可以在它开始看起来很糟糕之前估计一个较长的弧段。

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

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

1 个答案: