/** * @author zz85 / http://www.lab4games.net/zz85/blog * Defines a 2d shape plane using paths. **/ // STEP 1 Create a path. // STEP 2 Turn path into shape. // STEP 3 ExtrudeGeometry takes in Shape/Shapes // STEP 3a - Extract points from each shape, turn to vertices // STEP 3b - Triangulate each shape, add faces. THREE.Shape = function () { THREE.Path.apply( this, arguments ); this.holes = []; }; THREE.Shape.prototype = Object.create( THREE.Path.prototype ); // Convenience method to return ExtrudeGeometry THREE.Shape.prototype.extrude = function ( options ) { var extruded = new THREE.ExtrudeGeometry( this, options ); return extruded; }; // Convenience method to return ShapeGeometry THREE.Shape.prototype.makeGeometry = function ( options ) { var geometry = new THREE.ShapeGeometry( this, options ); return geometry; }; // Get points of holes THREE.Shape.prototype.getPointsHoles = function ( divisions ) { var i, il = this.holes.length, holesPts = []; for ( i = 0; i < il; i ++ ) { holesPts[ i ] = this.holes[ i ].getTransformedPoints( divisions, this.bends ); } return holesPts; }; // Get points of holes (spaced by regular distance) THREE.Shape.prototype.getSpacedPointsHoles = function ( divisions ) { var i, il = this.holes.length, holesPts = []; for ( i = 0; i < il; i ++ ) { holesPts[ i ] = this.holes[ i ].getTransformedSpacedPoints( divisions, this.bends ); } return holesPts; }; // Get points of shape and holes (keypoints based on segments parameter) THREE.Shape.prototype.extractAllPoints = function ( divisions ) { return { shape: this.getTransformedPoints( divisions ), holes: this.getPointsHoles( divisions ) }; }; THREE.Shape.prototype.extractPoints = function ( divisions ) { if (this.useSpacedPoints) { return this.extractAllSpacedPoints(divisions); } return this.extractAllPoints(divisions); }; // // THREE.Shape.prototype.extractAllPointsWithBend = function ( divisions, bend ) { // // return { // // shape: this.transform( bend, divisions ), // holes: this.getPointsHoles( divisions, bend ) // // }; // // }; // Get points of shape and holes (spaced by regular distance) THREE.Shape.prototype.extractAllSpacedPoints = function ( divisions ) { return { shape: this.getTransformedSpacedPoints( divisions ), holes: this.getSpacedPointsHoles( divisions ) }; }; /************************************************************** * Utils **************************************************************/ THREE.Shape.Utils = { triangulateShape: function ( contour, holes ) { function point_in_segment_2D_colin( inSegPt1, inSegPt2, inOtherPt ) { // inOtherPt needs to be colinear to the inSegment if ( inSegPt1.x != inSegPt2.x ) { if ( inSegPt1.x < inSegPt2.x ) { return ( ( inSegPt1.x <= inOtherPt.x ) && ( inOtherPt.x <= inSegPt2.x ) ); } else { return ( ( inSegPt2.x <= inOtherPt.x ) && ( inOtherPt.x <= inSegPt1.x ) ); } } else { if ( inSegPt1.y < inSegPt2.y ) { return ( ( inSegPt1.y <= inOtherPt.y ) && ( inOtherPt.y <= inSegPt2.y ) ); } else { return ( ( inSegPt2.y <= inOtherPt.y ) && ( inOtherPt.y <= inSegPt1.y ) ); } } } function intersect_segments_2D( inSeg1Pt1, inSeg1Pt2, inSeg2Pt1, inSeg2Pt2, inExcludeAdjacentSegs ) { var EPSILON = 0.0000000001; var seg1dx = inSeg1Pt2.x - inSeg1Pt1.x, seg1dy = inSeg1Pt2.y - inSeg1Pt1.y; var seg2dx = inSeg2Pt2.x - inSeg2Pt1.x, seg2dy = inSeg2Pt2.y - inSeg2Pt1.y; var seg1seg2dx = inSeg1Pt1.x - inSeg2Pt1.x; var seg1seg2dy = inSeg1Pt1.y - inSeg2Pt1.y; var limit = seg1dy * seg2dx - seg1dx * seg2dy; var perpSeg1 = seg1dy * seg1seg2dx - seg1dx * seg1seg2dy; if ( Math.abs(limit) > EPSILON ) { // not parallel var perpSeg2; if ( limit > 0 ) { if ( ( perpSeg1 < 0 ) || ( perpSeg1 > limit ) ) return []; perpSeg2 = seg2dy * seg1seg2dx - seg2dx * seg1seg2dy; if ( ( perpSeg2 < 0 ) || ( perpSeg2 > limit ) ) return []; } else { if ( ( perpSeg1 > 0 ) || ( perpSeg1 < limit ) ) return []; perpSeg2 = seg2dy * seg1seg2dx - seg2dx * seg1seg2dy; if ( ( perpSeg2 > 0 ) || ( perpSeg2 < limit ) ) return []; } // i.e. to reduce rounding errors // intersection at endpoint of segment#1? if ( perpSeg2 == 0 ) { if ( ( inExcludeAdjacentSegs ) && ( ( perpSeg1 == 0 ) || ( perpSeg1 == limit ) ) ) return []; return [ inSeg1Pt1 ]; } if ( perpSeg2 == limit ) { if ( ( inExcludeAdjacentSegs ) && ( ( perpSeg1 == 0 ) || ( perpSeg1 == limit ) ) ) return []; return [ inSeg1Pt2 ]; } // intersection at endpoint of segment#2? if ( perpSeg1 == 0 ) return [ inSeg2Pt1 ]; if ( perpSeg1 == limit ) return [ inSeg2Pt2 ]; // return real intersection point var factorSeg1 = perpSeg2 / limit; return [ { x: inSeg1Pt1.x + factorSeg1 * seg1dx, y: inSeg1Pt1.y + factorSeg1 * seg1dy } ]; } else { // parallel or colinear if ( ( perpSeg1 != 0 ) || ( seg2dy * seg1seg2dx != seg2dx * seg1seg2dy ) ) return []; // they are collinear or degenerate var seg1Pt = ( (seg1dx == 0) && (seg1dy == 0) ); // segment1 ist just a point? var seg2Pt = ( (seg2dx == 0) && (seg2dy == 0) ); // segment2 ist just a point? // both segments are points if ( seg1Pt && seg2Pt ) { if ( (inSeg1Pt1.x != inSeg2Pt1.x) || (inSeg1Pt1.y != inSeg2Pt1.y) ) return []; // they are distinct points return [ inSeg1Pt1 ]; // they are the same point } // segment#1 is a single point if ( seg1Pt ) { if (! point_in_segment_2D_colin( inSeg2Pt1, inSeg2Pt2, inSeg1Pt1 ) ) return []; // but not in segment#2 return [ inSeg1Pt1 ]; } // segment#2 is a single point if ( seg2Pt ) { if (! point_in_segment_2D_colin( inSeg1Pt1, inSeg1Pt2, inSeg2Pt1 ) ) return []; // but not in segment#1 return [ inSeg2Pt1 ]; } // they are collinear segments, which might overlap var seg1min, seg1max, seg1minVal, seg1maxVal; var seg2min, seg2max, seg2minVal, seg2maxVal; if (seg1dx != 0) { // the segments are NOT on a vertical line if ( inSeg1Pt1.x < inSeg1Pt2.x ) { seg1min = inSeg1Pt1; seg1minVal = inSeg1Pt1.x; seg1max = inSeg1Pt2; seg1maxVal = inSeg1Pt2.x; } else { seg1min = inSeg1Pt2; seg1minVal = inSeg1Pt2.x; seg1max = inSeg1Pt1; seg1maxVal = inSeg1Pt1.x; } if ( inSeg2Pt1.x < inSeg2Pt2.x ) { seg2min = inSeg2Pt1; seg2minVal = inSeg2Pt1.x; seg2max = inSeg2Pt2; seg2maxVal = inSeg2Pt2.x; } else { seg2min = inSeg2Pt2; seg2minVal = inSeg2Pt2.x; seg2max = inSeg2Pt1; seg2maxVal = inSeg2Pt1.x; } } else { // the segments are on a vertical line if ( inSeg1Pt1.y < inSeg1Pt2.y ) { seg1min = inSeg1Pt1; seg1minVal = inSeg1Pt1.y; seg1max = inSeg1Pt2; seg1maxVal = inSeg1Pt2.y; } else { seg1min = inSeg1Pt2; seg1minVal = inSeg1Pt2.y; seg1max = inSeg1Pt1; seg1maxVal = inSeg1Pt1.y; } if ( inSeg2Pt1.y < inSeg2Pt2.y ) { seg2min = inSeg2Pt1; seg2minVal = inSeg2Pt1.y; seg2max = inSeg2Pt2; seg2maxVal = inSeg2Pt2.y; } else { seg2min = inSeg2Pt2; seg2minVal = inSeg2Pt2.y; seg2max = inSeg2Pt1; seg2maxVal = inSeg2Pt1.y; } } if ( seg1minVal <= seg2minVal ) { if ( seg1maxVal < seg2minVal ) return []; if ( seg1maxVal == seg2minVal ) { if ( inExcludeAdjacentSegs ) return []; return [ seg2min ]; } if ( seg1maxVal <= seg2maxVal ) return [ seg2min, seg1max ]; return [ seg2min, seg2max ]; } else { if ( seg1minVal > seg2maxVal ) return []; if ( seg1minVal == seg2maxVal ) { if ( inExcludeAdjacentSegs ) return []; return [ seg1min ]; } if ( seg1maxVal <= seg2maxVal ) return [ seg1min, seg1max ]; return [ seg1min, seg2max ]; } } } function isPointInsideAngle( inVertex, inLegFromPt, inLegToPt, inOtherPt ) { // The order of legs is important var EPSILON = 0.0000000001; // translation of all points, so that Vertex is at (0,0) var legFromPtX = inLegFromPt.x - inVertex.x, legFromPtY = inLegFromPt.y - inVertex.y; var legToPtX = inLegToPt.x - inVertex.x, legToPtY = inLegToPt.y - inVertex.y; var otherPtX = inOtherPt.x - inVertex.x, otherPtY = inOtherPt.y - inVertex.y; // main angle >0: < 180 deg.; 0: 180 deg.; <0: > 180 deg. var from2toAngle = legFromPtX * legToPtY - legFromPtY * legToPtX; var from2otherAngle = legFromPtX * otherPtY - legFromPtY * otherPtX; if ( Math.abs(from2toAngle) > EPSILON ) { // angle != 180 deg. var other2toAngle = otherPtX * legToPtY - otherPtY * legToPtX; // console.log( "from2to: " + from2toAngle + ", from2other: " + from2otherAngle + ", other2to: " + other2toAngle ); if ( from2toAngle > 0 ) { // main angle < 180 deg. return ( ( from2otherAngle >= 0 ) && ( other2toAngle >= 0 ) ); } else { // main angle > 180 deg. return ( ( from2otherAngle >= 0 ) || ( other2toAngle >= 0 ) ); } } else { // angle == 180 deg. // console.log( "from2to: 180 deg., from2other: " + from2otherAngle ); return ( from2otherAngle > 0 ); } } function removeHoles( contour, holes ) { var shape = contour.concat(); // work on this shape var hole; function isCutLineInsideAngles( inShapeIdx, inHoleIdx ) { // Check if hole point lies within angle around shape point var lastShapeIdx = shape.length - 1; var prevShapeIdx = inShapeIdx - 1; if ( prevShapeIdx < 0 ) prevShapeIdx = lastShapeIdx; var nextShapeIdx = inShapeIdx + 1; if ( nextShapeIdx > lastShapeIdx ) nextShapeIdx = 0; var insideAngle = isPointInsideAngle( shape[inShapeIdx], shape[ prevShapeIdx ], shape[ nextShapeIdx ], hole[inHoleIdx] ); if (! insideAngle ) { // console.log( "Vertex (Shape): " + inShapeIdx + ", Point: " + hole[inHoleIdx].x + "/" + hole[inHoleIdx].y ); return false; } // Check if shape point lies within angle around hole point var lastHoleIdx = hole.length - 1; var prevHoleIdx = inHoleIdx - 1; if ( prevHoleIdx < 0 ) prevHoleIdx = lastHoleIdx; var nextHoleIdx = inHoleIdx + 1; if ( nextHoleIdx > lastHoleIdx ) nextHoleIdx = 0; insideAngle = isPointInsideAngle( hole[inHoleIdx], hole[ prevHoleIdx ], hole[ nextHoleIdx ], shape[inShapeIdx] ); if (! insideAngle ) { // console.log( "Vertex (Hole): " + inHoleIdx + ", Point: " + shape[inShapeIdx].x + "/" + shape[inShapeIdx].y ); return false; } return true; } function intersectsShapeEdge( inShapePt, inHolePt ) { // checks for intersections with shape edges var sIdx, nextIdx, intersection; for ( sIdx = 0; sIdx < shape.length; sIdx++ ) { nextIdx = sIdx+1; nextIdx %= shape.length; intersection = intersect_segments_2D( inShapePt, inHolePt, shape[sIdx], shape[nextIdx], true ); if ( intersection.length > 0 ) return true; } return false; } var indepHoles = []; function intersectsHoleEdge( inShapePt, inHolePt ) { // checks for intersections with hole edges var ihIdx, chkHole, hIdx, nextIdx, intersection; for ( ihIdx = 0; ihIdx < indepHoles.length; ihIdx++ ) { chkHole = holes[indepHoles[ihIdx]]; for ( hIdx = 0; hIdx < chkHole.length; hIdx++ ) { nextIdx = hIdx+1; nextIdx %= chkHole.length; intersection = intersect_segments_2D( inShapePt, inHolePt, chkHole[hIdx], chkHole[nextIdx], true ); if ( intersection.length > 0 ) return true; } } return false; } var holeIndex, shapeIndex, shapePt, holePt, holeIdx, cutKey, failedCuts = [], tmpShape1, tmpShape2, tmpHole1, tmpHole2; for ( var h = 0, hl = holes.length; h < hl; h ++ ) { indepHoles.push( h ); } var counter = indepHoles.length * 2; while ( indepHoles.length > 0 ) { counter --; if ( counter < 0 ) { console.log( "Infinite Loop! Holes left:" + indepHoles.length + ", Probably Hole outside Shape!" ); break; } // search for shape-vertex and hole-vertex, // which can be connected without intersections for ( shapeIndex = 0; shapeIndex < shape.length; shapeIndex++ ) { shapePt = shape[ shapeIndex ]; holeIndex = -1; // search for hole which can be reached without intersections for ( var h = 0; h < indepHoles.length; h ++ ) { holeIdx = indepHoles[h]; // prevent multiple checks cutKey = shapePt.x + ":" + shapePt.y + ":" + holeIdx; if ( failedCuts[cutKey] !== undefined ) continue; hole = holes[holeIdx]; for ( var h2 = 0; h2 < hole.length; h2 ++ ) { holePt = hole[ h2 ]; if (! isCutLineInsideAngles( shapeIndex, h2 ) ) continue; if ( intersectsShapeEdge( shapePt, holePt ) ) continue; if ( intersectsHoleEdge( shapePt, holePt ) ) continue; holeIndex = h2; indepHoles.splice(h,1); tmpShape1 = shape.slice( 0, shapeIndex+1 ); tmpShape2 = shape.slice( shapeIndex ); tmpHole1 = hole.slice( holeIndex ); tmpHole2 = hole.slice( 0, holeIndex+1 ); shape = tmpShape1.concat( tmpHole1 ).concat( tmpHole2 ).concat( tmpShape2 ); // Debug only, to show the selected cuts // glob_CutLines.push( [ shapePt, holePt ] ); break; } if ( holeIndex >= 0 ) break; // hole-vertex found failedCuts[cutKey] = true; // remember failure } if ( holeIndex >= 0 ) break; // hole-vertex found } } return shape; /* shape with no holes */ } var i, il, f, face, key, index, allPointsMap = {}; // To maintain reference to old shape, one must match coordinates, or offset the indices from original arrays. It's probably easier to do the first. var allpoints = contour.concat(); for ( var h = 0, hl = holes.length; h < hl; h ++ ) { Array.prototype.push.apply( allpoints, holes[h] ); } //console.log( "allpoints",allpoints, allpoints.length ); // prepare all points map for ( i = 0, il = allpoints.length; i < il; i ++ ) { key = allpoints[ i ].x + ":" + allpoints[ i ].y; if ( allPointsMap[ key ] !== undefined ) { console.log( "Duplicate point", key ); } allPointsMap[ key ] = i; } // remove holes by cutting paths to holes and adding them to the shape var shapeWithoutHoles = removeHoles( contour, holes ); var triangles = THREE.FontUtils.Triangulate( shapeWithoutHoles, false ); // True returns indices for points of spooled shape //console.log( "triangles",triangles, triangles.length ); // check all face vertices against all points map for ( i = 0, il = triangles.length; i < il; i ++ ) { face = triangles[ i ]; for ( f = 0; f < 3; f ++ ) { key = face[ f ].x + ":" + face[ f ].y; index = allPointsMap[ key ]; if ( index !== undefined ) { face[ f ] = index; } } } return triangles.concat(); }, isClockWise: function ( pts ) { return THREE.FontUtils.Triangulate.area( pts ) < 0; }, // Bezier Curves formulas obtained from // http://en.wikipedia.org/wiki/B%C3%A9zier_curve // Quad Bezier Functions b2p0: function ( t, p ) { var k = 1 - t; return k * k * p; }, b2p1: function ( t, p ) { return 2 * ( 1 - t ) * t * p; }, b2p2: function ( t, p ) { return t * t * p; }, b2: function ( t, p0, p1, p2 ) { return this.b2p0( t, p0 ) + this.b2p1( t, p1 ) + this.b2p2( t, p2 ); }, // Cubic Bezier Functions b3p0: function ( t, p ) { var k = 1 - t; return k * k * k * p; }, b3p1: function ( t, p ) { var k = 1 - t; return 3 * k * k * t * p; }, b3p2: function ( t, p ) { var k = 1 - t; return 3 * k * t * t * p; }, b3p3: function ( t, p ) { return t * t * t * p; }, b3: function ( t, p0, p1, p2, p3 ) { return this.b3p0( t, p0 ) + this.b3p1( t, p1 ) + this.b3p2( t, p2 ) + this.b3p3( t, p3 ); } };