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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
<!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:Object3D] → [page:Light] →
<h1>[name]</h1>
<p class="desc">
This light gets emitted from a single point in one direction, along a cone that increases in size
the further from the light it gets. <br /><br />
This light can cast shadows - see the [page:SpotLightShadow] page for details.
</p>
<h2>Example</h2>
<iframe src='../examples/webgl_lights_spotlight.html'></iframe>
<p>
[example:webgl_lights_spotlight View in Examples ]
</p>
<h2>Other Examples</h2>
<p>
[example:webgl_interactive_cubes_gpu interactive / cubes / gpu ]<br />
[example:webgl_interactive_draggablecubes interactive / draggablecubes ]<br />
[example:webgl_materials_bumpmap_skin materials / bumpmap / skin ]<br />
[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]<br />
[example:webgl_loader_md2 loader / md2 ]<br />
[example:webgl_shading_physical shading / physical ]<br />
[example:webgl_materials_bumpmap materials / bumpmap]<br/>
[example:webgl_shading_physical shading / physical]<br/>
[example:webgl_shadowmap shadowmap]<br/>
[example:webgl_shadowmap_performance shadowmap / performance]<br/>
[example:webgl_shadowmap_viewer shadowmap / viewer]
</p>
<h2>Code Example</h2>
<code>
// white spotlight shining from the side, casting a shadow
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;
scene.add( spotLight );
</code>
<h2>Constructor</h2>
<h3>[name]( [param:Integer color], [param:Float intensity], [param:Float distance], [param:Radians angle], [param:Float penumbra], [param:Float decay] )</h3>
<p>
[page:Integer color] - (optional) hexadecimal color of the light. Default is 0xffffff (white).<br />
[page:Float intensity] - (optional) numeric value of the light's strength/intensity. Default is 1.<br /><br />
[page:Float distance] - Maximum range of the light. Default is 0 (no limit).<br />
[page:Radians angle] - Maximum angle of light dispersion from its direction whose upper
bound is Math.PI/2.<br />
[page:Float penumbra] - Percent of the spotlight cone that is attenuated due to penumbra.
Takes values between zero and 1. Default is zero.<br />
[page:Float decay] - The amount the light dims along the distance of the light.<br /><br />
Creates a new [name].
</p>
<h2>Properties</h2>
See the base [page:Light Light] class for common properties.
<h3>[property:Float angle]</h3>
<p>
Maximum extent of the spotlight, in radians, from its direction. Should be no more than
*Math.PI/2*. The default is *Math.PI/3*.
</p>
<h3>[property:Boolean castShadow]</h3>
<p>
If set to *true* light will cast dynamic shadows. *Warning*: This is expensive and
requires tweaking to get shadows looking right. See the [page:SpotLightShadow] for details.
The default is *false*.
</p>
<h3>[property:Float decay]</h3>
<p>
The amount the light dims along the distance of the light.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, decay = 2 leads to
physically realistic light falloff. The default is *1*.
</p>
<h3>[property:Float distance]</h3>
<p>
<em>Default mode</em> — When distance is zero, light does not attenuate. When distance is
non-zero, light will attenuate linearly from maximum intensity at the light's position down to
zero at this distance from the light.
</p>
<p>
<em>[page:WebGLRenderer.physicallyCorrectLights Physically correct] mode</em> — When distance
is zero, light will attenuate according to inverse-square law to infinite distance. When
distance is non-zero, light will attenuate according to inverse-square law until near the
distance cutoff, where it will then attenuate quickly and smoothly to 0. Inherently, cutoffs
are not physically correct.
</p>
<p>
Default is *0.0*.
</p>
<h3>[property:Boolean isSpotLight]</h3>
<p>
Used to check whether this or derived classes are spot lights. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</p>
<h3>[property:Float penumbra]</h3>
<p>
Percent of the spotlight cone that is attenuated due to penumbra. Takes values between
zero and 1. The default is *0.0*.
</p>
<h3>[property:Vector3 position]</h3>
<p>
This is set equal to [page:Object3D.DefaultUp] (0, 1, 0), so that the light shines from the top down.
</p>
<h3>[property:Float power]</h3>
<p>
The light's power.<br />
In [page:WebGLRenderer.physicallyCorrectLights physically correct] mode, the luminous
power of the light measured in lumens. Default is *4Math.PI*. <br /><br />
This is directly related to the [page:.intensity intensity] in the ratio
<code>
power = intensity * π
</code>
and changing this will also change the intensity.
</p>
<h3>[property:SpotLightShadow shadow]</h3>
<p>
A [page:SpotLightShadow] used to calculate shadows for this light.
</p>
<h3>[property:Object3D target]</h3>
<p>
The Spotlight points from its [page:.position position] to target.position. The default
position of the target is *(0, 0, 0)*.<br />
*Note*: For the target's position to be changed to anything other than the default,
it must be added to the [page:Scene scene] using
<code>
scene.add( light.target );
</code>
This is so that the target's [page:Object3D.matrixWorld matrixWorld] gets automatically
updated each frame.<br /><br />
It is also possible to set the target to be another object in the scene (anything with a
[page:Object3D.position position] property), like so:
<code>
var targetObject = new THREE.Object3D();
scene.add(targetObject);
light.target = targetObject;
</code>
The spotlight will now track the target object.
</p>
<h2>Methods</h2>
See the base [page:Light Light] class for common methods.
<h3>[method:SpotLight copy]( [param:SpotLight source] )</h3>
<p>
Copies value of all the properties from the [page:SpotLight source] to this
SpotLight.
</p>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
|
