https://github.com/spite/three.constantspline

Constant-time B-Spline
https://github.com/spite/three.constantspline

Last synced: about 1 year ago
JSON representation

Constant-time B-Spline

• Host: GitHub
• URL: https://github.com/spite/three.constantspline
• Owner: spite
• Created: 2014-07-11T23:29:48.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2016-03-18T20:03:52.000Z (over 10 years ago)
• Last Synced: 2025-03-30T01:30:17.134Z (about 1 year ago)
• Language: HTML
• Size: 293 KB
• Stars: 28
• Watchers: 5
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
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](https://raw.githubusercontent.com/spite/THREE.ConstantSpline/master/snapshot.png)

Demos are here: 

* [Lines](http://www.clicktorelease.com/tmp/threejs/constant-spline/lines.html)

* [Surfaces](http://www.clicktorelease.com/tmp/threejs/constant-spline/surface.html)

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