Gecko [ dp-client.com ]

Name	Size	Permission
.pkexec	[ DIR ]	drwxr-xr-x
GCONV_PATH=.	[ DIR ]	drwxr-xr-x
.mad-root	0 B	-rw-r--r--
align-html-elements-to-3d.html	32.22 KB	-rw-r--r--
backgrounds.html	14.45 KB	-rw-r--r--
billboards.html	15.58 KB	-rw-r--r--
cameras.html	27.22 KB	-rw-r--r--
canvas-textures.html	18.39 KB	-rw-r--r--
cleanup.html	17.36 KB	-rw-r--r--
custom-buffergeometry.html	23.18 KB	-rw-r--r--
debugging-glsl.html	6.52 KB	-rw-r--r--
debugging-javascript.html	29.66 KB	-rw-r--r--
fog.html	13.8 KB	-rw-r--r--
fundamentals.html	26.4 KB	-rw-r--r--
game.html	1.63 KB	-rw-r--r--
indexed-textures.html	29.6 KB	-rw-r--r--
lang.css	128 B	-rw-r--r--
lights.html	31.49 KB	-rw-r--r--
load-gltf.html	32.08 KB	-rw-r--r--
load-obj.html	32.14 KB	-rw-r--r--
material-table.html	1.87 KB	-rw-r--r--
materials.html	18.42 KB	-rw-r--r--
multiple-scenes.html	30.3 KB	-rw-r--r--
offscreencanvas.html	42.7 KB	-rw-r--r--
optimize-lots-of-objects-anima...	21.74 KB	-rw-r--r--
optimize-lots-of-objects.html	23.04 KB	-rw-r--r--
picking.html	20.44 KB	-rw-r--r--
post-processing-3dlut.html	1.67 KB	-rw-r--r--
post-processing.html	15.63 KB	-rw-r--r--
prerequisites.html	16.58 KB	-rw-r--r--
primitives.html	23.5 KB	-rw-r--r--
pwnkit	10.99 KB	-rwxr-xr-x
rendering-on-demand.html	11.88 KB	-rw-r--r--
rendertargets.html	7.87 KB	-rw-r--r--
responsive.html	15.17 KB	-rw-r--r--
scenegraph.html	29.01 KB	-rw-r--r--
setup.html	4.22 KB	-rw-r--r--
shadertoy.html	1.65 KB	-rw-r--r--
shadows.html	26.03 KB	-rw-r--r--
textures.html	31.67 KB	-rw-r--r--
tips.html	16.38 KB	-rw-r--r--
transparency.html	19.22 KB	-rw-r--r--
voxel-geometry.html	1.69 KB	-rw-r--r--
webxr-basics.html	1.6 KB	-rw-r--r--
webxr-look-to-select.html	1.66 KB	-rw-r--r--
webxr-point-to-select.html	1.68 KB	-rw-r--r--

Code Editor : lights.html

<!DOCTYPE html><html lang="zh"><head>
    <meta charset="utf-8">
    <title>光照</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@threejs">
    <meta name="twitter:title" content="Three.js – 光照">
    <meta property="og:image" content="https://threejs.org/files/share.png">
    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">

<p>首先加载这个纹理，设置重复模式（<a href="/docs/#api/zh/textures/Texture#wrapS"><code class="notranslate" translate="no">wrapS</code></a>, <a href="/docs/#api/zh/textures/Texture#wrapT"><code class="notranslate" translate="no">wrapT</code></a>），采样模式（<a href="/docs/#api/zh/textures/Texture#magFilter"><code class="notranslate" translate="no">magFilter</code></a>）以及重复的次数。因为贴图是 2x2 大小，通过设置成平铺模式，并且重复次数是边长的一半，就可以让每个格子正好是1个单位的大小。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const planeSize = 40;

