03.ThreeJs开发指南-第三章-光源

第三章

环境光：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(5,0,0);

spotLight.target = target;

DirectionalLight：模拟太阳光

整个区域的光强是一样的。

可以产生阴影

属性：
direction
color
intensity

方向光和点光源有很多相同的属性。

特有属性：

对于点光源来说，要想产生阴影，我们不得不定义生成引用的光锥。
方向光所有的光线是平行的，所以不会有光锥，取而代之的是一个方块。

可以使用下面几个属性定义一个方块。

directionalLight.shaowCameraNear = 2;
directionalLight.shadowCameraFar = 200;
directionalLight.shadowCameraLeft = -50;
directionalLight.shadowCameraRight = 50;
directionalLight.shadowCameraTop = 50;
directionalLight.shadowCameraBottom = -50;

HemisphereLight：模拟更加自然的室外光线，反光面，光线微弱的天空

//参数见属性
var hemiLight = new THREE.HemisphereLight(0x0000ff,0x00ff00,0.6);
hemiLight.position.set(0,500,0);
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:1
    antialias:true,
    tonemapping:THREE.FilmicOperator,
    brightness:2.5

});

第十章会解释这些参数的含义。

var areaLight = new THREE.AreaLight(0xff0000,3);//光强3
areaLight.position.set(x,y,z);
areaLight.rotation.set(Math.PI/2);
areaLight.width  = 4;
areaLight.height = 9.9;
scene.add(areaLight);

默认情况下，光源是不可见的。

我们可以在光源的地方创建一个平面，来代替光源。

var plane = new THREE.CubeGeometry(4,10,0);
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(0xffaacc);
var lensFlare = new THREE.LensFlare(textureFlare0,350,0.0,THREE.AdditiveBlending,flareColor);

lensFlare.position = spotLight.position;
scene.add(lensFlare);

进一步美化场景：

var textureFlare3 = THREE.ImageUtils.loadTexture('../...');

lensFlare.add(textureFlare3,60,0.6,THREE.AdditiveBlending);
lensFlare.add(textureFlare3,70,0.7,THREE.AdditiveBlending);
lensFlare.add(textureFlare3,120,0.9,THREE.AdditiveBlending);
lensFlare.add(textureFlare3,70,1.0,THREE.AdditiveBlending);