Creating a spline curve between 2 points in Three.js

javascript, three.js

Solution

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.

Problem

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.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. Example is here: 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. Many thanks in advance.

Original source

Related problems