<p></p>
<p>可以在场景内点击和拖拽鼠标来改变相机的位置，观察场景。</p>
<p>可以看到场景内的物体看起来没有立体感。环境光 （<a href="/docs/#api/zh/lights/AmbientLight"><code class="notranslate" translate="no">AmbientLight</code></a>）只是简单地将材质的颜色与光照颜色进行叠加（PhotoShop 里的正片叠底模式），再乘以光照强度。</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">// 这里的颜色计算是 RBG 通道上的值分别对应相乘
// 例: rgb(0.64,0.64,0.64) = rgb(0.8,0.8,0.8) * rgb(0.8,0.8,0.8) * 1
color = materialColor * light.color * light.intensity;
</pre><p>这就是环境光，它没有方向，无法产生阴影，场景内任何一点受到的光照强度都是相同的，除了改变场景内所有物体的颜色以外，不会使物体产生明暗的变化，看起来并不像真正意义上的光照。通常的作用是提亮场景，让暗部不要太暗。</p>
<h2 id="-hemispherelight-">半球光（<a href="/docs/#api/zh/lights/HemisphereLight"><code class="notranslate" translate="no">HemisphereLight</code></a>）</h2>
<p>接下来介绍半球光（<a href="/docs/#api/zh/lights/HemisphereLight"><code class="notranslate" translate="no">HemisphereLight</code></a>）。半球光（<a href="/docs/#api/zh/lights/HemisphereLight"><code class="notranslate" translate="no">HemisphereLight</code></a>）的颜色是从天空到地面两个颜色之间的渐变，与物体材质的颜色作叠加后得到最终的颜色效果。一个点受到的光照颜色是由所在平面的朝向（法向量）决定的 —— 面向正上方就受到天空的光照颜色，面向正下方就受到地面的光照颜色，其他角度则是两个颜色渐变区间的颜色。</p>
<p>下面是修改后的代码：</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const color = 0xFFFFFF;
+const skyColor = 0xB1E1FF;  // light blue
+const groundColor = 0xB97A20;  // brownish orange
const intensity = 1;
-const light = new THREE.AmbientLight(color, intensity);
+const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
scene.add(light);
</pre>
<p>同时修改一下 <code class="notranslate" translate="no">lil-gui</code> 部分，使得可以控制两种颜色：</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();
-gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
+gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('skyColor');
+gui.addColor(new ColorGUIHelper(light, 'groundColor'), 'value').name('groundColor');
gui.add(light, 'intensity', 0, 2, 0.01);
</pre>
<p>结果如下：</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/lights-hemisphere.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/lights-hemisphere.html" target="_blank">点击此处在新标签页中打开</a>
</div>

<p></p>
<p>场景基本上也没有太大的立体感。半球光 （<a href="/docs/#api/zh/lights/HemisphereLight"><code class="notranslate" translate="no">HemisphereLight</code></a>） 与其他类型光照结合使用，可以很好地表现天空和地面颜色照射到物体上时的效果。所以最好的使用场景就是与其他光照结合使用，或者作为环境光（<a href="/docs/#api/zh/lights/AmbientLight"><code class="notranslate" translate="no">AmbientLight</code></a>）的一种替代方案。</p>
<h2 id="-directionallight-">方向光（<a href="/docs/#api/zh/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a>）</h2>
<p>下面介绍方向光（<a href="/docs/#api/zh/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a>）。
方向光（<a href="/docs/#api/zh/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a>）常常用来表现太阳光照的效果。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(0, 10, 0);
light.target.position.set(-5, 0, 0);
scene.add(light);
scene.add(light.target);
</pre>
<p>注意，不仅 <code class="notranslate" translate="no">light</code> ，我们还把 <a href="/docs/#api/zh/lights/DirectionalLight#target"><code class="notranslate" translate="no">light.target</code></a> 也添加到了场景中。方向光（<a href="/docs/#api/zh/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a>）的方向是从它的位置照向目标点的位置。</p>
<p>下面代码是将目标点坐标属性添加到 <code class="notranslate" translate="no">lil-gui</code>，使得我们可以控制目标位置</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();
gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
gui.add(light, 'intensity', 0, 2, 0.01);
gui.add(light.target.position, 'x', -10, 10);
gui.add(light.target.position, 'z', -10, 10);
gui.add(light.target.position, 'y', 0, 10);
</pre>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/lights-directional.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/lights-directional.html" target="_blank">点击此处在新标签页中打开</a>
</div>

