forked from mrdoob/three.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathShape.html
More file actions
126 lines (98 loc) · 3.71 KB
/
Shape.html
File metadata and controls
126 lines (98 loc) · 3.71 KB
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
<!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:Path] →
<h1>[name]</h1>
<div class="desc">
Defines an arbitrary 2d shape plane using paths with optional holes. It can be used with [page:ExtrudeGeometry],
[page:ShapeGeometry], to get points, or to get triangulated faces.
</div>
<code>
var heartShape = new THREE.Shape();
heartShape.moveTo( 25, 25 );
heartShape.bezierCurveTo( 25, 25, 20, 0, 0, 0 );
heartShape.bezierCurveTo( 30, 0, 30, 35,30,35 );
heartShape.bezierCurveTo( 30, 55, 10, 77, 25, 95 );
heartShape.bezierCurveTo( 60, 77, 80, 55, 80, 35 );
heartShape.bezierCurveTo( 80, 35, 80, 0, 50, 0 );
heartShape.bezierCurveTo( 35, 0, 25, 25, 25, 25 );
var extrudeSettings = { amount: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
var geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
</code>
<h2>Examples</h2>
<div>
[example:webgl_geometry_shapes geometry / shapes ]<br/>
[example:webgl_geometry_extrude_shapes geometry / extrude / shapes ]<br/>
[example:webgl_geometry_extrude_shapes2 geometry / extrude / shapes2 ]<br/>
[example:webgl_particles_shapes particles / shapes ]
</div>
<h2>Constructor</h2>
<h3>[name]()</h3>
<h2>Properties</h2>
<h3>[property:array holes]</h3>
<div>
An array of [page:Path paths] that define the holes in the shape.
</div>
<h2>Methods</h2>
<h3>[method:ShapeGeometry makeGeometry]( [page:Object options] )</h3>
<div>
options -- This is passed as the second argument to [page:ShapeGeometry ShapeGeometry]
</div>
<div>
Convenience method to return ShapeGeometry
</div>
<h3>[method:Array extractAllPoints]( [page:Integer divisions] )</h3>
<div>
divisions -- The number of divisions to create on the shape
</div>
<div>
Get points of shape and holes (keypoints based on segments parameter)
</div>
<h3>[method:ExtrudeGeometry extrude]( [page:Object options] )</h3>
<div>
options -- This is passed as the second argument to [page:ExtrudeGeometry ExtrudeGeometry]
</div>
<div>
Convenience method to return ExtrudeGeometry
</div>
<h3>[method:Object extractPoints]( [page:Integer divisions] )</h3>
<div>
divisions -- The number of divisions to create on the shape
</div>
<div>
Returns an object with a *shape* and *holes* property that each reference an array of [page:Vector2 Vector2s].
</div>
<h3>[method:Object extractAllSpacedPoints]( [page:Integer divisions] )</h3>
<div>
divisions -- The number of divisions to create on the shape
</div>
<div>
Returns an object with a *shape* and *holes* property that each reference an array of [page:Vector2 Vector2s]. The
points will all be equally spaced along the shape.
</div>
<h3>[method:Array getPointsHoles]( [page:Integer divisions] )</h3>
<div>
divisions -- The number of divisions to create on the shape
</div>
<div>
Get an array of [page Vector2 Vector2s] that represent the holes in the shape.
</div>
<h3>[method:Array getSpacedPointsHoles]( [page:Integer divisions] )</h3>
<div>
divisions -- The number of divisions to create on the shape
</div>
<div>
Get an array of equally spaced [page Vector2 Vector2s] that represent the holes in the shape.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>