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

Question

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

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

示例在这里:

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

我确定这很简单,但我无法发现它 - 任何人都可以帮助我吗？

最终,这些点将位于球体的表面上,并且两点之间的样条将采用飞机将采取的路线 - IE类似于大圆但是在样条的中点处远离球体的中心.

提前谢谢了.

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样条曲线之间的值,起点和终点.

顺便说一句,请参阅最近为我回答的问题,其中包括上面的示例.

Answer 3

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

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

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