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
|
<!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">
聚光灯是从一个方向上的一个点发出，沿着一个圆锥体，它离光越远，它的尺寸就越大。 <br /><br />
该光源可以投射阴影 - 跳转至 [page:SpotLightShadow] 查看更多细节。
</p>
<h2>示例</h2>
<iframe src='../examples/webgl_lights_spotlight.html'></iframe>
<p>
[example:webgl_lights_spotlight View in Examples ]
</p>
<h2>其他例子</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>代码示例</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] - (可选参数) 十六进制光照颜色。 缺省值 0xffffff (白色)。<br />
[page:Float intensity] - (可选参数) 光照强度。 缺省值 1。<br /><br />
[page:Float distance] - 从光源发出光的最大距离，其强度根据光源的距离线性衰减。 <br />
[page:Radians angle] - 光线散射角度，最大为Math.PI/2。<br />
[page:Float penumbra] - 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。<br />
[page:Float decay] - 沿着光照距离的衰减量。<br /><br />
创建一个新的聚光灯。
</p>
<h2>属性（Properties）</h2>
公共属性请查看基类[page:Light Light]。
<h3>[property:Float angle]</h3>
<p>
从聚光灯的位置以弧度表示聚光灯的最大范围。应该不超过 *Math.PI/2*。默认值为 *Math.PI/3*。
</p>
<h3>[property:Boolean castShadow]</h3>
<p>
此属性设置为 *true* 聚光灯将投射阴影。警告: 这样做的代价比较高而且需要一直调整到阴影看起来正确。
查看 [page:SpotLightShadow] 了解详细信息。
默认值为 *false*
</p>
<h3>[property:Float decay]</h3>
<p>
沿着光照距离的衰减量<br />
在 [page:WebGLRenderer.physicallyCorrectLights physically correct] 模式下，decay 设置为等于2将实现现实世界的光衰减。<br/>
缺省值为 *1*。
</p>
<h3>[property:Float distance]</h3>
<p>
如果非零，那么光强度将会从最大值当前灯光位置处按照距离线性衰减到0。
缺省值为 *0.0*。
</p>
<h3>[property:Boolean isSpotLight]</h3>
<p>
用来校验这个类或者它的派生类是不是聚光灯光源。缺省值是 *true*。<br /><br />
不应该去改变这个变量,因为内部使用这个变量做了些优化的工作。
</p>
<h3>[property:Float penumbra]</h3>
<p>
聚光锥的半影衰减百分比。在0和1之间的值。
默认值 — 0.0。
</p>
<h3>[property:Vector3 position]</h3>
<p>
假如这个值设置等于 [page:Object3D.DefaultUp] (0, 1, 0)，那么光线将会从上往下照射。
</p>
<h3>[property:Float power]</h3>
<p>
光功率<br />
在 [page:WebGLRenderer.physicallyCorrectLights physically correct] 模式中，
表示以"流明（光通量单位）"为单位的光功率。 缺省值 - *4Math.PI*。 <br /><br />
该值与 [page:.intensity intensity] 直接关联
<code>
power = intensity * 4π
</code>
修改该值也会导致光强度的改变。
</p>
<h3>[property:SpotLightShadow shadow]</h3>
<p>
[page:SpotLightShadow]用与计算此光照的阴影。
</p>
<h3>[property:Object3D target]</h3>
<p>
平行光的方向是从它的位置到目标位置.默认的目标位置为原点 *(0,0,0)*。<br />
注意: 对于目标的位置，要将其更改为除缺省值之外的任何位置，它必须被添加到 [page:Scene scene]
场景中去。
<code>
scene.add( light.target );
</code>
这使得属性target中的 [page:Object3D.matrixWorld matrixWorld] 会每帧自动更新。<br /><br />
它也可以设置target为场景中的其他对象(任意拥有 [page:Object3D.position position] 属性的对象), 示例如下:
<code>
var targetObject = new THREE.Object3D();
scene.add(targetObject);
light.target = targetObject;
</code>
完成上述操作后，聚光灯现在就可以追踪到目标对像了。
</p>
<h2>方法（Methods）</h2>
公共方法请查看基类 [page:Light Light]。
<h3>[method:SpotLight copy]( [param:SpotLight source] )</h3>
<p>
将所有属性的值从源 [page:SpotLight source] 复制到此聚光灯光源对象。
</p>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
|