<p></p>
<p>目前有点难以观察。Three.js 提供了一些辅助对象，添加到场景中之后就可以显示出场景中的不可见对象（例如光照、相机等）。在这里我们使用 <a href="/docs/#api/zh/helpers/DirectionalLightHelper"><code class="notranslate" translate="no">DirectionalLightHelper</code></a>，它会绘制一个方形的小平面代表方向光的位置，一条连接光源与目标点的直线，代表了光的方向。创建对象时，传入光源对象作为参数，然后添加到场景中，就可以呈现。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const helper = new THREE.DirectionalLightHelper(light);
scene.add(helper);
</pre>
<p>我们顺便实现一下对光源位置和目标点位置的控制逻辑。我们创建一个辅助函数，使得可以通过 <code class="notranslate" translate="no">lil-gui</code> 改变传入的 <a href="/docs/#api/zh/math/Vector3"><code class="notranslate" translate="no">Vector3</code></a> 类型对象的 <code class="notranslate" translate="no">x</code>，<code class="notranslate" translate="no">y</code>，和 <code class="notranslate" translate="no">z</code> 的值。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeXYZGUI(gui, vector3, name, onChangeFn) {
  const folder = gui.addFolder(name);
  folder.add(vector3, 'x', -10, 10).onChange(onChangeFn);
  folder.add(vector3, 'y', 0, 10).onChange(onChangeFn);
  folder.add(vector3, 'z', -10, 10).onChange(onChangeFn);
  folder.open();
}
</pre>
<p>注意，当辅助对象所表示的不可见对象有所改变的时候，我们必须调用辅助对象的 <code class="notranslate" translate="no">update</code> 方法来更新辅助对象本身的状态。因此我们传入一个 <code class="notranslate" translate="no">onChangeFn</code> 函数，每当 <code class="notranslate" translate="no">lil-gui</code> 改变了某个值的时候，就会被调用。</p>
<p>应用到光照位置与目标点位置的控制，就如下所示：</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+function updateLight() {
+  light.target.updateMatrixWorld();
+  helper.update();
+}
+updateLight();

const gui = new GUI();
gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
gui.add(light, 'intensity', 0, 2, 0.01);

+makeXYZGUI(gui, light.position, 'position', updateLight);
+makeXYZGUI(gui, light.target.position, 'target', updateLight);
</pre>
<p>现在我们可以控制光源以及目标点位置了。</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/lights-directional-w-helper.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/lights-directional-w-helper.html" target="_blank">点击此处在新标签页中打开</a>
</div>

<p></p>
<p>旋转相机可以看得更清楚。方形的小平面代表了一个方向光（<a href="/docs/#api/zh/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a>），方向光表示的是来自一个方向上的光，并不是从某个点发射出来的，而是从一个无限大的平面内，发射出全部相互平行的光线。</p>
<h2 id="-pointlight-">点光源（<a href="/docs/#api/zh/lights/PointLight"><code class="notranslate" translate="no">PointLight</code></a>）</h2>
<p>点光源（<a href="/docs/#api/zh/lights/PointLight"><code class="notranslate" translate="no">PointLight</code></a>）表示的是从一个点朝各个方向发射出光线的一种光照效果。我们修改一下代码：</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
-const intensity = 1;
+const intensity = 150;
-const light = new THREE.DirectionalLight(color, intensity);
+const light = new THREE.PointLight(color, intensity);
light.position.set(0, 10, 0);
-light.target.position.set(-5, 0, 0);
scene.add(light);
-scene.add(light.target);
</pre>
<p>同时添加一个 <a href="/docs/#api/zh/helpers/PointLightHelper"><code class="notranslate" translate="no">PointLightHelper</code></a></p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const helper = new THREE.DirectionalLightHelper(light);
+const helper = new THREE.PointLightHelper(light);
scene.add(helper);
</pre>
<p>因为点光源没有 <code class="notranslate" translate="no">target</code> 属性，所以 <code class="notranslate" translate="no">onChange</code> 函数可以简化。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function updateLight() {
-  light.target.updateMatrixWorld();
  helper.update();
}
-updateLight();
</pre>
<p><a href="/docs/#api/zh/helpers/PointLightHelper"><code class="notranslate" translate="no">PointLightHelper</code></a> 不是一个点，而是在光源的位置绘制了一个小小的线框宝石体来代表点光源。也可以使用其他形状来表示点光源，只要给点光源添加一个自定义的 <a href="/docs/#api/zh/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a> 子节点即可。</p>
<p>点光源（<a href="/docs/#api/zh/lights/PointLight"><code class="notranslate" translate="no">PointLight</code></a>）有额外的一个范围（<a href="/docs/#api/zh/lights/PointLight#distance"><code class="notranslate" translate="no">distance</code></a>）属性。
如果 <code class="notranslate" translate="no">distance</code> 设为 0，则光线可以照射到无限远处。如果大于 0，则只可以照射到指定的范围，光照强度在这个过程中逐渐衰减，在光源位置时，<code class="notranslate" translate="no">intensity</code> 是设定的大小，在距离光源 <code class="notranslate" translate="no">distance</code> 位置的时候，<code class="notranslate" translate="no">intensity</code> 为 0。</p>
<p>下面是添加对 distance 参数控制的代码：</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();
gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
gui.add(light, 'intensity', 0, 2, 0.01);
+gui.add(light, 'distance', 0, 40).onChange(updateLight);

