# <vgl-rect-area-light>
A basic object representation.
# Example Usage
<template>
<div>
<vgl-renderer
antialias
shadow-map-enabled
>
<template #scene>
<vgl-scene>
<vgl-mesh
:position-y="-1.5"
receive-shadow
>
<template #geometry>
<vgl-box-geometry />
</template>
<template #material>
<vgl-mesh-standard-material />
</template>
</vgl-mesh>
<vgl-mesh
cast-shadow
receive-shadow
>
<template #geometry>
<vgl-sphere-geometry />
</template>
<template #material>
<vgl-mesh-standard-material />
</template>
</vgl-mesh>
<vgl-ambient-light
color="#ffffff"
:intensity="0.1"
/>
<vgl-rect-area-light
:color="color"
:intensity="intensity"
:width="width"
:height="height"
:position-x="x"
:position-y="y"
:position-z="z"
:rotation-x="Math.PI"
>
<vgl-line-loop
:scale-x="width"
:scale-y="height"
>
<template #geometry>
<vgl-geometry>
<template #position>
<vgl-float32-attribute
:array="[-0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5]"
:item-size="2"
/>
</template>
</vgl-geometry>
</template>
<template #material>
<vgl-line-basic-material :color="color" />
</template>
</vgl-line-loop>
</vgl-rect-area-light>
</vgl-scene>
</template>
<template #camera>
<vgl-perspective-camera
position="spherical"
:position-radius="10"
:position-phi="1"
:position-theta="1"
rotation="lookAt"
/>
</template>
</vgl-renderer>
<aside class="control-panel">
<section>
<h3>Intensity</h3>
<input
v-model.number="intensity"
type="range"
max="1"
step="0.01"
>
</section>
<section>
<h3>Color</h3>
<label>R<input
v-model="r"
type="range"
max="255"
></label>
<label>G<input
v-model="g"
type="range"
max="255"
></label>
<label>B<input
v-model="b"
type="range"
max="255"
></label>
</section>
<section>
<h3>Position</h3>
<label>X<input
v-model.number="x"
type="range"
min="-10"
max="10"
step="0.1"
></label>
<label>Y<input
v-model.number="y"
type="range"
min="-10"
max="10"
step="0.1"
></label>
<label>Z<input
v-model.number="z"
type="range"
min="-10"
max="10"
step="0.1"
></label>
</section>
<section>
<h3>Width</h3>
<input
v-model.number="width"
type="range"
min="1"
max="100"
step="0.1"
>
</section>
<section>
<h3>Height</h3>
<input
v-model.number="height"
type="range"
min="1"
max="100"
step="0.1"
>
</section>
</aside>
</div>
</template>
<script>
import * as components from 'vue-gl';
export default {
components,
data: () => ({
intensity: 0.5,
r: '255',
b: '255',
g: '255',
width: 10,
height: 10,
x: 0,
y: 0,
z: -5,
}),
computed: {
color() { return `rgb(${this.r}, ${this.g}, ${this.b})`; },
},
};
</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
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
# Props
position: 'rectangular' | 'spherical'
The coodinate system to determine the object position.
Defaults to [object Object]positionX: number
The x coordinate of the object's local position.
Defaults to [object Object]positionY: number
The y coordinate of the object's local position.
Defaults to [object Object]positionZ: number
The z coordinate of the object's local position.
Defaults to [object Object]positionRadius: number
The Euclidian distance from the origin to the object's local position.
Defaults to [object Object]positionPhi: number
The polar angle from y axis to the object's local position.
Defaults to [object Object]positionTheta: number
The equator angle around y axis to the object's local position.
Defaults to [object Object]rotation: 'euler' | 'quaternion' | 'lookAt'
The rotation representing method.
Defaults to [object Object]rotationX: number
The x coordinate of the object's local rotation.
Defaults to [object Object]rotationY: number
The y coordinate of the object's local rotation.
Defaults to [object Object]rotationZ: number
The z coordinate of the object's local rotation.
Defaults to [object Object]rotationW: number
The w coordinate of the object's local rotation.
Defaults to [object Object]rotationOrder: string
The rotation order of the object's local rotation.
Defaults to [object Object]lookAtX: number
The global x coodinate of a point the object to face.
Defaults to [object Object]lookAtY: number
The global y coodinate of a point the object to face.
Defaults to [object Object]lookAtZ: number
The global z coodinate of a point the object to face.
Defaults to [object Object]scaleX: number
The x coordinate of the object's local scale.
Defaults to [object Object]scaleY: number
The y coordinate of the object's local scale.
Defaults to [object Object]scaleZ: number
The z coordinate of the object's local scale.
Defaults to [object Object]castShadow: boolean
Whether the object gets rendered into the shadow map.receiveShadow: boolean
Whether the material receives shadows.name: string
An arbitrary name of the instance.
Defaults to [object Object]hidden: boolean
The object visibility.color: string|number
The color of the light.
Defaults to [object Object]intensity: number
Numeric value of the light's strength/intensity.
Defaults to [object Object]width: number
The width of the lighting plane.
Defaults to [object Object]height: number
The height of the lighting plane.
Defaults to [object Object]
# Slots
default
Objects defined in the slot will be handled as decsendants.