Fixes relating to #1879 and possibly #1501

- Path.js (esp. Arcs) is still confusing, but as of now
- Ellipses should work
- Path still uses "PATH.ACTIONS"
- the internal curve representation doesn't seem to be used yet
- Path.arc() uses .absarc() which uses .absellipse()
- examples/webgl_geometry_shapes.html should run now

examples/webgl_geometry_shapes.html

@@ -278,11 +278,11 @@
 
 				var arcShape = new THREE.Shape();
 				arcShape.moveTo( 50, 10 );
-				arcShape.arc( 10, 10, 40, 0, Math.PI*2, false );
+				arcShape.absarc( 10, 10, 40, 0, Math.PI*2, false );
 
 				var holePath = new THREE.Path();
 				holePath.moveTo( 20, 10 );
-				holePath.arc( 10, 10, 10, 0, Math.PI*2, true );
+				holePath.absarc( 10, 10, 10, 0, Math.PI*2, true );
 				arcShape.holes.push( holePath );
 
 				var arc3d = arcShape.extrude( extrudeSettings );
@@ -294,16 +294,18 @@
 
 				var smileyShape = new THREE.Shape();
 				smileyShape.moveTo( 80, 40 );
-				smileyShape.arc( 40, 40, 40, 0, Math.PI*2, false );
+				smileyShape.absarc( 40, 40, 40, 0, Math.PI*2, false );
 
 				var smileyEye1Path = new THREE.Path();
 				smileyEye1Path.moveTo( 35, 20 );
-				smileyEye1Path.arc( 25, 20, 10, 0, Math.PI*2, true );
+				// smileyEye1Path.absarc( 25, 20, 10, 0, Math.PI*2, true );
+				smileyEye1Path.absellipse( 25, 20, 10, 10, 0, Math.PI*2, true );
+				
 				smileyShape.holes.push( smileyEye1Path );
 
 				var smileyEye2Path = new THREE.Path();
 				smileyEye2Path.moveTo( 65, 20 );
-				smileyEye2Path.arc( 55, 20, 10, 0, Math.PI*2, true );
+				smileyEye2Path.absarc( 55, 20, 10, 0, Math.PI*2, true );
 				smileyShape.holes.push( smileyEye2Path );
 
 				var smileyMouthPath = new THREE.Path();

src/extras/core/Curve.js

@@ -18,6 +18,7 @@
  * THREE.CubicBezierCurve
  * THREE.SplineCurve
  * THREE.ArcCurve
+ * THREE.EllipseCurve
  *
  * -- 3d classes --
  * THREE.LineCurve3

src/extras/core/Path.js

@@ -132,35 +132,44 @@ THREE.Path.prototype.splineThru = function( pts /*Array of Vector*/ ) {
 
 // FUTURE: Change the API or follow canvas API?
 
-THREE.Path.prototype.ellipse = function ( aX, aY, xRadius, yRadius,
+THREE.Path.prototype.arc = function ( aX, aY, aRadius,
 									  aStartAngle, aEndAngle, aClockwise ) {
 
-	var laste = this.actions[ this.actions.length - 1];
-	this.absellipse(laste.x + aX, laste.y + aY, xRadius, yRadius,
-									aStartAngle, aEndAngle, aClockwise );
+	var lastargs = this.actions[ this.actions.length - 1].args;
+	var x0 = lastargs[ lastargs.length - 2 ];
+	var y0 = lastargs[ lastargs.length - 1 ];
+
+	this.absarc(aX + x0, aY + y0, aRadius,
+		aStartAngle, aEndAngle, aClockwise );
+	
+ };
+
+ THREE.Path.prototype.absarc = function ( aX, aY, aRadius,
+									  aStartAngle, aEndAngle, aClockwise ) {
+	this.absellipse(aX, aY, aRadius, aRadius, aStartAngle, aEndAngle, aClockwise);
  };
  
-THREE.Path.prototype.arc = function ( aX, aY, aRadius,
+THREE.Path.prototype.ellipse = function ( aX, aY, xRadius, yRadius,
 									  aStartAngle, aEndAngle, aClockwise ) {
 
-	var laste = this.actions[ this.actions.length - 1];
-	this.absarc(laste.x + aX, laste.y + aY, aRadius,
-									aStartAngle, aEndAngle, aClockwise );
+	var lastargs = this.actions[ this.actions.length - 1].args;
+	var x0 = lastargs[ lastargs.length - 2 ];
+	var y0 = lastargs[ lastargs.length - 1 ];
+
+	this.absellipse(aX + x0, aY + y0, xRadius, yRadius,
+		aStartAngle, aEndAngle, aClockwise );
+
  };
  
 
-
 THREE.Path.prototype.absellipse = function ( aX, aY, xRadius, yRadius,
 									  aStartAngle, aEndAngle, aClockwise ) {
 
 	var args = Array.prototype.slice.call( arguments );
-
 	var curve = new THREE.EllipseCurve( aX, aY, xRadius, yRadius,
 									aStartAngle, aEndAngle, aClockwise );
 	this.curves.push( curve );
 
-	// All of the other actions look to the last two elements in the list to
-	// find the ending point, so we need to append them.
 	var lastPoint = curve.getPoint(aClockwise ? 1 : 0);
 	args.push(lastPoint.x);
 	args.push(lastPoint.y);
@@ -169,13 +178,6 @@ THREE.Path.prototype.absellipse = function ( aX, aY, xRadius, yRadius,
 
  };
 
-THREE.Path.prototype.absarc = function ( aX, aY, aRadius,
-									  aStartAngle, aEndAngle, aClockwise ) {
-	this.absellipse(aX, aY, aRadius, aRadius,
-		aStartAngle, aEndAngle, aClockwise);
- };
-
-
 THREE.Path.prototype.getSpacedPoints = function ( divisions, closedPath ) {
 
 	if ( ! divisions ) divisions = 40;
@@ -345,7 +347,6 @@ THREE.Path.prototype.getPoints = function( divisions, closedPath ) {
 				aStartAngle = args[ 3 ], aEndAngle = args[ 4 ],
 				aClockwise = !!args[ 5 ];
 
-
 			var deltaAngle = aEndAngle - aStartAngle;
 			var angle;
 			var tdivisions = divisions * 2;
@@ -379,7 +380,7 @@ THREE.Path.prototype.getPoints = function( divisions, closedPath ) {
 
 			var aX = args[ 0 ], aY = args[ 1 ],
 				xRadius = args[ 2 ],
-				yRadius = args[3]
+				yRadius = args[ 3 ],
 				aStartAngle = args[ 4 ], aEndAngle = args[ 5 ],
 				aClockwise = !!args[ 6 ];