在Three.js中的2个点之间创建样条曲线

Question

我正在尝试使用Three.js将点与样条曲线链接起来，以实现我想要的可视化效果。

据我所知，我将点添加到数组中，将其传递给THREE.SplineCurve3，逐步通过样条点以获得geom coords和渲染。如果我只将开始/结束点添加到数组，但是如果我尝试添加中点，则会出现错误。

示例在这里：

http://jsfiddle.net/sLQK9/4/

我确信这很简单，但我无法发现 - 有人可以帮助我吗？

最终，这些点将位于球体的表面上，并且2点之间的样条将采用飞机将采取的路线 - I.E.一种大圆，但在花键中点远离球体中心。

非常感谢提前。

Answer 1

我在3D场景中两点之间制作曲线的解决方案，尤其是在地球上：

var createCurvePath = function(start, end, elevation) {
    var start3 = globe.translateCordsToPoint(start.latitude, start.longitude);
    var end3 = globe.translateCordsToPoint(end.latitude, end.longitude);
    var mid = (new LatLon(start.latitude, start.longitude)).midpointTo(new LatLon(end.latitude, end.longitude));
    var middle3 = globe.translateCordsToPoint(mid.lat(), mid.lon(), elevation);

    var curveQuad = new THREE.QuadraticBezierCurve3(start3, middle3, end3);
    //   var curveCubic = new THREE.CubicBezierCurve3(start3, start3_control, end3_control, end3);

    var cp = new THREE.CurvePath();
    cp.add(curveQuad);
    //   cp.add(curveCubic);
    return cp;
}

然后调用它：

var cp = globe.createCurvePath(item1, item2, 200);
var curvedLineMaterial =  new THREE.LineBasicMaterial({color: 0xFFFFAA, linewidth: 3});
var curvedLine = new THREE.Line(cp.createPointsGeometry(20), curvedLineMaterial);
globe.scene.add(curvedLine);

注意曲线创建的二次或三次方法

Answer 2

我认为您需要指定样条曲线插入曲线的点数，尽管您指定了control个点，但曲线并不知道您想要它的平滑程度。

尝试这样的事情：

// smooth my curve over this many points
var numPoints = 100;

spline = new THREE.SplineCurve3([
   new THREE.Vector3(0, 0, 0),
   new THREE.Vector3(0, 200, 0),
   new THREE.Vector3(150, 150, 0),
   new THREE.Vector3(150, 50, 0),
   new THREE.Vector3(250, 100, 0),
   new THREE.Vector3(250, 300, 0)
]);

var material = new THREE.LineBasicMaterial({
    color: 0xff00f0,
});

var geometry = new THREE.Geometry();
var splinePoints = spline.getPoints(numPoints);

for(var i = 0; i < splinePoints.length; i++){
    geometry.vertices.push(splinePoints[i]);  
}

var line = new THREE.Line(geometry, material);
scene.add(line);

然后，正如@juan Mellado回答中指出的那样，您可以使用spline.getPoint(t)获得一个位置，其中t是样条曲线的0-1，起点和终点之间的值。

顺便说一句，请查看最近为我回答的Question，其中包括上述示例。

Answer 3

getPoint的参数必须在[0..1]范围内：

// Virtual base class method to overwrite and implement in subclasses
//  - t [0 .. 1]

THREE.Curve.prototype.getPoint = function ( t ) {
...