From 2ceae0066d368801496507625abafc70ee4395d5 Mon Sep 17 00:00:00 2001 From: zz85 Date: Thu, 19 Jul 2012 23:26:26 +0800 Subject: [PATCH] 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 | 12 ++++---- src/extras/core/Curve.js | 1 + src/extras/core/Path.js | 43 +++++++++++++++-------------- 3 files changed, 30 insertions(+), 26 deletions(-) diff --git a/examples/webgl_geometry_shapes.html b/examples/webgl_geometry_shapes.html index 71eb000fdc..887916ee8f 100644 --- a/examples/webgl_geometry_shapes.html +++ b/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(); diff --git a/src/extras/core/Curve.js b/src/extras/core/Curve.js index baa833f96b..5eab6d034d 100644 --- a/src/extras/core/Curve.js +++ b/src/extras/core/Curve.js @@ -18,6 +18,7 @@ * THREE.CubicBezierCurve * THREE.SplineCurve * THREE.ArcCurve + * THREE.EllipseCurve * * -- 3d classes -- * THREE.LineCurve3 diff --git a/src/extras/core/Path.js b/src/extras/core/Path.js index 2d44c570ad..9eecd35945 100644 --- a/src/extras/core/Path.js +++ b/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 ]; -- GitLab