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

Answer 2

I think you need to specify how many points you want the spline to interpolate the curve with, although you are specifying control points, the curve doesn't know how smooth you want it.

Try something like this:

// 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);

Then, as pointed out in @juan Mellado answer, you can get a position on the line using spline.getPoint(t) where t is value between 0-1, start and end points of the spline.

As an aside, see a recent Question that was answered for me, which includes the example above.

Answer 3

The parameter of getPoint must be in range [0..1]:

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

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