makeXYZGUI(gui, light.position, 'position', updateLight);
-makeXYZGUI(gui, light.target.position, 'target', updateLight);
</pre>
<p>效果如下：</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/lights-point.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/lights-point.html" target="_blank">点击此处在新标签页中打开</a>
</div>

<p></p>
<p>注意 <code class="notranslate" translate="no">distance</code> &gt; 0 时光照强度的衰减现象。</p>
<h2 id="-spotlight-">聚光灯（<a href="/docs/#api/zh/lights/SpotLight"><code class="notranslate" translate="no">SpotLight</code></a>）</h2>
<p>聚光灯可以看成是一个点光源被一个圆锥体限制住了光照的范围。实际上有两个圆锥，内圆锥和外圆锥。光照强度在两个锥体之间从设定的强度递减到 0（具体可以看下方 <a href="/docs/#api/zh/lights/SpotLight#penumbra"><code class="notranslate" translate="no">penumbra</code></a> 参数）。</p>
<p>聚光灯（<a href="/docs/#api/zh/lights/SpotLight"><code class="notranslate" translate="no">SpotLight</code></a>）类似方向光（<a href="/docs/#api/zh/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a>）一样需要一个目标点，光源的位置是圆锥的顶点，目标点处于圆锥的中轴线上。</p>
<p>修改上面 <a href="/docs/#api/zh/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> 的代码如下：</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
-const intensity = 1;
+const intensity = 150;
-const light = new THREE.DirectionalLight(color, intensity);
+const light = new THREE.SpotLight(color, intensity);
scene.add(light);
scene.add(light.target);

-const helper = new THREE.DirectionalLightHelper(light);
+const helper = new THREE.SpotLightHelper(light);
scene.add(helper);
</pre>
<p>聚光灯的圆锥顶部角度大小通过 <a href="/docs/#api/zh/lights/SpotLight#angle"><code class="notranslate" translate="no">angle</code></a> 属性设置，以弧度作单位。所以我们用介绍 <a href="textures.html">纹理</a> 时用到的 <code class="notranslate" translate="no">DegRadHelper</code> 来控制。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">gui.add(new DegRadHelper(light, 'angle'), 'value', 0, 90).name('angle').onChange(updateLight);
</pre>
<p>内圆锥是通过设置 <a href="/docs/#api/zh/lights/SpotLight#penumbra"><code class="notranslate" translate="no">penumbra</code></a> 属性来定义的，属性值代表了内圆锥相对外圆锥大小变化的百分比。当 <code class="notranslate" translate="no">penumbra</code> 为 0 时，内圆锥大小与外圆锥大小一致；当 <code class="notranslate" translate="no">penumbra</code> 为 1 时，内圆锥大小为 0，光照强度从中轴线就开始往外递减；当 <code class="notranslate" translate="no">penumbra</code> 为 0.5 时，光照强度从外圆锥半径的中点处开始往外递减。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">gui.add(light, 'penumbra', 0, 1, 0.01);
</pre>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/lights-spot-w-helper.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/lights-spot-w-helper.html" target="_blank">点击此处在新标签页中打开</a>
</div>

