学习Three.js——光源(Light)

光源的种类:

AmbientLight:环境光,场景所有物体都会叠加此光源

PointLight:点光源,从空间某一点发散光线

SpotLight:聚光灯,类似于手电筒的效果

DirectionalLight:方向(平行)光,类似于太阳光

HemisphereLight:半球光,类似于天空,可以创造一个比较自然的户外环境

AreaLight:区域光,光从一个评估按发散出来

LensFlare:添加光晕的效果

AmbientLight

环境光一般不会单独使用,而是配合其他的一些光源一起配合使用,目的是弱化阴影或添加一些额外的颜色

var color = 0xffffff;
var ambientLight = new THREE.AmbientLight(color);
scene.add(ambientLight)

PointLight

THREE.PointLight(color)

color:颜色,用十六进制表示

distance:照射的距离,表示点光源衰弱到0时达到的距离,默认为0,表示无穷远

intensity:强度,表示光的亮度

position:表示光源的位置

visible:光源是否可见

SpotLight

聚光灯光源是一个类似于光锥的光源

THREE.SpotLight(color)

angle:光锥的角度

castShadow:是否产生阴影

color:颜色

distance:光线照射的距离,默认为0,表示无穷远

exponent:决定了光线强度递减的速度

intensity:光照强度

onlyShadow:设置为true,则只显示阴影而不显示光源

position:光源的位置

shadowBias:阴影偏移,用于解决光线渲染失真的问题

shadowCameraNear,shadowCameraFar,shadowCameraFov:决定了阴影能产生的区域

shadowDarkness:阴影的暗度

shadowCameraVisible:投影方式可见,可以显示光源照射和阴影产生的区域

target:光线照射的对象

visible:是否打开光源

shadowCameraVisible的效果如图所示:

DirectionLight

平行光的属性和聚光灯差不多,拥有以上聚光灯的属性。

类似于聚光灯的shadowCameraNear,shadowCameraFar,shadowCameraFov定义了产生阴影的范围,

平行光使用了shadowCameraNear,shadowCameraFar,shadowCameraLeft,shadowCameraRight,shadowCameraTop,shadowCameraBottom定义了一个立方体区域来产生阴影。

HemisphereLight

半球光,用于表现比较自然的户外环境

THREE.HemisphereLight(groundColor,color,intensity)

groundColor:从地面发出的光的颜色

color:从天空发出的光的颜色

intensity:光线照射的强度

AreaLight

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

你可能感兴趣的:(Three.js)