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

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.