作为3D技术的发展趋势，浏览器端3D技术越来越被一些技术公司重视。由此，Threejs非常注重3D渲染效果的真实性，对渲染真实性来说，使用光源是比不可少的技巧。Threejs，在光源方面提供了多种光源供选择。
1.光源大概有7种，其中：
基础光源4种：
环境光（AmbientLight； 会把它的颜色会添加到整个场景和所有对象的当前颜色上）
点光源（PointLight ；空间中的一点，朝所有的方向发射光线）
聚光灯光源（SpotLight ；这种光源有聚光的效果，类似于台灯，手电筒等）
方向光（DirectionalLight ；也称无限光，从这种光源发出的光线可以看作是平行的，例如太阳光）
特殊光源有3种：
半球光光源（HemisphereLight，可以为室内场景创建更加自然的光照效果，模拟反光面和光线微弱的天气）
面光源（AreaLight使用这种光源可以指定散发光线的平面，而不是空间的一个点）
镜头炫光（LensFlare这不是一种光源，但是通过该炫光可以为场景中的光源添加炫目的效果）
2.光源基类
在three.js中，光源用light表示，它是所有光源的基类，其函数是：
THREE.Light ( hex )/////他有一个函数，接收一个16进制的颜色值。
例：
let redLight = new THREE.Light(0xFF0000);
下面分别介绍three.js的基础光源：
1.环境光
环境光是经过多次反射而来的光称为环境光，无法确定其最初的方向。环境光是一种无处不在的光。环境光源放出的光线被认为来自任何方向。因此，当你仅为场景指定环境光时，所有的物体无论法向量如何，都将表现为同样的明暗程度。
环境光用THREE.AmbientLight来表示，例：
var light = new THREE.AmbientLight(0x917CF9 );
有一个接受颜色值的参数。
2.点光源
点光源：由这种光源放出的光线来自同一点，且方向辐射自四面八方。例如蜡烛放出的光，灯笼放出的光。
点光源用PointLight来表示，例：
PointLight( color, intensity, distance )
有3个参数，分别是：
光的颜色，
光的强度（默认1.0），
光的距离（默认0.0）
3.聚光灯
聚光灯：这种光源的光线从一个锥体中射出，在被照射的物体上产生聚光的效果。
聚光灯用SpotLight来表示，例：
THREE.SpotLight( hex, intensity, distance, angle, exponent )
有5个参数，分别是：
聚光灯发出的颜色，
光源强度，
光线强度，
聚光灯着色角度（用弧度作为单位，这个角度是和光源的方向形成的角度），
光源模型衰减的一个参数，越大越衰减
4.方向光
该光源可以看做是距离很远很远的光源，以至于该光源所发出的所有光线都是相互平行的，
方向光光源的一个范例就是太阳，方向光光源不像聚焦光那样离目标越远越暗淡，被方向光光源照亮的整个区域接收到的光强是一样的
方向光用DirectionalLight来表示，例：
THREE.DirectionalLight = function ( hex, intensity )
有2个参数，分别是：
光的颜色，
光线强度
以上是three.js的基础光源，下面来介绍特殊光源：
1.半球光源
这种光源可以为室外场景创建更加自然的光照效果
我们模拟室外光照的时候，可以使用方向光源来模拟太阳，再添加一个环境光源，为场景添加基础色
但是这样看起来不太自然，因为室外的光并不都是来自于上方，很多是来自于空气的散射和地面的反射，以及其他物体的反射
所以在使用方向光源来模拟太阳的情况下再添加一个半球光就自然多了
半球光用HemisphereLight来表示
2.平面光源
平面光光源可以定义为一个发光的矩形
1 由于该光源是THREE.js的扩展，需要引入扩展库
2 平面光源是一种很复杂的光源，因此不能再使用WebGLRenderer对象了，该对象会造成严重的性能损失
3 因此在处理复杂光源或者多个光源的时候，使用WebGL的延迟渲染器WebGLDeferredRenderer
平面光用AreaLight来表示
3.镜头炫光
当我们直接朝着太阳拍照时就会出现镜头眩光（彩色的小光圈），对于游戏或者三维图像来说，镜头眩光会使得场景看起来更真实
镜头炫光用LensFlare来表示
网友评论