Creating a spline curve between 2 points in Three.js

Question

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

As far as I can tell, I add points to an array, pass that to THREE.S

Answer 1

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;
}

then call it:

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