THREE.ConstantSpline.js

This object creates a B-Spline using 4 points, and a number steps or a fixed step distance can be specified to create a set of points that cover the curve at constant rate.

Demos are here:

• Lines
• Surfaces

How to use

Include the library:

<script src="THREE.ConstantSpline.js" ></script>

Instantiate a THREE.ConstantSpline object:

var s = new THREE.ConstantSpline();

assign the 4 control points:

s.p0 = new THREE.Vector3( .5 - Math.random(), .5 - Math.random(), .5 - Math.random() );
s.p1 = new THREE.Vector3( .5 - Math.random(), .5 - Math.random(), .5 - Math.random() );
s.p2 = new THREE.Vector3( .5 - Math.random(), .5 - Math.random(), .5 - Math.random() );
s.p3 = new THREE.Vector3( .5 - Math.random(), .5 - Math.random(), .5 - Math.random() );

make the calculations of the standard b-spline:

s.calculate();

specify if you need a constant number of steps or a constant step size:

s.calculateDistances();
s.reticulate( { distancePerStep: .1 });

s.calculateDistances();
s.reticulate( { steps: 500 } );

s.lPoints contains the evenly separated points. Use them to create a line, a mesh or a camera path:

var geometry = new THREE.Geometry();
   
for( var j = 0; j < s.lPoints.length - 1; j++ ) {

	var from = s.lPoints[ j ],
		to = s.lPoints[ j + 1 ];
	geometry.vertices.push( from.clone() );
    geometry.vertices.push( to.clone() );

}

material = new THREE.LineBasicMaterial( { 
	color: 0x404040 + Math.random() * 0xbfbfbf, 
	linewidth: 4
} );

var line = new THREE.Line( geometry, material );
scene.add( line );

License

MIT licensed

Copyright (C) 2014 Jaume Sanchez Elias http://twitter.com/thespite

http://www.clicktorelease.com