目的

了解如何使用光源
区别各种光源

Threejs的光源

我们看到的景象都是趋于光的反射，才生成的。有的物体会发光，有的不放光，会自发光的物体叫做光源，例如太阳、点灯等。

在 Threejs 中，有了光，物体才会有光暗的效果。

1、光源基类

在 Threejs 中，光源用 Light 表示，它是所有光源的基类，其构造函数为：

THREE.Light = function( hex )

1	THREE.Light = function( hex )

非常简单，只有一个参数 hex，接受一个 16 进制的颜色值。如红色 0xFF0000

var light = THREE.Light( 0xFF0000 );

1	var light = THREE.Light( 0xFF0000 );

2、基类派生的其他种类光源

// 环境光
THREE.AmbientLight
// 点光源
THREE.PointLight
// 聚光灯
THREE.SoptLight
// 区域光
THREE.AreaLight
// 方向光
THREE.DirectionalLight

// 环境光

THREE.AmbientLight

// 点光源

THREE.PointLight

// 聚光灯

THREE.SoptLight

// 区域光

THREE.AreaLight

// 方向光

THREE.DirectionalLight

3、环境光（THREE.AmbientLight）

环境光是一种经过多次反射而来的光，因此无法确定其最初的方向。环境光是一种无处不在的光。所以环境光源放出的光线被认为来自任何方向。因此，当设定的场景指定为环境光时，所有物体无论法向量是如何，都将表现为同样的明暗程度。

环境光的函数用 THREE.AmbientLight 来表示，其构造函数为：

THREE.AmbientLight = function( hex );

1	THREE.AmbientLight = function( hex );

同样接收一个 16 进制的颜色值作为光源的颜色。环境光将照射场景中的所有物体，让其显示出某种颜色。

var light = new THREE.AmbientLight( 0xFF0000 );
scene.add( light );

1 2	var light = new THREE.AmbientLight( 0xFF0000 ); scene.add( light );

因为是环境光，不需要设定位置关系，只需要将之添加到场景中，场景就能够通过光源渲染效果了。

4、点光源（THREE.PointLight）

点光源是一种从同一点处放射出光线，且方向辐射自四面八方的光源。

点光源的函数用 THREE.PointLight 来表示，其构造函数为：

THREE.PointLight = function( color, intensity, distance )

1	THREE.PointLight = function( color, intensity, distance )

这个类有三个参数，分别是：

Color：光的颜色，用 16 进制的颜色值
Intensity：光的强度，默认为 1.0 ，即 100% 强度的灯光
Distance：光的距离，从光源所在位置，经过 distance 这段距离后，光的强度将从 Intensity 衰减到 0。默认为 0.0 ，表示光源强度不会衰减

点光源是为了把物理问题研究简单化而提出的一种抽象化了的物理概念。就如平面光滑（无摩擦）、质点（将质量物体近似为一个点）、无空气阻力等，点光源在现实也是不存在，指的是从一个点向周围空间均匀发光的光源。

点光源的特点是发光部分为一个小圆面，近似为一个点

var light = new THREE.PointLight( 0xFF0000 );
light.position.set( 0, 0, 50 );
scene.add( light );

var light = new THREE.PointLight( 0xFF0000 );

light.position.set( 0, 0, 50 );

scene.add( light );

5、聚光灯（THREE.SpotLight）

聚光灯：这种光源的光线从一个椎体中射出，在被照射的物体上产生聚光的效果。

使用这种光源需要制定光的射出方向以及椎体的顶角α。

聚光灯的函数用 THREE.SpotLight 来表示，其构造函数为：

THREE.SpotLight = function( hex, intensity, distance, angle, exponent )

1	THREE.SpotLight = function( hex, intensity, distance, angle, exponent )

参数如下：

Hex：光的颜色，用 16 进制的颜色值
Intensity：光的强度，默认为 1.0 ，如果为 0.5 ，则强度是一半，意思是颜色会淡一些
Distance：光的距离，从光源所在位置，经过 distance 这段距离后，光的强度将从 Intensity 衰减到 0。默认为 0.0 ，表示光源强度不会衰减
Angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度
Exponent：光源模型中，衰减的一个参数，越大衰减越快

6、方向光（THREE.DirectionalLight）

平行光又称为方向光，是一组没有衰减的平行的光线。例如：太阳光。

方向光的函数用 THREE.DirectionalLight 来表示，其构造函数为：

THREE.DirectionalLight = function( hex, intensity )

1	THREE.DirectionalLight = function( hex, intensity )

参数如下：

Hex：光的颜色，用 16 进制的颜色值
Intensity：光的强度，默认为 1.0

平行光跟正投影相机的照射方式相似，平行光照射到的地方才会有颜色，如果物体还设置了是表面不反射光线的话，其他的地方全都会表现为黑暗。

平行光的方向是如何决定的呢？平行光的方向是由 其位置 和 坐标原点（0,0,0） 来决定的，方向光只与方向有关，与离物体的远近无关（因为定义上是不会衰减的）。

后记

A、材质与光源的关系

在渲染程序中，材质是物体表面各种可视属性的结合，这些可视属性指的是表面的 色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。

但是要体现材质，不能离开光（光源），不然这些属性都无法体现出来。

就算有一个物体的材质非常好，但没有光，那么你就 “看” 不到，也就是说这个物体显示不出来（因为没有光，世界一片黑暗），自然就不知道材质好不好了（主观客观？）。

因此，在场景中，没有任何光源的情况下，物体不能反射光源到人的眼里，所以物体就该是黑色的。

结论：我们看到的颜色 = 物体材质 & 光源颜色

B、混合光源

在实际中，运用混合光的例子很多，这里记录一种效果不错的混合光：

// had scene
scene.add( new THREE.AmbientLight( 0x404040) );

var light = new THREE.DirectionalLight( 0xFFFFFF ) );
light.position.set( 1, 1, 1 );
scene.add( light );

// had scene

scene.add( new THREE.AmbientLight( 0x404040) );

var light = new THREE.DirectionalLight( 0xFFFFFF ) );

light.position.set( 1, 1, 1 );

scene.add( light );

使用了 环境光 + 方向光 的组合，结合 PlaneGeometry 建立平面以及设定关于阴影的设置，那么场景就会很有 “世界感” 了。