forked from mrdoob/three.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSpotLight.html
More file actions
142 lines (110 loc) · 5.02 KB
/
SpotLight.html
File metadata and controls
142 lines (110 loc) · 5.02 KB
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
<!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 a shadow in one direction within a falloff cone.</div>
<div class="desc">Affects objects using [page:MeshLambertMaterial] or [page:MeshPhongMaterial].</div>
<h2>Example</h2>
<iframe src='../examples/webgl_lights_spotlight.html'></iframe>
<a target="THREE_Examples" href="../examples/#webgl_lights_spotlight">View in Examples</a><br />
<h2>Other Examples</h2>
<div>[example:webgl_lights_spotlights lights / spotlights ]</div>
<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>
<h2>Code Example</h2>
<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.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>Extra Examples</h2>
<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 color], [page:Float intensity], [page:Float distance], [page:Radians angle], [page:Float penumbra], [page:Float decay] )</h3>
<div>
[page:Integer color] — 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 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.
</div>
<h2>Properties</h2>
See the base [page:Light Light] class for common properties.
<h3>[property:Object3D target]</h3>
<div>
Spotlight focus points at target.position.<br />
Default position — *(0,0,0)*.<br />
*Note*: Currently for target property to work properly, it must be part of the [page:Scene scene], e.g. this will help: <code>scene.add( light.target )</code>
</div>
<h3>[property:Float power]</h3>
<div>
Light's power.<br />
In "physically correct" mode, the luminous power of the light measured in lumens.<br/>
Default - *4PI*.
</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 penumbra]</h3>
<div>
Percent of the spotlight cone that is attenuated due to penumbra. Takes values between zero and 1.<br />
Default — *0.0*.
</div>
<h3>[property:Float decay]</h3>
<div>
The amount the light dims along the distance of the light<br />
In "physically correct" mode, decay = 2 leads to physically realistic light falloff.<br/>
Default — *1*.
</div>
<h3>[property:SpotLightShadow shadow]</h3>
<div>
This property stores all relevant information for rendering the shadow of the light.<br />
</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>
<h2>Methods</h2>
See the base [page:Light Light] class for common methods.
<h3>[method:SpotLight copy]( [page:SpotLight source] )</h3>
<div>
<br />
Copies value of *source* to this SpotLight object.
</div>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>