Constant-time B-Spline
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demos
src
README.md
snapshot.png

README.md

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.

Image

Demos are here:

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