/
SpotLight.html
196 lines (157 loc) · 6.18 KB
/
SpotLight.html
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
<!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>
<div class="desc">A point light that can cast shadow in one direction.</div>
<div class="desc">Affects objects using [page:MeshLambertMaterial] or [page:MeshPhongMaterial].</div>
<h2>Example</h2>
<div>[example:webgl_interactive_cubes_gpu interactive / cubes / gpu ]</div>
<div>[example:webgl_interactive_draggablecubes interactive / draggablecubes ]</div>
<div>[example:webgl_materials_bumpmap_skin materials / bumpmap / skin ]</div>
<div>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</div>
<div>[example:webgl_morphtargets_md2 morphtargets / md2 ]</div>
<div>[example:webgl_shading_physical shading / physical ]</div>
<code>
// white spotlight shining from the side, casting shadow
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );
spotLight.castShadow = true;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.shadowCameraNear = 500;
spotLight.shadowCameraFar = 4000;
spotLight.shadowCameraFov = 30;
scene.add( spotLight );
</code>
<div>
[example:webgl_materials_bumpmap materials / bumpmap]<br/>
[example:webgl_shading_physical shading / physical]<br/>
[example:webgl_shadowmap shadowmap]<br/>
[example:webgl_shadowmap_viewer shadowmap / performance]<br/>
[example:webgl_shadowmap_viewer shadowmap / viewer]
</div>
<h2>Constructor</h2>
<h3>[name]([page:Integer hex], [page:Float intensity], [page:Float distance], [page:Radians angle], [page:Float exponent], [page:Float decay])</h3>
<div>
[page:Integer hex] — Numeric value of the RGB component of the color. <br />
[page:Float intensity] — Numeric value of the light's strength/intensity. <br />
[page:Float distance] -- Maximum distance from origin where light will shine whose intensity is attenuated linearly based on distance from origin. <br />
[page:Radians angle] -- Maximum angle of light dispersion from its direction whose upper bound is Math.PI/2.<br />
[page:Float exponent] -- Rapidity of the falloff of light from its target direction.<br />
[page:Float decay] -- The amount the light dims along the distance of the light.
</div>
<h2>Properties</h2>
<h3>[property:Object3D target]</h3>
<div>
Spotlight focus points at target.position.<br />
Default position — *(0,0,0)*.
</div>
<h3>[property:Float intensity]</h3>
<div>
Light's intensity.<br />
Default — *1.0*.
</div>
<h3>[property:Float distance]</h3>
<div>
If non-zero, light will attenuate linearly from maximum intensity at light *position* down to zero at *distance*.<br />
Default — *0.0*.
</div>
<h3>[property:Float angle]</h3>
<div>
Maximum extent of the spotlight, in radians, from its direction. Should be no more than *Math.PI/2*.<br />
Default — *Math.PI/3*.
</div>
<h3>[property:Float exponent]</h3>
<div>
Rapidity of the falloff of light from its target direction. A lower value spreads out the light, while a higher
focuses it towards the center.<br />
Default — *10.0*.
</div>
<h3>[property:Float decay]</h3>
<div>
The amount the light dims along the distance of the light<br />
Default — *1*.
</div>
<h3>[property:Boolean castShadow]</h3>
<div>
If set to *true* light will cast dynamic shadows. *Warning*: This is expensive and requires tweaking to get shadows looking right.<br />
Default — *false*.
</div>
<h3>[property:Boolean onlyShadow]</h3>
<div>
If set to *true* light will only cast shadow but not contribute any lighting (as if *intensity* was 0 but cheaper to compute).<br />
Default — *false*.
</div>
<h3>[property:Float shadowCameraNear]</h3>
<div>
Perspective shadow camera frustum <em>near</em> parameter.<br />
Default — *50*.
</div>
<h3>[property:Float shadowCameraFar]</h3>
<div>
Perspective shadow camera frustum <em>far</em> parameter.<br />
Default — *5000*.
</div>
<h3>[property:Float shadowCameraFov]</h3>
<div>
Perspective shadow camera frustum <em>field of view</em> parameter.<br />
Default — *50*.
</div>
<h3>[property:Boolean shadowCameraVisible]</h3>
<div>
Show debug shadow camera frustum.<br />
Default — *false*.
</div>
<h3>[property:Float shadowBias]</h3>
<div>
Shadow map bias, how much to add or subtract from the normalized depth when deciding whether a surface is in shadow.<br />
Default — *0*.
</div>
<h3>[property:Integer shadowMapWidth]</h3>
<div>
Shadow map texture width in pixels.<br />
Default — *512*.
</div>
<h3>[property:Integer shadowMapHeight]</h3>
<div>
Shadow map texture height in pixels.<br />
Default — *512*.
</div>
<h3>[property:Vector2 shadowMapSize]</h3>
<div>
The shadowMapWidth and shadowMapHeight stored in a [page:Vector2 THREE.Vector2]. Set internally during rendering.
</div>
<h3>[property:PerspectiveCamera shadowCamera]</h3>
<div>
The shadow's view of the world. Computed internally during rendering from the shadowCamera* settings.
</div>
<h3>[property:Matrix4 shadowMatrix]</h3>
<div>
Model to shadow camera space, to compute location and depth in shadow map. Computed internally during rendering.
</div>
<h3>[property:WebGLRenderTarget shadowMap]</h3>
<div>
The depth map generated using the shadowCamera; a location beyond a pixel's depth is in shadow. Computed internally during rendering.
</div>
<h2>Methods</h2>
<h3>[method:SpotLight clone]()</h3>
<div>
<br />
It returns a clone of SpotLight.
</div>
<h3>[method:JSON toJSON]()</h3>
<div>
Return SpotLight data in JSON format.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>