three-CurveEditor

curve editor for Three.js

CurveEditor creates 'sections' constrituted of chained catmull-rom curves. This sections can be modified with handles, either 'corners' (square button), which basically cut a curve and make two instead, or 'twists' (round button) which add a point to the catmull-rom curve.

Exemple here : https://felixmariotto.github.io/curve_editor

Click on the curve to add a handle

How to use it

Create a section :

var section = editor.Section( 'mysection', [
				[ "corner", new THREE.Vector3( 6, -3, 0 ) ],
				[ "corner", new THREE.Vector3( -4, -3, 0 ) ],
				[ "twist", new THREE.Vector3( -2, 1, 0 ) ],
				[ "twist", new THREE.Vector3( -0, 0, 0 ) ],
				[ "corner", new THREE.Vector3( 4, 3, 0 ) ]
			]);

Make the selected handle blink :

function loop() {
			requestAnimationFrame(loop);
			renderer.render(scene, camera);
			editor.update();
		};

Delete handle :

editor.deleteHandle( 'mysection' );

Switch handle type :

editor.switchHandleType();

Tell the editor to raycast, on which mouse object :

editor.raycast( mouse );