Three.js SplineCurve3 without round edges, or LineCurve3 replacement

Question

I want to create a CurvePath for example

var spline = new THREE.SplineCurve3([
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(1, 0, 0),
    new THREE.Vector3(1, 1, 0),
]);

and I will send a particle along with path using (javascript psuedocode)

var t = 0;

function update(){
    t = t + 0.05;
    particle.position = spline.getPointAt(t)
}

However I want the splinecurve not to create soft bends at the edges of the shape, so for the shape above the particle will turn at a right angle at the point (1, 0, 0).

I know this should be implemented in LineCurve3 or something, but for all the other curves except for SplineCurve3, getPoint() is not implemented.

Im using THREE r59.

Answer 1

EDIT: THREE.Curve.create() has been deprecated. See this answer for the new pattern to follow.

---

To create your own curve class, a sub-class of THREE.Curve, here is the pattern to follow:

MyCurve = THREE.Curve.create(

    // define the constructor (args optional)
    function( points, s ) {

        this.points = points;
        this.myProperty = s; // add a property if you want

    },

    // define the getPoint() function
    function( t ) {

        return new THREE.Vector3( x, y, z ); // flesh this out

    }

);

In your case, you can duplicate SplineCurve3 -- you just need to change the getPoint() function. To do so, you can replace this:

    v.x = THREE.Curve.Utils.interpolate(pt0.x, pt1.x, pt2.x, pt3.x, weight);
    v.y = THREE.Curve.Utils.interpolate(pt0.y, pt1.y, pt2.y, pt3.y, weight);
    v.z = THREE.Curve.Utils.interpolate(pt0.z, pt1.z, pt2.z, pt3.z, weight);

with simple linear interpolation:

    v.copy( pt1 ).lerp( pt2, weight );

three.js r.60