在 Three.js 中的 2 个点之间创建样条曲线 [英] Creating a spline curve between 2 points in Three.js

问题描述

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

I'm trying to link points with a spline using Three.js for a visualization I'm trying to make.

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

As far as I can tell, I add points to an array, pass that to THREE.SplineCurve3, step through the spline points to get the geom coords and render. It works if I only add the start/end points to the array but if I try to add a mid-point, I get an error.

示例如下:

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

我确定这很简单，但我无法发现它 - 谁能帮助我?

I'm sure it's something simple but I can't spot it - can anyone help me?

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

Ultimately, the points will be on the surface of a sphere and the splines between 2 points will take the route an aircraft would take - I.E. sort of great circle but further away from the center of the sphere at the midpoint of the spline.

非常感谢.

推荐答案

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

My solution for making curves between two point in 3D scene, especially on globe:

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 Quadratic or Cubic method of curve creation

这篇关于在 Three.js 中的 2 个点之间创建样条曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！