1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Curve] → [page:CurvePath] →
<h1>[name]</h1>
<p class="desc">
A 2D path representation. The class provides methods for creating paths and contours of 2D shapes similar to the 2D Canvas API.
</p>
<h2>Example</h2>
<code>
var path = new THREE.Path();
path.lineTo( 0, 0.8 );
path.quadraticCurveTo( 0, 1, 0.2, 1 );
path.lineTo( 1, 1 );
var points = path.getPoints();
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color: 0xffffff } );
var line = new THREE.Line( geometry, material );
scene.add( line );
</code>
<h2>Constructor</h2>
<h3>[name]( [param:Array points] )</h3>
<p>
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.
</p>
<h2>Properties</h2>
<p>See the base [page:CurvePath] class for common properties.</p>
<h3>[property:array currentPoint]</h3>
<p>The current offset of the path. Any new [page:Curve] added will start here.</p>
<h2>Methods</h2>
<p>See the base [page:CurvePath] class for common methods.</p>
<h3>[method:this absarc]( [param:Float x], [param:Float y], [param:Float radius], [param:Float startAngle], [param:Float endAngle], [param:Float clockwise] )</h3>
<p>
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.
</p>
<h3>[method:this absellipse]( [param:Float x], [param:Float y], [param:Float xRadius], [param:Float yRadius], [param:Float startAngle], [param:Float endAngle], [param:Float clockwise], [param:Float rotation] )</h3>
<p>
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.
</p>
<h3>[method:this arc]( [param:Float x], [param:Float y], [param:Float radius], [param:Float startAngle], [param:Float endAngle], [param:Float clockwise] )</h3>
<p>
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 />
Adds an [page:EllipseCurve EllipseCurve] to the path, positioned relative to [page:.currentPoint].
</p>
<h3>[method:this bezierCurveTo]( [param:Float cp1X], [param:Float cp1Y], [param:Float cp2X], [param:Float cp2Y], [param:Float x], [param:Float y] )</h3>
<p>This creates a bezier curve from [page:.currentPoint] with (cp1X, cp1Y) and (cp2X, cp2Y) as control points and updates [page:.currentPoint] to x and y.</p>
<h3>[method:this ellipse]( [param:Float x], [param:Float y], [param:Float xRadius], [param:Float yRadius], [param:Float startAngle], [param:Float endAngle], [param:Float clockwise], [param:Float rotation] )</h3>
<p>
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].
</p>
<h3>[method:this lineTo]( [param:Float x], [param:Float y] )</h3>
<p>Connects a [page:LineCurve] from [page:.currentPoint] to x, y onto the path.</p>
<h3>[method:this moveTo]( [param:Float x], [param:Float y] )</h3>
<p>Move the [page:.currentPoint] to x, y.</p>
<h3>[method:this quadraticCurveTo]( [param:Float cpX], [param:Float cpY], [param:Float x], [param:Float y] )</h3>
<p>Creates a quadratic curve from [page:.currentPoint] with cpX and cpY as control point and updates [page:.currentPoint] to x and y.</p>
<h3>[method:this setFromPoints]( [param:Array vector2s] )</h3>
<p>
points -- array of [page:Vector2 Vector2s].<br /><br />
Points are added to the [page:CurvePath.curves curves]
array as [page:LineCurve LineCurves].
</p>
<h3>[method:this splineThru] ( [param:Array points] ) </h3>
<p>
points - An array of [page:Vector2 Vector2s]<br /><br />
Connects a new [page:SplineCurve] onto the path.
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
|
