Threejs系列--5灯光

序言

通过前几张的了解，你应该对几何体、材质以及如何添加纹理贴图有了一定的了解，本章将介绍灯光。

光源

threejs提供了 Light对象以及其它子对象，可以使得我们非常方便的管理灯光效果。

Light是光源的基类，不要直接使用，我们应该使用其派生类。

//关于Light
Light( color : Integer, intensity : float )
color：16进制表示光的颜色，默认白色。
intensity：光照强度，默认1。

创造光源

环境光

使用AmbientLight，环境光将均匀照亮场景中所有物体，但是不能设置阴影，它没有方向。

//构造函数
AmbientLight( color : Integer, intensity : Float )
color：16进制表示光的颜色，默认白色。
intensity：光照强度，默认1。

添加前

通过设置的颜色照亮后

//创建一个环境光
var light = new THREE.AmbientLight( 0x404040 );
scene.add( light );

平行光

使用DirectionalLight，平行光是沿着特定方向，可以是无限远之处发射的光，我们常常用来模拟太阳。可以投射阴影。

//构造函数
DirectionalLight( color : Integer, intensity : Float )
color：16进制表示光的颜色，默认白色。
intensity：光照强度，默认1。

添加前

通过设置的颜色照亮后

//创建一个平行光
var light  = new THREE.DirectionalLight( 0xffffff );
scene.add( light );

半球光

使用HemisphereLight，它的变化过程是颜色从天空颜色渐变到地面颜色。不能投射阴影。

示例

//构造函数
HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )
skyColor：天空发出光线的颜色，默认白色。
groundColor：地面发出光线的颜色，默认白色。
intensity：光照强度，默认1。

添加前

通过设置的颜色照亮后

//创建一个半球光
var light = new THREE.HemisphereLight( 0xff0000, 0x0000ff );
scene.add( light );

点光源

使用PointLight，从一个点向各个方向发出的光源，例如模拟灯泡。

示例

//构造函数
PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )
color：光照颜色，默认白色。
intensity：光照强度，默认1。
distance： 从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)，默认0。
decay：沿着光照距离的衰退量，默认1。

添加前

通过设置的颜色照亮后

//创建一个点光源
var light = new THREE.PointLight( 0xff0000, 1, 200 );
light.position.set( 50, 50, 50 ); //设置光源在场景中的位置
scene.add( light );

平面光光源

使用RectAreaLight，从矩形平面均匀发出光线，用来模拟窗户的玻璃反光。不支持阴影。只支持MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。

//构造函数
RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )
color：光照颜色，默认白色。
intensity：光源强度／亮度 ，默认1。
width：光源宽度，默认10。
height：光源高度，默认10。

添加前

通过设置的颜色照亮后

//创建一个平面光源
var light= new THREE.RectAreaLight( 0xff0000, 1,  500, 500 );
light.position.set( 50, 50, 50 ); //设置光源位置
scene.add( light)

聚光灯

使用SpotLight，从一个点发出，沿着圆锥体，向一个方向照射。支持投射阴影。

//构造函数
SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )
color：光照颜色默认白色。
intensity：光照强度，默认1。
distance：从光源发出光的最大距离，其强度根据光源的距离线性衰减。
angle：光线散射角度，最大为Math.PI/2。
penumbra：聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
decay：沿着光照距离的衰减量。

添加前

通过设置的颜色照亮后

//创建一个平面光源
var light= new THREE.SpotLight( 0xffffff );
light.position.set( 100, 1000, 100 ); //设置光源位置
scene.add( light);

新手请看这里

新手注意了，前面几章中，我大多情况仅仅放了部分核心代码，你如果是个新手，那么你要做的便是基础的了解，坚持下去，后面会有实战的环节。