# <vgl-spot-light-helper>
A basic object representation.
# Example Usage
<template>
<div>
<vgl-renderer antialias>
<template #scene>
<vgl-scene>
<vgl-spot-light-helper>
<template #light>
<vgl-spot-light
:position-x="px"
:position-y="py"
:position-z="pz"
:color="color"
:distance="distance"
:angle="angle"
>
<template #target>
<vgl-object3d
:position-x="tx"
:position-y="ty"
:position-z="tz"
/>
</template>
</vgl-spot-light>
</template>
</vgl-spot-light-helper>
</vgl-scene>
</template>
<template #camera>
<vgl-perspective-camera
position="spherical"
:position-radius="100"
:position-phi="1.8"
:position-theta="0.5"
rotation="lookAt"
/>
</template>
</vgl-renderer>
<aside class="control-panel">
<section>
<h3>Light 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>Light position</h3>
<label>x<input
v-model.number="px"
type="range"
min="-100"
></label>
<label>y<input
v-model.number="py"
type="range"
min="-100"
></label>
<label>z<input
v-model.number="pz"
type="range"
min="-100"
></label>
</section>
<section>
<h3>Light target</h3>
<label>x<input
v-model.number="tx"
type="range"
min="-100"
></label>
<label>y<input
v-model.number="ty"
type="range"
min="-100"
></label>
<label>z<input
v-model.number="tz"
type="range"
min="-100"
></label>
</section>
<section>
<h3>Light properties</h3>
<label>Distance<input
v-model.number="distance"
type="range"
></label>
<label>Angle<input
v-model.number="angle"
type="range"
step="0.01"
max="1.57"
></label>
</section>
</aside>
</div>
</template>
<script>
import * as components from 'vue-gl';
export default {
components,
data: () => ({
r: '255',
g: '255',
b: '255',
px: 30,
py: 30,
pz: 0,
tx: -30,
ty: -30,
tz: 0,
distance: 50,
angle: 0.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
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
# 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
If this is not the set the helper will take the color of the light.
# Slots
default
Objects defined in the slot will be handled as decsendants.