AmbientLight
:环境光,场景所有物体都会叠加此光源
PointLight
:点光源,从空间某一点发散光线
SpotLight
:聚光灯,类似于手电筒的效果
DirectionalLight
:方向(平行)光,类似于太阳光
HemisphereLight
:半球光,类似于天空,可以创造一个比较自然的户外环境
AreaLight
:区域光,光从一个评估按发散出来
LensFlare
:添加光晕的效果
环境光一般不会单独使用,而是配合其他的一些光源一起配合使用,目的是弱化阴影或添加一些额外的颜色
var color = 0xffffff;
var ambientLight = new THREE.AmbientLight(color);
scene.add(ambientLight)
THREE.PointLight(color)
color
:颜色,用十六进制表示
distance
:照射的距离,表示点光源衰弱到0时达到的距离,默认为0,表示无穷远
intensity
:强度,表示光的亮度
position
:表示光源的位置
visible
:光源是否可见
聚光灯光源是一个类似于光锥的光源
THREE.SpotLight(color)
angle
:光锥的角度
castShadow
:是否产生阴影
color
:颜色
distance
:光线照射的距离,默认为0,表示无穷远
exponent
:决定了光线强度递减的速度
intensity
:光照强度
onlyShadow
:设置为true,则只显示阴影而不显示光源
position
:光源的位置
shadowBias
:阴影偏移,用于解决光线渲染失真的问题
shadowCameraNear,shadowCameraFar,shadowCameraFov
:决定了阴影能产生的区域
shadowDarkness
:阴影的暗度
shadowCameraVisible
:投影方式可见,可以显示光源照射和阴影产生的区域
target
:光线照射的对象
visible
:是否打开光源
shadowCameraVisible的效果如图所示:
平行光的属性和聚光灯差不多,拥有以上聚光灯的属性。
类似于聚光灯的shadowCameraNear,shadowCameraFar,shadowCameraFov
定义了产生阴影的范围,
平行光使用了shadowCameraNear,shadowCameraFar,shadowCameraLeft,shadowCameraRight,shadowCameraTop,shadowCameraBottom
定义了一个立方体区域来产生阴影。
半球光,用于表现比较自然的户外环境
THREE.HemisphereLight(groundColor,color,intensity)
groundColor
:从地面发出的光的颜色
color
:从天空发出的光的颜色
intensity
:光线照射的强度
AreaLight是一个会发光的长方形区域,注意这里不能使用WebGLRenderer进行渲染,而是使用WebGLDeferredRenderer(可以处理更加复杂的光线)
构造函数THREE.AreaLight(color,intensity)
var areaLight1 = new THREE.AreaLight(0xff0000, 3);
areaLight1.position.set(-10, 10, -35);
areaLight1.rotation.set(-Math.PI / 2, 0, 0);
areaLight1.width = 4;
areaLight1.height = 9.9;
scene.add(areaLight1);
构造函数THREE.LensFlare(texture,size,distance,blending,color,opacity)
texture
:纹理,需要使用THREE.ImageUtils.loadTexture(img)加载一张图片得到对应的纹理
size
:光晕的大小
distance
:放置光晕的位置,光源和摄像机连成一条线,光源为0,摄像机为1,取0-1之间的数
blending
:混合模式,我们可以为光晕使用多种材质并将其混合,一般取THREE.AdditiveBlending
color
:光晕的颜色
opacity
:光晕的透明度、
用法:
var textureFlare = THREE.ImageUtils.loadTexture("img_path");
var flareColor = new THREE.Color(0xffaacc);
var lensFlare = new THREE.LensFlare(textureFlare, 350, 0.0, THREE.AdditiveBlending, flareColor);