9

我正在尝试使用 Three.js 将点与样条连接起来，以实现我正在尝试制作的可视化。

据我所知，我将点添加到数组中，将其传递给 THREE.SplineCurve3，逐步遍历样条点以获取几何坐标并进行渲染。如果我只将开始/结束点添加到数组中，它会起作用，但如果我尝试添加中点，则会出现错误。

示例在这里：

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

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

最终，这些点将位于球体的表面上，两个点之间的样条线将采用飞机将采用的路线 - 即类似于大圆，但在样条线的中点离球体中心更远。

提前谢谢了。

4

3 回答 3

9

我在 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);

note 曲线创建的二次或三次方法 二次与三次贝泽

于 2013-06-03T16:38:37.387 回答
9

我认为你需要指定你希望样条曲线用多少点来插值曲线，虽然你指定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样条曲线的起点和终点之间的值来获得在线上的位置。

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

于 2012-06-25T08:29:41.687 回答
3

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

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

THREE.Curve.prototype.getPoint = function ( t ) {
...
于 2012-06-24T09:16:29.263 回答