|
@@ -13,111 +13,126 @@
|
|
|
<h1>[name]</h1>
|
|
|
|
|
|
<div class="desc">
|
|
|
- A 2d path representation, comprising of points, lines, and cubes, similar to the html5 2d canvas api.
|
|
|
+ A 2d path representation, comprising of points, lines, and cubes, similar to the 2D Canvas API.
|
|
|
It extends [page:CurvePath].
|
|
|
</div>
|
|
|
|
|
|
+ <h2>Example</h2>
|
|
|
+
|
|
|
+ <code>
|
|
|
+var v1 = new THREE.Vector3();
|
|
|
+var v2 = new THREE.Vector3(1, 45, 6);
|
|
|
+var v3 = new THREE.Vector3(34, 34, 676);
|
|
|
+
|
|
|
+var vectors = [v1, v2, v3];
|
|
|
+
|
|
|
+var path = new THREE.Path(vectors);
|
|
|
+ </code>
|
|
|
+
|
|
|
|
|
|
<h2>Constructor</h2>
|
|
|
|
|
|
|
|
|
<h3>[name]( [page:Array points] )</h3>
|
|
|
<div>
|
|
|
- points -- array of Vector2
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- Creates a Path from the points. The first vector defines the offset. After that the lines get defined.
|
|
|
+ points -- (optional) array of [page:Vector2 Vector2s].<br /><br />
|
|
|
+
|
|
|
+ Creates a Path from the points. The first point defines the offset, then successive points
|
|
|
+ are added to the [page:CurvePath.curves curves] array as [page:LineCurve LineCurves].<br /><br />
|
|
|
+
|
|
|
+ If no points are specified, an empty path is created and the [page:.currentPoint] is set to
|
|
|
+ the origin.
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<h2>Properties</h2>
|
|
|
+ <div>See the base [page:CurvePath] class for common properties.</div>
|
|
|
|
|
|
+ <h3>[property:array currentPoint]</h3>
|
|
|
+ <div>The current offset of the path. Any new [page:Curve] added will start here.</div>
|
|
|
|
|
|
- <h3>[property:array actions]</h3>
|
|
|
- <div>
|
|
|
- The possible actions that define the path.
|
|
|
- </div>
|
|
|
|
|
|
<h2>Methods</h2>
|
|
|
+ <div>See the base [page:CurvePath] class for common methods.</div>
|
|
|
|
|
|
- <h3>[method:null fromPoints]( [page:Array vector2s] )</h3>
|
|
|
+ <h3>[method:null absarc]( [page:Float x], [page:Float y], [page:Float radius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )</h3>
|
|
|
<div>
|
|
|
- Adds to the Path from the points. The first vector defines the offset. After that the lines get defined.
|
|
|
+ x, y -- The absolute center of the arc.<br />
|
|
|
+ radius -- The radius of the arc.<br />
|
|
|
+ startAngle -- The start angle in radians.<br />
|
|
|
+ endAngle -- The end angle in radians.<br />
|
|
|
+ clockwise -- Sweep the arc clockwise. Defaults to *false*.<br /><br />
|
|
|
+
|
|
|
+ Adds an absolutely positioned [page:EllipseCurve EllipseCurve] to the path.
|
|
|
</div>
|
|
|
|
|
|
- <h3>[method:null moveTo]( [page:Float x], [page:Float y] )</h3>
|
|
|
- <div>This moves the offset to x and y</div>
|
|
|
+ <h3>[method:null absellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise], [page:Float rotation] )</h3>
|
|
|
+ <div>
|
|
|
+ x, y -- The absolute center of the ellipse.<br />
|
|
|
+ xRadius -- The radius of the ellipse in the x axis.<br />
|
|
|
+ yRadius -- The radius of the ellipse in the y axis.<br />
|
|
|
+ startAngle -- The start angle in radians.<br />
|
|
|
+ endAngle -- The end angle in radians.<br />
|
|
|
+ clockwise -- Sweep the ellipse clockwise. Defaults to false.<br />
|
|
|
+ rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0.<br /><br />
|
|
|
+
|
|
|
+ Adds an absolutely positioned [page:EllipseCurve EllipseCurve] to the path.
|
|
|
+ </div>
|
|
|
|
|
|
- <h3>[method:null lineTo]( [page:Float x], [page:Float y] )</h3>
|
|
|
- <div>This creates a line from the offset to X and Y and updates the offset to X and Y.</div>
|
|
|
+ <h3>[method:null arc]( [page:Float x], [page:Float y], [page:Float radius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )</h3>
|
|
|
+ <div>
|
|
|
+ x, y -- The center of the arc offset from the last call.<br />
|
|
|
+ radius -- The radius of the arc.<br />
|
|
|
+ startAngle -- The start angle in radians.<br />
|
|
|
+ endAngle -- The end angle in radians.<br />
|
|
|
+ clockwise -- Sweep the arc clockwise. Defaults to *false*.<br /><br />
|
|
|
|
|
|
- <h3>[method:null quadraticCurveTo]( [page:Float cpX], [page:Float cpY], [page:Float x], [page:Float y] )</h3>
|
|
|
- <div>This creates a quadratic curve from the offset to x and y with cpX and cpY as control point and updates the offset to x and y.</div>
|
|
|
+ Adds an [page:EllipseCurve EllipseCurve] to the path, positioned relative to [page:.currentPoint].
|
|
|
+ </div>
|
|
|
|
|
|
- <h3>[method:null bezierCurveTo]( [page:Float cp1X], [page:Float cp1Y], [page:Float cp2X], [page:Float cp2Y], [page:Float x], [page:Float y] )</h3>
|
|
|
- <div>This creates a bezier curve from the last offset to x and y with cp1X, cp1Y and cp1X, cp1Y as control points and updates the offset to x and y.</div>
|
|
|
|
|
|
- <h3>[method:null splineThru] ( [page:Array points] ) </h3>
|
|
|
- <div>points - An array of [page:Vector2]s</div>
|
|
|
- <div>Connects a new [page:SplineCurve] onto the path.</div>
|
|
|
+ <h3>[method:null bezierCurveTo]( [page:Float cp1X], [page:Float cp1Y], [page:Float cp2X], [page:Float cp2Y], [page:Float x], [page:Float y] )</h3>
|
|
|
+ <div>This creates a bezier curve from [page:.currentPoint] with cp1X, cp1Y and cp1X, cp1Y as control points and updates [page:.currentPoint] to x and y.</div>
|
|
|
|
|
|
- <h3>[method:null arc]( [page:Float x], [page:Float y], [page:Float radius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )</h3>
|
|
|
+ <h3>[method:null fromPoints]( [page:Array vector2s] )</h3>
|
|
|
<div>
|
|
|
- x, y -- The center of the arc offset from the last call
|
|
|
- radius -- The radius of the arc
|
|
|
- startAngle -- The start angle in radians
|
|
|
- endAngle -- The end angle in radians
|
|
|
- clockwise -- Sweep the arc clockwise. Defaults to false
|
|
|
- </div>
|
|
|
- <div>Draw an arc offset from the last call</div>
|
|
|
+ points -- array of [page:Vector2 Vector2s].<br /><br />
|
|
|
|
|
|
- <h3>[method:null absarc]( [page:Float x], [page:Float y], [page:Float radius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )</h3>
|
|
|
- <div>
|
|
|
- x, y -- The absolute center of the arc
|
|
|
- radius -- The radius of the arc
|
|
|
- startAngle -- The start angle in radians
|
|
|
- endAngle -- The end angle in radians
|
|
|
- clockwise -- Sweep the arc clockwise. Defaults to false
|
|
|
+ Adds to the from the points. Points are added to the [page:CurvePath.curves curves]
|
|
|
+ array as [page:LineCurve LineCurves].
|
|
|
</div>
|
|
|
- <div>Draw an arc absolutely positioned</div>
|
|
|
|
|
|
<h3>[method:null ellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise], [page:Float rotation] )</h3>
|
|
|
<div>
|
|
|
- x, y -- The center of the ellipse offset from the last call
|
|
|
- xRadius -- The radius of the ellipse in the x axis
|
|
|
- yRadius -- The radius of the ellipse in the y axis
|
|
|
- startAngle -- The start angle in radians
|
|
|
- endAngle -- The end angle in radians
|
|
|
- clockwise -- Sweep the ellipse clockwise. Defaults to false
|
|
|
- rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0
|
|
|
+ x, y -- The center of the ellipse offset from the last call.<br />
|
|
|
+ xRadius -- The radius of the ellipse in the x axis.<br />
|
|
|
+ yRadius -- The radius of the ellipse in the y axis.<br />
|
|
|
+ startAngle -- The start angle in radians.<br />
|
|
|
+ endAngle -- The end angle in radians.<br />
|
|
|
+ clockwise -- Sweep the ellipse clockwise. Defaults to *false*.<br />
|
|
|
+ rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to *0*.<br /><br />
|
|
|
+
|
|
|
+ Adds an [page:EllipseCurve EllipseCurve] to the path, positioned relative to [page:.currentPoint].
|
|
|
</div>
|
|
|
- <div>Draw an ellipse offset from the last call</div>
|
|
|
|
|
|
- <h3>[method:null absellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise], [page:Float rotation] )</h3>
|
|
|
- <div>
|
|
|
- x, y -- The absolute center of the ellipse
|
|
|
- xRadius -- The radius of the ellipse in the x axis
|
|
|
- yRadius -- The radius of the ellipse in the y axis
|
|
|
- startAngle -- The start angle in radians
|
|
|
- endAngle -- The end angle in radians
|
|
|
- clockwise -- Sweep the ellipse clockwise. Defaults to false
|
|
|
- rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0
|
|
|
- </div>
|
|
|
- <div>Draw an ellipse absolutely positioned</div>
|
|
|
+ <h3>[method:null lineTo]( [page:Float x], [page:Float y] )</h3>
|
|
|
+ <div>Connects a [page:LineCurve] from [page:.currentPoint] to x, y onto the path.</div>
|
|
|
|
|
|
- <h3>[method:Array toShapes]( [page:Boolean isCCW], [page:Boolean noHoles] )</h3>
|
|
|
- <div>
|
|
|
- isCCW -- Changes how solids and holes are generated<br/>
|
|
|
- noHoles -- Whether or not to generate holes
|
|
|
- </div>
|
|
|
+
|
|
|
+ <h3>[method:null moveTo]( [page:Float x], [page:Float y] )</h3>
|
|
|
+ <div>Move the [page:.currentPoint] to x, y.</div>
|
|
|
+
|
|
|
+
|
|
|
+ <h3>[method:null quadraticCurveTo]( [page:Float cpX], [page:Float cpY], [page:Float x], [page:Float y] )</h3>
|
|
|
+ <div>Creates a quadratic curve from [page:.currentPoint] with cpX and cpY as control point and updates [page:.currentPoint] to x and y.</div>
|
|
|
+
|
|
|
+ <h3>[method:null splineThru] ( [page:Array points] ) </h3>
|
|
|
<div>
|
|
|
- Converts the Path into an array of Shapes. By default solid shapes are defined clockwise (CW) and holes are defined counterclockwise (CCW). If isCCW is set to true,
|
|
|
- then those are flipped. If the paramater noHoles is set to true then all paths are set as solid shapes and isCCW is ignored.
|
|
|
- <br/>
|
|
|
+ points - An array of [page:Vector2 Vector2s]<br /><br />
|
|
|
|
|
|
+ Connects a new [page:SplineCurve] onto the path.
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
<h2>Source</h2>
|
|
|
|
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|