console.clear();
var log = console.log.bind(console);
var THREE = THREE || {};
//
// CURVE
///////////////////////////////////////////////////////////////////////////////
THREE.Curve = function () {
};
// Virtual base class method to overwrite and implement in subclasses
// - t [0 .. 1]
THREE.Curve.prototype.getPoint = function ( t ) {
console.log( "Warning, getPoint() not implemented!" );
return null;
};
// Get point at relative position in curve according to arc length
// - u [0 .. 1]
THREE.Curve.prototype.getPointAt = function ( u ) {
var t = this.getUtoTmapping( u );
return this.getPoint( t );
};
// Get sequence of points using getPoint( t )
THREE.Curve.prototype.getPoints = function ( divisions ) {
if ( ! divisions ) divisions = 5;
var d, pts = [];
for ( d = 0; d <= divisions; d ++ ) {
pts.push( this.getPoint( d / divisions ) );
}
return pts;
};
// Get sequence of points using getPointAt( u )
THREE.Curve.prototype.getSpacedPoints = function ( divisions ) {
if ( ! divisions ) divisions = 5;
var d, pts = [];
for ( d = 0; d <= divisions; d ++ ) {
pts.push( this.getPointAt( d / divisions ) );
}
return pts;
};
// Get total curve arc length
THREE.Curve.prototype.getLength = function () {
var lengths = this.getLengths();
return lengths[ lengths.length - 1 ];
};
// Get list of cumulative segment lengths
THREE.Curve.prototype.getLengths = function ( divisions ) {
if ( ! divisions ) divisions = (this.__arcLengthDivisions) ? (this.__arcLengthDivisions): 200;
if ( this.cacheArcLengths
&& ( this.cacheArcLengths.length == divisions + 1 )
&& ! this.needsUpdate) {
//console.log( "cached", this.cacheArcLengths );
return this.cacheArcLengths;
}
this.needsUpdate = false;
var cache = [];
var current, last = this.getPoint( 0 );
var p, sum = 0;
cache.push( 0 );
for ( p = 1; p <= divisions; p ++ ) {
current = this.getPoint ( p / divisions );
sum += current.distanceTo( last );
cache.push( sum );
last = current;
}
this.cacheArcLengths = cache;
return cache; // { sums: cache, sum:sum }; Sum is in the last element.
};
THREE.Curve.prototype.updateArcLengths = function() {
this.needsUpdate = true;
this.getLengths();
};
// Given u ( 0 .. 1 ), get a t to find p. This gives you points which are equi distance
THREE.Curve.prototype.getUtoTmapping = function ( u, distance ) {
var arcLengths = this.getLengths();
var i = 0, il = arcLengths.length;
var targetArcLength; // The targeted u distance value to get
if ( distance ) {
targetArcLength = distance;
} else {
targetArcLength = u * arcLengths[ il - 1 ];
}
//var time = Date.now();
// binary search for the index with largest value smaller than target u distance
var low = 0, high = il - 1, comparison;
while ( low <= high ) {
i = Math.floor( low + ( high - low ) / 2 ); // less likely to overflow, though probably not issue here, JS doesn't really have integers, all numbers are floats
comparison = arcLengths[ i ] - targetArcLength;
if ( comparison < 0 ) {
low = i + 1;
continue;
} else if ( comparison > 0 ) {
high = i - 1;
continue;
} else {
high = i;
break;
// DONE
}
}
i = high;
//console.log('b' , i, low, high, Date.now()- time);
if ( arcLengths[ i ] == targetArcLength ) {
var t = i / ( il - 1 );
return t;
}
// we could get finer grain at lengths, or use simple interpolatation between two points
var lengthBefore = arcLengths[ i ];
var lengthAfter = arcLengths[ i + 1 ];
var segmentLength = lengthAfter - lengthBefore;
// determine where we are between the 'before' and 'after' points
var segmentFraction = ( targetArcLength - lengthBefore ) / segmentLength;
// add that fractional amount to t
var t = ( i + segmentFraction ) / ( il -1 );
return t;
};
// Returns a unit vector tangent at t
// In case any sub curve does not implement its tangent derivation,
// 2 points a small delta apart will be used to find its gradient
// which seems to give a reasonable approximation
THREE.Curve.prototype.getTangent = function( t ) {
var delta = 0.0001;
var t1 = t - delta;
var t2 = t + delta;
// Capping in case of danger
if ( t1 < 0 ) t1 = 0;
if ( t2 > 1 ) t2 = 1;
var pt1 = this.getPoint( t1 );
var pt2 = this.getPoint( t2 );
var vec = pt2.clone().sub(pt1);
return vec.normalize();
};
THREE.Curve.prototype.getTangentAt = function ( u ) {
var t = this.getUtoTmapping( u );
return this.getTangent( t );
};
/**************************************************************
* Utils
**************************************************************/
THREE.Curve.Utils = {
tangentQuadraticBezier: function ( t, p0, p1, p2 ) {
return 2 * ( 1 - t ) * ( p1 - p0 ) + 2 * t * ( p2 - p1 );
},
// Puay Bing, thanks for helping with this derivative!
tangentCubicBezier: function (t, p0, p1, p2, p3 ) {
return - 3 * p0 * (1 - t) * (1 - t) +
3 * p1 * (1 - t) * (1-t) - 6 *t *p1 * (1-t) +
6 * t * p2 * (1-t) - 3 * t * t * p2 +
3 * t * t * p3;
},
tangentSpline: function ( t, p0, p1, p2, p3 ) {
// To check if my formulas are correct
var h00 = 6 * t * t - 6 * t; // derived from 2t^3 − 3t^2 + 1
var h10 = 3 * t * t - 4 * t + 1; // t^3 − 2t^2 + t
var h01 = - 6 * t * t + 6 * t; // − 2t3 + 3t2
var h11 = 3 * t * t - 2 * t; // t3 − t2
return h00 + h10 + h01 + h11;
},
// Catmull-Rom
interpolate: function( p0, p1, p2, p3, t ) {
var v0 = ( p2 - p0 ) * 0.5;
var v1 = ( p3 - p1 ) * 0.5;
var t2 = t * t;
var t3 = t * t2;
return ( 2 * p1 - 2 * p2 + v0 + v1 ) * t3 + ( - 3 * p1 + 3 * p2 - 2 * v0 - v1 ) * t2 + v0 * t + p1;
}
};
// TODO: Transformation for Curves?
/**************************************************************
* 3D Curves
**************************************************************/
// A Factory method for creating new curve subclasses
THREE.Curve.create = function ( constructor, getPointFunc ) {
constructor.prototype = Object.create( THREE.Curve.prototype );
constructor.prototype.constructor = constructor;
constructor.prototype.getPoint = getPointFunc;
return constructor;
};
// THREE Vector3
///////////////////////////////////////////////////////////////////////////////
THREE.Vector3 = function ( x, y, z ) {
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
};
THREE.Vector3.prototype = {
constructor: THREE.Vector3,
set: function ( x, y, z ) {
this.x = x;
this.y = y;
this.z = z;
return this;
},
setX: function ( x ) {
this.x = x;
return this;
},
setY: function ( y ) {
this.y = y;
return this;
},
setZ: function ( z ) {
this.z = z;
return this;
},
setComponent: function ( index, value ) {
switch ( index ) {
case 0: this.x = value; break;
case 1: this.y = value; break;
case 2: this.z = value; break;
default: throw new Error( 'index is out of range: ' + index );
}
},
getComponent: function ( index ) {
switch ( index ) {
case 0: return this.x;
case 1: return this.y;
case 2: return this.z;
default: throw new Error( 'index is out of range: ' + index );
}
},
copy: function ( v ) {
this.x = v.x;
this.y = v.y;
this.z = v.z;
return this;
},
add: function ( v, w ) {
if ( w !== undefined ) {
console.warn( 'THREE.Vector3: .add() now only accepts one argument. Use .addVectors( a, b ) instead.' );
return this.addVectors( v, w );
}
this.x += v.x;
this.y += v.y;
this.z += v.z;
return this;
},
addScalar: function ( s ) {
this.x += s;
this.y += s;
this.z += s;
return this;
},
addVectors: function ( a, b ) {
this.x = a.x + b.x;
this.y = a.y + b.y;
this.z = a.z + b.z;
return this;
},
sub: function ( v, w ) {
if ( w !== undefined ) {
console.warn( 'THREE.Vector3: .sub() now only accepts one argument. Use .subVectors( a, b ) instead.' );
return this.subVectors( v, w );
}
this.x -= v.x;
this.y -= v.y;
this.z -= v.z;
return this;
},
subVectors: function ( a, b ) {
this.x = a.x - b.x;
this.y = a.y - b.y;
this.z = a.z - b.z;
return this;
},
multiply: function ( v, w ) {
if ( w !== undefined ) {
console.warn( 'THREE.Vector3: .multiply() now only accepts one argument. Use .multiplyVectors( a, b ) instead.' );
return this.multiplyVectors( v, w );
}
this.x *= v.x;
this.y *= v.y;
this.z *= v.z;
return this;
},
multiplyScalar: function ( scalar ) {
this.x *= scalar;
this.y *= scalar;
this.z *= scalar;
return this;
},
multiplyVectors: function ( a, b ) {
this.x = a.x * b.x;
this.y = a.y * b.y;
this.z = a.z * b.z;
return this;
},
applyEuler: function () {
var quaternion;
return function ( euler ) {
if ( euler instanceof THREE.Euler === false ) {
console.error( 'THREE.Vector3: .applyEuler() now expects a Euler rotation rather than a Vector3 and order.' );
}
if ( quaternion === undefined ) quaternion = new THREE.Quaternion();
this.applyQuaternion( quaternion.setFromEuler( euler ) );
return this;
};
}(),
applyAxisAngle: function () {
var quaternion;
return function ( axis, angle ) {
if ( quaternion === undefined ) quaternion = new THREE.Quaternion();
this.applyQuaternion( quaternion.setFromAxisAngle( axis, angle ) );
return this;
};
}(),
applyMatrix3: function ( m ) {
var x = this.x;
var y = this.y;
var z = this.z;
var e = m.elements;
this.x = e[ 0 ] * x + e[ 3 ] * y + e[ 6 ] * z;
this.y = e[ 1 ] * x + e[ 4 ] * y + e[ 7 ] * z;
this.z = e[ 2 ] * x + e[ 5 ] * y + e[ 8 ] * z;
return this;
},
applyMatrix4: function ( m ) {
// input: THREE.Matrix4 affine matrix
var x = this.x, y = this.y, z = this.z;
var e = m.elements;
this.x = e[ 0 ] * x + e[ 4 ] * y + e[ 8 ] * z + e[ 12 ];
this.y = e[ 1 ] * x + e[ 5 ] * y + e[ 9 ] * z + e[ 13 ];
this.z = e[ 2 ] * x + e[ 6 ] * y + e[ 10 ] * z + e[ 14 ];
return this;
},
applyProjection: function ( m ) {
// input: THREE.Matrix4 projection matrix
var x = this.x, y = this.y, z = this.z;
var e = m.elements;
var d = 1 / ( e[ 3 ] * x + e[ 7 ] * y + e[ 11 ] * z + e[ 15 ] ); // perspective divide
this.x = ( e[ 0 ] * x + e[ 4 ] * y + e[ 8 ] * z + e[ 12 ] ) * d;
this.y = ( e[ 1 ] * x + e[ 5 ] * y + e[ 9 ] * z + e[ 13 ] ) * d;
this.z = ( e[ 2 ] * x + e[ 6 ] * y + e[ 10 ] * z + e[ 14 ] ) * d;
return this;
},
applyQuaternion: function ( q ) {
var x = this.x;
var y = this.y;
var z = this.z;
var qx = q.x;
var qy = q.y;
var qz = q.z;
var qw = q.w;
// calculate quat * vector
var ix = qw * x + qy * z - qz * y;
var iy = qw * y + qz * x - qx * z;
var iz = qw * z + qx * y - qy * x;
var iw = - qx * x - qy * y - qz * z;
// calculate result * inverse quat
this.x = ix * qw + iw * - qx + iy * - qz - iz * - qy;
this.y = iy * qw + iw * - qy + iz * - qx - ix * - qz;
this.z = iz * qw + iw * - qz + ix * - qy - iy * - qx;
return this;
},
project: function () {
var matrix;
return function ( camera ) {
if ( matrix === undefined ) matrix = new THREE.Matrix4();
matrix.multiplyMatrices( camera.projectionMatrix, matrix.getInverse( camera.matrixWorld ) );
return this.applyProjection( matrix );
};
}(),
unproject: function () {
var matrix;
return function ( camera ) {
if ( matrix === undefined ) matrix = new THREE.Matrix4();
matrix.multiplyMatrices( camera.matrixWorld, matrix.getInverse( camera.projectionMatrix ) );
return this.applyProjection( matrix );
};
}(),
transformDirection: function ( m ) {
// input: THREE.Matrix4 affine matrix
// vector interpreted as a direction
var x = this.x, y = this.y, z = this.z;
var e = m.elements;
this.x = e[ 0 ] * x + e[ 4 ] * y + e[ 8 ] * z;
this.y = e[ 1 ] * x + e[ 5 ] * y + e[ 9 ] * z;
this.z = e[ 2 ] * x + e[ 6 ] * y + e[ 10 ] * z;
this.normalize();
return this;
},
divide: function ( v ) {
this.x /= v.x;
this.y /= v.y;
this.z /= v.z;
return this;
},
divideScalar: function ( scalar ) {
if ( scalar !== 0 ) {
var invScalar = 1 / scalar;
this.x *= invScalar;
this.y *= invScalar;
this.z *= invScalar;
} else {
this.x = 0;
this.y = 0;
this.z = 0;
}
return this;
},
min: function ( v ) {
if ( this.x > v.x ) {
this.x = v.x;
}
if ( this.y > v.y ) {
this.y = v.y;
}
if ( this.z > v.z ) {
this.z = v.z;
}
return this;
},
max: function ( v ) {
if ( this.x < v.x ) {
this.x = v.x;
}
if ( this.y < v.y ) {
this.y = v.y;
}
if ( this.z < v.z ) {
this.z = v.z;
}
return this;
},
clamp: function ( min, max ) {
// This function assumes min < max, if this assumption isn't true it will not operate correctly
if ( this.x < min.x ) {
this.x = min.x;
} else if ( this.x > max.x ) {
this.x = max.x;
}
if ( this.y < min.y ) {
this.y = min.y;
} else if ( this.y > max.y ) {
this.y = max.y;
}
if ( this.z < min.z ) {
this.z = min.z;
} else if ( this.z > max.z ) {
this.z = max.z;
}
return this;
},
clampScalar: ( function () {
var min, max;
return function ( minVal, maxVal ) {
if ( min === undefined ) {
min = new THREE.Vector3();
max = new THREE.Vector3();
}
min.set( minVal, minVal, minVal );
max.set( maxVal, maxVal, maxVal );
return this.clamp( min, max );
};
} )(),
floor: function () {
this.x = Math.floor( this.x );
this.y = Math.floor( this.y );
this.z = Math.floor( this.z );
return this;
},
ceil: function () {
this.x = Math.ceil( this.x );
this.y = Math.ceil( this.y );
this.z = Math.ceil( this.z );
return this;
},
round: function () {
this.x = Math.round( this.x );
this.y = Math.round( this.y );
this.z = Math.round( this.z );
return this;
},
roundToZero: function () {
this.x = ( this.x < 0 ) ? Math.ceil( this.x ) : Math.floor( this.x );
this.y = ( this.y < 0 ) ? Math.ceil( this.y ) : Math.floor( this.y );
this.z = ( this.z < 0 ) ? Math.ceil( this.z ) : Math.floor( this.z );
return this;
},
negate: function () {
this.x = - this.x;
this.y = - this.y;
this.z = - this.z;
return this;
},
dot: function ( v ) {
return this.x * v.x + this.y * v.y + this.z * v.z;
},
lengthSq: function () {
return this.x * this.x + this.y * this.y + this.z * this.z;
},
length: function () {
return Math.sqrt( this.x * this.x + this.y * this.y + this.z * this.z );
},
lengthManhattan: function () {
return Math.abs( this.x ) + Math.abs( this.y ) + Math.abs( this.z );
},
normalize: function () {
return this.divideScalar( this.length() );
},
setLength: function ( l ) {
var oldLength = this.length();
if ( oldLength !== 0 && l !== oldLength ) {
this.multiplyScalar( l / oldLength );
}
return this;
},
lerp: function ( v, alpha ) {
this.x += ( v.x - this.x ) * alpha;
this.y += ( v.y - this.y ) * alpha;
this.z += ( v.z - this.z ) * alpha;
return this;
},
lerpVectors: function ( v1, v2, alpha ) {
this.subVectors( v2, v1 ).multiplyScalar( alpha ).add( v1 );
return this;
},
cross: function ( v, w ) {
if ( w !== undefined ) {
console.warn( 'THREE.Vector3: .cross() now only accepts one argument. Use .crossVectors( a, b ) instead.' );
return this.crossVectors( v, w );
}
var x = this.x, y = this.y, z = this.z;
this.x = y * v.z - z * v.y;
this.y = z * v.x - x * v.z;
this.z = x * v.y - y * v.x;
return this;
},
crossVectors: function ( a, b ) {
var ax = a.x, ay = a.y, az = a.z;
var bx = b.x, by = b.y, bz = b.z;
this.x = ay * bz - az * by;
this.y = az * bx - ax * bz;
this.z = ax * by - ay * bx;
return this;
},
projectOnVector: function () {
var v1, dot;
return function ( vector ) {
if ( v1 === undefined ) v1 = new THREE.Vector3();
v1.copy( vector ).normalize();
dot = this.dot( v1 );
return this.copy( v1 ).multiplyScalar( dot );
};
}(),
projectOnPlane: function () {
var v1;
return function ( planeNormal ) {
if ( v1 === undefined ) v1 = new THREE.Vector3();
v1.copy( this ).projectOnVector( planeNormal );
return this.sub( v1 );
}
}(),
reflect: function () {
// reflect incident vector off plane orthogonal to normal
// normal is assumed to have unit length
var v1;
return function ( normal ) {
if ( v1 === undefined ) v1 = new THREE.Vector3();
return this.sub( v1.copy( normal ).multiplyScalar( 2 * this.dot( normal ) ) );
}
}(),
angleTo: function ( v ) {
var theta = this.dot( v ) / ( this.length() * v.length() );
// clamp, to handle numerical problems
return Math.acos( THREE.Math.clamp( theta, - 1, 1 ) );
},
distanceTo: function ( v ) {
return Math.sqrt( this.distanceToSquared( v ) );
},
distanceToSquared: function ( v ) {
var dx = this.x - v.x;
var dy = this.y - v.y;
var dz = this.z - v.z;
return dx * dx + dy * dy + dz * dz;
},
setEulerFromRotationMatrix: function ( m, order ) {
console.error( 'THREE.Vector3: .setEulerFromRotationMatrix() has been removed. Use Euler.setFromRotationMatrix() instead.' );
},
setEulerFromQuaternion: function ( q, order ) {
console.error( 'THREE.Vector3: .setEulerFromQuaternion() has been removed. Use Euler.setFromQuaternion() instead.' );
},
getPositionFromMatrix: function ( m ) {
console.warn( 'THREE.Vector3: .getPositionFromMatrix() has been renamed to .setFromMatrixPosition().' );
return this.setFromMatrixPosition( m );
},
getScaleFromMatrix: function ( m ) {
console.warn( 'THREE.Vector3: .getScaleFromMatrix() has been renamed to .setFromMatrixScale().' );
return this.setFromMatrixScale( m );
},
getColumnFromMatrix: function ( index, matrix ) {
console.warn( 'THREE.Vector3: .getColumnFromMatrix() has been renamed to .setFromMatrixColumn().' );
return this.setFromMatrixColumn( index, matrix );
},
setFromMatrixPosition: function ( m ) {
this.x = m.elements[ 12 ];
this.y = m.elements[ 13 ];
this.z = m.elements[ 14 ];
return this;
},
setFromMatrixScale: function ( m ) {
var sx = this.set( m.elements[ 0 ], m.elements[ 1 ], m.elements[ 2 ] ).length();
var sy = this.set( m.elements[ 4 ], m.elements[ 5 ], m.elements[ 6 ] ).length();
var sz = this.set( m.elements[ 8 ], m.elements[ 9 ], m.elements[ 10 ] ).length();
this.x = sx;
this.y = sy;
this.z = sz;
return this;
},
setFromMatrixColumn: function ( index, matrix ) {
var offset = index * 4;
var me = matrix.elements;
this.x = me[ offset ];
this.y = me[ offset + 1 ];
this.z = me[ offset + 2 ];
return this;
},
equals: function ( v ) {
return ( ( v.x === this.x ) && ( v.y === this.y ) && ( v.z === this.z ) );
},
fromArray: function ( array, offset ) {
if ( offset === undefined ) offset = 0;
this.x = array[ offset ];
this.y = array[ offset + 1 ];
this.z = array[ offset + 2 ];
return this;
},
toArray: function ( array, offset ) {
if ( array === undefined ) array = [];
if ( offset === undefined ) offset = 0;
array[ offset ] = this.x;
array[ offset + 1 ] = this.y;
array[ offset + 2 ] = this.z;
return array;
},
fromAttribute: function ( attribute, index, offset ) {
if ( offset === undefined ) offset = 0;
index = index * attribute.itemSize + offset;
this.x = attribute.array[ index ];
this.y = attribute.array[ index + 1 ];
this.z = attribute.array[ index + 2 ];
return this;
},
clone: function () {
return new THREE.Vector3( this.x, this.y, this.z );
}
};
// Spline Curve 3
///////////////////////////////////////////////////////////////////////////////
THREE.SplineCurve3 = THREE.Curve.create(
function ( points /* array of Vector3 */) {
this.points = ( points == undefined ) ? [] : points;
},
function ( t ) {
var points = this.points;
var point = ( points.length - 1 ) * t;
var intPoint = Math.floor( point );
var weight = point - intPoint;
var point0 = points[ intPoint == 0 ? intPoint : intPoint - 1 ];
var point1 = points[ intPoint ];
var point2 = points[ intPoint > points.length - 2 ? points.length - 1 : intPoint + 1 ];
var point3 = points[ intPoint > points.length - 3 ? points.length - 1 : intPoint + 2 ];
var vector = new THREE.Vector3();
vector.x = THREE.Curve.Utils.interpolate( point0.x, point1.x, point2.x, point3.x, weight );
vector.y = THREE.Curve.Utils.interpolate( point0.y, point1.y, point2.y, point3.y, weight );
vector.z = THREE.Curve.Utils.interpolate( point0.z, point1.z, point2.z, point3.z, weight );
return vector;
}
);
// Catmull Rom
///////////////////////////////////////////////////////////////////////////////
THREE.CatmullRomCurve3 = ( function() {
var
first = new THREE.Vector3(),
last = new THREE.Vector3(),
tmp = new THREE.Vector3(),
px = new CubicPoly(),
py = new CubicPoly(),
pz = new CubicPoly();
/*
Based on an optimized c++ solution in
- http://stackoverflow.com/questions/9489736/catmull-rom-curve-with-no-cusps-and-no-self-intersections/
- http://ideone.com/NoEbVM
This CubicPoly class could be used for reusing some variables and calculations,
but for three.js curve use, it could be possible inlined and flatten into a single function call
which can be placed in CurveUtils.
*/
function CubicPoly() {
}
/*
* Compute coefficients for a cubic polynomial
* p(s) = c0 + c1*s + c2*s^2 + c3*s^3
* such that
* p(0) = x0, p(1) = x1
* and
* p'(0) = t0, p'(1) = t1.
*/
CubicPoly.prototype.init = function( x0, x1, t0, t1 ) {
this.c0 = x0;
this.c1 = t0;
this.c2 = - 3 * x0 + 3 * x1 - 2 * t0 - t1;
this.c3 = 2 * x0 - 2 * x1 + t0 + t1;
};
CubicPoly.prototype.initNonuniformCatmullRom = function( x0, x1, x2, x3, dt0, dt1, dt2 ) {
// compute tangents when parameterized in [t1,t2]
var t1 = ( x1 - x0 ) / dt0 - ( x2 - x0 ) / ( dt0 + dt1 ) + ( x2 - x1 ) / dt1;
var t2 = ( x2 - x1 ) / dt1 - ( x3 - x1 ) / ( dt1 + dt2 ) + ( x3 - x2 ) / dt2;
// rescale tangents for parametrization in [0,1]
t1 *= dt1;
t2 *= dt1;
// initCubicPoly
this.init( x1, x2, t1, t2 );
};
// standard Catmull-Rom spline: interpolate between x1 and x2 with previous/following points x1/x4
CubicPoly.prototype.initCatmullRom = function( x0, x1, x2, x3, tension ) {
this.init( x1, x2, tension * ( x2 - x0 ), tension * ( x3 - x1 ) );
};
CubicPoly.prototype.calc = function( t ) {
var t2 = t * t;
var t3 = t2 * t;
return this.c0 + this.c1 * t + this.c2 * t2 + this.c3 * t3;
};
// Subclass Three.js curve
return THREE.Curve.create(
function ( p /* array of Vector3 */ ) {
this.points = p || [];
},
function ( t ) {
var points = this.points,
point, intPoint, weight, l;
l = points.length;
if ( l < 2 ) console.log( 'duh, you need at least 2 points' );
point = ( l - 1 ) * t;
intPoint = Math.floor( point );
weight = point - intPoint;
if ( weight == 0 && intPoint == l - 1 ) {
intPoint = l - 2;
weight = 1;
}
var p0, p1, p2, p3;
if ( intPoint == 0 ) {
first.subVectors( points[ 0 ], points[ 1 ] ).add( points[ 0 ] );
p0 = first;
} else {
p0 = points[ intPoint - 1 ];
}
p1 = points[ intPoint ];
p2 = points[ intPoint + 1 ];
if ( intPoint + 2 < l ) {
p3 = points[ intPoint + 2 ]
} else {
last.subVectors( points[ l - 1 ], points[ l - 2 ] ).add( points[ l - 2 ] );
p3 = last;
}
if ( this.type === undefined || this.type === 'centripetal' || this.type === 'chordal' ) {
// init Centripetal / Chordal Catmull-Rom
var pow = this.type === 'chordal' ? 0.5 : 0.25;
var dt0 = Math.pow( p0.distanceToSquared( p1 ), pow );
var dt1 = Math.pow( p1.distanceToSquared( p2 ), pow );
var dt2 = Math.pow( p2.distanceToSquared( p3 ), pow );
// safety check for repeated points
if ( dt1 < 1e-4 ) dt1 = 1.0;
if ( dt0 < 1e-4 ) dt0 = dt1;
if ( dt2 < 1e-4 ) dt2 = dt1;
px.initNonuniformCatmullRom( p0.x, p1.x, p2.x, p3.x, dt0, dt1, dt2 );
py.initNonuniformCatmullRom( p0.y, p1.y, p2.y, p3.y, dt0, dt1, dt2 );
pz.initNonuniformCatmullRom( p0.z, p1.z, p2.z, p3.z, dt0, dt1, dt2 );
} else if (this.type === 'catmullrom') {
var tension = this.tension !== undefined ? this.tension : 0.5;
px.initCatmullRom( p0.x, p1.x, p2.x, p3.x, tension );
py.initCatmullRom( p0.y, p1.y, p2.y, p3.y, tension );
pz.initCatmullRom( p0.z, p1.z, p2.z, p3.z, tension );
}
var v = new THREE.Vector3(
px.calc( weight ),
py.calc( weight ),
pz.calc( weight )
);
return v;
}
);
} )();
//
// UI
///////////////////////////////////////////////////////////////////////////////
var hud = document.querySelector("#hud");
var info = document.querySelector("#info");
var canvas = document.querySelector("#canvas");
// canvas.width = window.innerWidth - 20;
// canvas.height = window.innerHeight - hud.offsetHeight - 20;
// canvas.style.top = hud.offsetHeight + 9 + "px";
// canvas.style.left = "9px";
var DIVISONS = 1000;
var ctx = canvas.getContext("2d");
var needRedraw = true;
var points = [];
var curve = new THREE.CatmullRomCurve3(points);
var curve2 = new THREE.SplineCurve3(points);
window.addEventListener("resize", resize);
resize();
for (i=0; i < 4; i++) {
points.push( new THREE.Vector3(Math.random() * canvas.width, Math.random() * canvas.height, 0))
}
document.addEventListener("mousemove", function(e) {
info.innerHTML = e.offsetX + "," + e.offsetY;
if (mouseOn) {
mouseOn.x = e.offsetX;
mouseOn.y = e.offsetY;
} else {
if(detectHit(e.offsetX, e.offsetY)) {
canvas.style.cursor = "pointer";
} else {
canvas.style.cursor = "default";
}
}
needRedraw = true;
});
var mouseOn = null;
document.addEventListener("mousedown", function(e) {
var point = detectHit(e.offsetX, e.offsetY);
mouseOn = point;
needRedraw = true;
});
document.addEventListener("dblclick", function(e) {
var point = detectHit(e.offsetX, e.offsetY);
if (point) {
if (points.length > 4) {
points.splice( points.indexOf(point), 1 );
}
} else {
var hit = detectHitOnPath(e.offsetX, e.offsetY);
if (hit > -1) {
points.splice( hit + 1, 0, new THREE.Vector3(e.offsetX, e.offsetY, 0))
} else {
points.push( new THREE.Vector3(e.offsetX, e.offsetY, 0))
}
}
needRedraw = true;
});
document.addEventListener("mouseup", function(e) {
if (!mouseOn) return;
mouseOn.x = e.offsetX;
mouseOn.y = e.offsetY;
mouseOn = null;
needRedraw = true;
});
function resize() {
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - hud.offsetHeight - 20;
canvas.style.top = hud.offsetHeight + 9 + "px";
canvas.style.left = "9px";
}
function drawCircle(x, y, size) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
}
function detectHit(x, y) {
for (var i=0;i<points.length;i++) {
point = points[i];
drawCircle(point.x, point.y, 10);
if (ctx.isPointInPath(x, y)) {
return point;
}
}
return null;
}
function detectHitOnPath(x, y) {
var segments = points.length - 1;
var divisions = 20;
ctx.lineWidth = 10;
for (var i=0;i<segments;i++) {
ctx.beginPath();
for (var j = 0; j <= divisions; j++) {
var at = curve.getPoint(i / segments + j / segments / divisions);
if (j==0) ctx.moveTo(at.x, at.y);
else ctx.lineTo(at.x, at.y);
}
if (ctx.isPointInStroke(x, y)) {
return i;
}
}
return -1;
}
function draw() {
requestAnimationFrame(draw);
// if (needRedraw) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#aaa';
for (var i=0;i<points.length;i++) {
point = points[i];
drawCircle(point.x, point.y, 10);
ctx.fill();
}
if (spline.checked) {
// original spline implementation
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.beginPath();
for (var i=0;i<=DIVISONS;i++) {
point = curve2.getPoint(i / DIVISONS);
if (i==0) ctx.moveTo(point.x, point.y);
else ctx.lineTo(point.x, point.y);
}
ctx.stroke();
}
if (uniform.checked) {
// new catmull implementation
curve.type = 'catmullrom';
tension_value.textContent = curve.tension = tension.value;
ctx.strokeStyle = 'green';
ctx.lineWidth = 3;
ctx.beginPath();
for (var i=0;i<=DIVISONS;i++) {
point = curve.getPoint(i / DIVISONS);
if (i==0) ctx.moveTo(point.x, point.y);
else ctx.lineTo(point.x, point.y);
}
ctx.stroke();
}
if (centripetal.checked) {
curve.type = 'centripetal';
ctx.strokeStyle = 'purple';
ctx.lineWidth = 3;
ctx.beginPath();
for (var i=0;i<=DIVISONS;i++) {
point = curve.getPoint(i / DIVISONS);
if (i==0) ctx.moveTo(point.x, point.y);
else ctx.lineTo(point.x, point.y);
}
ctx.stroke();
}
if (chordal.checked) {
curve.type = 'chordal';
ctx.strokeStyle = 'orange';
ctx.lineWidth = 3;
ctx.beginPath();
for (var i=0;i<=DIVISONS;i++) {
point = curve.getPoint(i / DIVISONS);
if (i==0) ctx.moveTo(point.x, point.y);
else ctx.lineTo(point.x, point.y);
}
ctx.stroke();
}
// }
needRedraw = false;
}
draw();
///////////////////////////////////////////////////////////////////////////////
!
