深入理解three.js中光源

前言：

Three.js 是一个封装了 WebGL 接口的非常好的库，简化了 WebGL 很多细节，降低了学习成本，是当前前端开发者完成3D绘图的得力工具，那么今天我就给大家详细讲解下 Three.js 中各种光源的区别和引用场景。

为了更加直观的展示不同光源的特性，我特意做了一个 demo 通过动画来区别不同类型光源的特性，demo 中会展示点光源，环境光源，平行光源，半球光源，聚光灯光源五中光源的特性，为了能够直观体验光源移动过程中物体受光源的影响和光源位置，所以在光源的相同位置增加了一个白色的球体来指示光源的位置，demo中物体材质统一使用 MeshLambertMaterial 材质，demo 效果图如下：

预览地址：深入理解Three.js中光源

1、点光源 PointLight

点光源从一个点向各个方向发射，实际情况中可以理解为灯泡发出的光，可以将物体的阴影投射出，光源开启阴影通过设置 castShadow = true。一个简单的创建点光源的代码如下：

var light = new THREE.PointLight( '#ff0000', 1, 100, 2 );
light.position.set( 50, 50, 50 );
light.castShadow = true;
scene.add( light );

上述代码中 new THREE.PointLight() 用于创建点光源，该方法中有四个变量，依次是 color ， intensity ， distance ， decay 。

color ：(可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)，不支持 rgba 格式颜色。

intensity ：(可选参数) 光照强度。 缺省值 1，值越大光照越强，实测最小值为0，最大值不限。

distance ：这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)。缺省值 0，可以设置任意非负数。

decay ：沿着光照距离的衰退量。缺省值 1。 模拟现实世界光衰减只需要设置 decay 值为2便可。

2、环境光源 AmbientLight

环境光会均匀的照亮场景中的所有物体，该光源无法投影物体的阴影，因为环境光源是没有方向的，一个简单的创建环境光源的代码如下：

var light = new THREE.AmbientLight( '#404040', 1 ); 
scene.add( light );

上述代码中 new THREE.AmbientLight() 用于创建环境光源，环境光源比较简单，创建方法中只需要两个变量，依次是 color ， intensity 。

color ：(可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)，不支持 rgba 格式颜色。

intensity ：(可选参数) 光照强度。 缺省值 1，值越大光照越强，实测最小值为0，最大值不限。

3、平行光源 DirectionalLight

平行光是沿着特定方向发射的光，这种光的表现像是无限远,从它发出的光线都是平行的，常常用平行光来模拟太阳光的效果， 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的，平行光源可以映射物体的阴影，通过设置castShadow = true 来实现，一个创建平行光源的代码如下：

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );

上述代码中 new THREE.DirectionalLight() 用于创建平行光源，创建方法中只需要两个变量，依次是 color ， intensity 。

color ：(可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)，不支持 rgba 格式颜色。

intensity ：(可选参数) 光照强度。 缺省值 1，值越大光照越强，实测最小值为0，最大值不限。

4、半球光源 HemisphereLight

半球光源直接放置于场景之上，光照颜色从天空光线颜色颜色渐变到地面光线颜色，半球光不能投射阴影，一个创建半球光源的简单代码如下：

var light = new THREE.HemisphereLight( '#ffffbb', '#080820', 1 );
scene.add( light );

上述代码中 new THREE.HemisphereLight() 用于创建点光源，该方法中有四个变量，依次是 color ， groundColor ， intensity。

color ：(可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)，不支持 rgba 格式颜色。

groundColor： (可选参数) 地面发出光线的颜色。 缺省值 0xffffff(白色)，不支持 rgba 格式颜色。

intensity：(可选参数) 光照强度。 缺省值 1，值越大光照越强，实测最小值为0，最大值不限。

5、聚光灯光源 SpotLight

聚光灯是从一个方向上的一个点发出，沿着一个圆锥体，它离光越远，它的尺寸就越大，聚光灯光源可以映射物体的阴影，通过设置 castShadow = true 来实现，一个创建聚光灯光源的代码如下：

var spotLight = new THREE.SpotLight( '#ffffff', 1, 100, Math.PI / 4, 0.1, 0.1 );
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 );

上述代码中 new THREE.SpotLight() 用于创建点光源，该方法中有四个变量，依次是 color ， intensity ， distance ， angle ， penumbra  ， decay。

color ：(可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)，不支持 rgba 格式颜色。

intensity ：(可选参数) 光照强度。 缺省值 1，值越大光照越强，实测最小值为0，最大值不限。

distance ：这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)。缺省值 0，可以设置任意非负数。

angle：光线散射角度，最大为Math.PI/2。

penumbra：聚光锥的半影衰减百分比。在0和1之间的值。默认为0。

decay ：沿着光照距离的衰退量。缺省值 1。 模拟现实世界光衰减只需要设置 decay 值为2便可。

6、平面光光源 RectAreaLight

平面光光源比较特殊，后续会单独进行说明。