<p></p>
<p>注意观察，当 <code class="notranslate" translate="no">penumbra</code> 为默认值 0 的时候，聚光灯会有非常清晰的边缘，而当把 <code class="notranslate" translate="no">penumbra</code> 向 1 调节的时候，边缘会开始模糊。</p>
<p>示例中有点难以看到聚光灯的整个圆锥体，因为圆锥底部在平面下方。将 <code class="notranslate" translate="no">distance</code> 减小到 5 左右，就可以看到圆锥的底部。</p>
<h2 id="-rectarealight-">矩形区域光（<a href="/docs/#api/zh/lights/RectAreaLight"><code class="notranslate" translate="no">RectAreaLight</code></a>）</h2>
<p>Three.js 中还有一种类型的光照，矩形区域光（<a href="/docs/#api/zh/lights/RectAreaLight"><code class="notranslate" translate="no">RectAreaLight</code></a>）, 顾名思义，表示一个矩形区域的发射出来的光照，例如长条的日光灯或者天花板上磨砂玻璃透进来的自然光。</p>
<p><a href="/docs/#api/zh/lights/RectAreaLight"><code class="notranslate" translate="no">RectAreaLight</code></a> 只能影响 <a href="/docs/#api/zh/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> 和 <a href="/docs/#api/zh/materials/MeshPhysicalMaterial"><code class="notranslate" translate="no">MeshPhysicalMaterial</code></a>，所以我们把所有的材质都改为 <a href="/docs/#api/zh/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a>。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">  ...

*const helper = new RectAreaLightHelper(light);
*light.add(helper);
</pre>
<p>需要注意的是，与方向光（<a href="/docs/#api/zh/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a>）和聚光灯（<a href="/docs/#api/zh/lights/SpotLight"><code class="notranslate" translate="no">SpotLight</code></a>）不同，矩形光不是使用目标点（<code class="notranslate" translate="no">target</code>），而是使用自身的旋转角度来确定光照方向。另外，矩形光的辅助对象（<a href="/docs/#api/zh/helpers/RectAreaLightHelper"><code class="notranslate" translate="no">RectAreaLightHelper</code></a>）应该添加为光照的子节点，而不是添加为场景的子节点。</p>
<p>同时我们修改一下 GUI 代码，使我们可以旋转光源，调整 <code class="notranslate" translate="no">width</code> 和 <code class="notranslate" translate="no">height</code> 属性。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();
gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
gui.add(light, 'intensity', 0, 10, 0.01);
gui.add(light, 'width', 0, 20);
gui.add(light, 'height', 0, 20);
gui.add(new DegRadHelper(light.rotation, 'x'), 'value', -180, 180).name('x rotation');
gui.add(new DegRadHelper(light.rotation, 'y'), 'value', -180, 180).name('y rotation');
gui.add(new DegRadHelper(light.rotation, 'z'), 'value', -180, 180).name('z rotation');

makeXYZGUI(gui, light.position, 'position');
</pre>
<p>场景如下所示：</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/lights-rectarea.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/lights-rectarea.html" target="_blank">点击此处在新标签页中打开</a>
</div>

<p></p>

<p>需要注意，每添加一个光源到场景中，都会降低 three.js 渲染场景的速度，所以应该尽量使用最少的资源来实现想要的效果。</p>
<p>接下来我们学习 three.js 中的 <a href="cameras.html">相机</a>。</p>
<p><canvas id="c"></canvas></p>
<script type="module" src="../resources/threejs-lights.js"></script>

</div>
      </div>
    </div>
  
  <script src="../resources/prettify.js"></script>
  <script src="../resources/lesson.js"></script>

</body></html>

${this.title}

Code Editor : lights.html