# <vgl-extrude-geometry>
A mesh, line, or point geometry representation.
# Example Usage
<template>
<div>
<vgl-renderer
ref="renderer"
antialias
>
<template #scene>
<vgl-scene>
<vgl-mesh>
<template #geometry>
<vgl-extrude-geometry
:depth="depth"
:curve-segments="curveSegments"
:steps="steps"
:bevel-enabled="bevelEnabled"
:bevel-thickness="bevelThickness"
:bevel-size="bevelSize"
:bevel-offset="bevelOffset"
:bevel-segments="bevelSegments"
>
<template #shapes>
<vgl-shape d="M0 0L10 10L-10 10L-20 -30L30 -40" />
</template>
</vgl-extrude-geometry>
</template>
<template #material>
<vgl-mesh-standard-material />
</template>
</vgl-mesh>
<vgl-ambient-light color="#ffeecc" />
<vgl-directional-light
:position-y="1"
:position-z="2"
/>
</vgl-scene>
</template>
<template #camera>
<vgl-perspective-camera
position="spherical"
:position-radius="200"
:position-phi="1"
:position-theta="0.5"
rotation="lookAt"
:look-at-y="-30"
:look-at-z="50"
/>
</template>
</vgl-renderer>
<aside>
<section>
<label>Extrude depth<input
v-model.number="depth"
type="range"
></label>
<label>Extrude curve segments<input
v-model.number="curveSegments"
type="range"
max="20"
></label>
<label>Extrude steps<input
v-model.number="steps"
type="range"
max="10"
></label>
<label>Bevel enabled<input
v-model="bevelEnabled"
type="checkbox"
></label>
<label>Bevel thickness<input
v-model.number="bevelThickness"
type="range"
step="0.1"
max="10"
></label>
<label>Bevel size<input
v-model.number="bevelSize"
type="range"
step="0.1"
max="10"
></label>
<label>Bevel offset<input
v-model.number="bevelOffset"
type="range"
step="0.1"
min="-10"
max="10"
></label>
<label>Bevel segments<input
v-model.number="bevelSegments"
type="range"
max="10"
></label>
</section>
</aside>
</div>
</template>
<script>
import * as components from 'vue-gl';
export default {
components,
data: () => ({
depth: 50,
curveSegments: 5,
steps: 5,
bevelEnabled: false,
bevelThickness: 2,
bevelSize: 2,
bevelOffset: 0,
bevelSegments: 5,
}),
};
</script>
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
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
# Props
name: string
An arbitrary name of the instance.
Defaults to [object Object]drawRangeStart: number
The start index of drawn part in the geometry.
Defaults to [object Object]drawRangeCount: number
The number of indices to be drawn.
Defaults to [object Object]groups: array
An array of objects those represent index groups to be rendered in separate draw calls.
Defaults to [object Object]curveSegments: number
The number of points on the curves.
Defaults to [object Object]steps: number
The number of segments along to the extruded spline depth.
Defaults to [object Object]depth: number
The depth of the extrusion.
Defaults to [object Object]bevelEnabled: boolean
Wether to enable beveling or not.bevelThickness: number
The bevel depth going into the shape.
Defaults to [object Object]bevelSize: number
The distance from the shape outline that the bevel extends.bevelOffset: number
The distance from the shape outline that the bevel starts.
Defaults to [object Object]bevelSegments: number
The number of bevel layers.
Defaults to [object Object]uvGenerator: object
An object that provides UV generator functions.
# Slots
Any
Each attribute in a named slot will be added to the geometry with the same name as the slot.