第三章
环境光:AmbientLight
点光源:PointLight
聚光灯:SpotLight
方向光:DirectionalLight:无限光,例如太阳光,平行光
半球光:HemisphereLight:模拟更加自然的室外光线,反光面,光线微弱的天空
面光源:AreaLight
镜头眩光:LensFlare
AmbientLight:影响整个场景的光源
光源没有特定的来源,不能产生阴影。不能作为场景中唯一光源,言外之意,他是配合其他光源存在的。
作用:弱化阴影或添加一些颜色。
使用该光源,用色应尽量保守。
var ambientColor = '0x0c0c0c';
var ambientLight = new THREE.AmbientLight(ambientColor);
scene.add(ambientLight);
...
var controls = new function(){
this.ambientColor = ambientColor;
}
var gui = new dat.GUI();
gui.addColor(controls,'ambientColor').onchange(function(e){
ambientLight.color = new THREE.Color(e);
});
该光源不需要设置光源的位置,直接添加到Scene中即可。
THREE.Color()对象
函数:
set(value) 设置当前颜色改成指定的十六进制值。这个值可以是字符串或者数字。
setHex(value) 设置当前颜色改成指定的十六进制值。这个值只能是数字。
setRGB(r,g,b) 参数范围0-1
setHSV(h,x,v) 参数范围0-1
copy(colorObj) 从提供的颜色对象赋值颜色值到当前对象
getHex()
getHexString()
getHSV()
add(color) 将提供的颜色加到当前的颜色上
addColors(color1,color2)
addScalar(s) 在当前颜色的RGB分量上添加值
clone() 复制当前颜色
PointLig:照射所有方向
点光源不会产生投影,因为他的光线照射所有的方向,计算投影的话对GPU来说是沉重的负担。
属性:
color
intensity 光源强度,默认为1
distance 光源照射的距离。默认为0,表示光线的亮度不会随着距离的增加而减少。
position
visible 为true,该光源打开,为false,该光源关闭。
SpotLight:常用的光源,具有锥形效果
可以产生阴影
属性:
castShadow
shaowCameraNear 从距离光源哪一点开始产生阴影
shadowCameraFar 从距离光源哪一点为止结束生成阴影
shadowCameraFov 用于生成阴影的视场有多大
target 决定光照的方向,一般是一个物体,即光源照向这个物体。
shadowBias 偏移阴影的位置
angle 光源射出的光柱有多宽。默认 Math.PI/3
exponent 光强衰减指数,决定光强递减的有多快。
onlyShadow 如果为true,则只产生阴影,不产生光照。
shadowCameraVisible 如果为true,就可以看到光源的位置及如何生成阴影。
shadowDarkness 阴影的阴暗程度,默认为0.5,场景渲染完毕之后不能修改。
shadowMapWidth 决定多少像素渲染阴影,如果阴影边缘有锯齿可以增加这个值
shadowMapHeight 决定多少像素渲染阴影,如果阴影边缘有锯齿可以增加这个值
target属性我们可以设置场景中的任何一个物体,当前我们也可以设置空间的任何一点。
var target = new THREE.Object3D();
target.position = new THREE.Vector3(,,);
spotLight.target = target;
DirectionalLight:模拟太阳光
整个区域的光强是一样的。
可以产生阴影
属性:
direction
color
intensity
方向光和点光源有很多相同的属性。
特有属性:
对于点光源来说,要想产生阴影,我们不得不定义生成引用的光锥。
方向光所有的光线是平行的,所以不会有光锥,取而代之的是一个方块。
可以使用下面几个属性定义一个方块。
directionalLight.shaowCameraNear = ;
directionalLight.shadowCameraFar = ;
directionalLight.shadowCameraLeft = -;
directionalLight.shadowCameraRight = ;
directionalLight.shadowCameraTop = ;
directionalLight.shadowCameraBottom = -;
HemisphereLight:模拟更加自然的室外光线,反光面,光线微弱的天空
//参数见属性
var hemiLight = new THREE.HemisphereLight(x0000ff,x00ff00,);
hemiLight.position.set(,,);
scene.add(hemiLight);
属性:
groundColor:从地面发出的光线的颜色
Color : 从天空发出的光线的颜色
intensity
AreaLight
创建一个矩形的光源。
在Three.js库的扩展中。
AreaLight是一种复杂的光源,需要使用WebGLDeferredRenderer(WebGL延迟渲染器)
如果我们的场景中有大量的光源,而且性能也有问题,就应该考虑使用 WebGLDeferredRenderer延迟渲染器。
js库:
WebGLDeferredRenderer.js
ShaderDeferred.js
RenderPass.js
EffectComposer.js
CopyShader.js
ShaderPass.js
FXAAShader.js
MashPass.js
var renderer = new THREE.WebGLDeferredRenderer({
width:window.innerWidth,
height:window.innerHeight,
scale:
antialias:true,
tonemapping:THREE.FilmicOperator,
brightness:
});
第十章会解释这些参数的含义。
var areaLight = new THREE.AreaLight(,);//光强3
areaLight.position.set(x,y,z);
areaLight.rotation.set(Math.PI/);
areaLight.width = ;
areaLight.height = ;
scene.add(areaLight);
默认情况下,光源是不可见的。
我们可以在光源的地方创建一个平面,来代替光源。
var plane = new THREE.CubeGeometry(,,);
var planeMat = new THREE.MeshBasicMaterial({color:0xff0000});
var plane1 = new THREE.Mesh(plane,planeMat);
plane1.position = areaLight.position;
scene.add(plane1);
LensFlare:镜头眩光
var lensFlare = new THREE.LensFlare(texture,size,distance,blending,color);
texture:纹理,决定眩光的样子
size:决定眩光多大。如果为-1,则使用纹理的大小。
distance:光源(0)到相机的距离(1)
blending:融合,当我们为眩光提供多种材质时,该属性决定这些材质怎么融合。默认的融合模式是THREE.AdditiveBlending,它可以提供一种半透明的眩光。
color:颜色
var textureFlare0 = THREE.ImageUtils.loadTexture('../...');
var flareColor = new THREE.Color(xffaacc);
var lensFlare = new THREE.LensFlare(textureFlare0,,,THREE.AdditiveBlending,flareColor);
lensFlare.position = spotLight.position;
scene.add(lensFlare);
进一步美化场景:
var textureFlare3 = THREE.ImageUtils.loadTexture('../...');
lensFlare.add(textureFlare3,,,THREE.AdditiveBlending);
lensFlare.add(textureFlare3,,,THREE.AdditiveBlending);
lensFlare.add(textureFlare3,,,THREE.AdditiveBlending);
lensFlare.add(textureFlare3,,,THREE.AdditiveBlending);