天天看点

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(,,);

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);
           

继续阅读