Three.js--7.Three.js 中常用的4种光源

如果没有光源，就不可能看到任何渲染结果；

现实环境中，人们之所以能看得到物体，是因为有光，物体的材质反射光到人眼中；

在Three.js中有几种光源，去模拟现实环境。

最常见的四种为：

• 环境光( AmbientLight )：基础光源，笼罩在整个空间无处不在的光，它的颜色会被加载到整个场景和所有对象的当前颜色上；
• 点光源( PointLight )：向四面八方发射的单点光源；
• 聚光灯( SpotLight )：发射出锥形状的光， 模拟手电筒，台灯等光源；
• 平行光( DirectinalLight )：平行的一束光，又称无限光，模拟从很远处照射的太阳光；

环境光( AmbientLight )

//创建环境光
var ambientLight = new THREE.AmbientLight(0xffffff,1);
scene.add(ambientLight);

AmbientLight(color,intensity) 有两个参数：

• color：光的颜色值，十六进制，默认值为0xffffff.
• intensity： 光的强度，默认值为1.

ps:需要注意的是，由于环境光无处不在，也就是说它是没有方向的，当然不能产生阴影；

而且，它也不能作为环境中唯一的光源；

作用：弱化阴影或添加一些颜色；

BasicMaterial不受其影响

点光源( PointLight )

//创建点光源
var pointLight = new THREE.PointLight(0xffffff,0.2,100);
pointLight.position.set(3,3,3);
scene.add(pointLight);

PointLight(color,intensity,distance,decay)有四个参数：

• color：光的颜色值，十六进制，默认值为0xffffff；
• intensity：光的强度，默认值为1；
• distance：光照距离，默认为0，表示无穷远都能照到；
• decay：随着光的距离，强度衰减的程度，默认为1，为模拟真实效果，建议设置为2；

ps:可以将点光源想象成萤火虫一样发出的光。由于它的光线也发射到四面八方，

在Three.js 中它也是不能产生阴影的;

聚光灯( SpotLight )

//创建聚光灯
//设置位置为（0，4，0），强度为1，距离为100的白光聚光灯；
var spotLight = new THREE.SpotLight(0xfffffff,1,100);
spotLight.position.set(0,4,0);
scene.add(spotLight);

聚光灯是比较常见的光源，特别是当你想产生阴影的时候，

聚光灯的属性设置（版本8.3）

SpotLight(color,intensity,distance,angle,penumbra,decay) 有六个参数：

• color：光的颜色值，十六进制，默认值为0xffffff ；
• intensity：光的强度，默认值为1；
• distance：光照距离，默认为0，表示无穷远都能照到；
• angle：圆椎体的半顶角角度，最大不超过90度，默认为最大值；
• penumbra：光照边缘的模糊化程度，范围0-1，默认为0，不模糊；
• decay：随着光的距离，强度衰减的程度，默认为1，为模拟真实效果，建议设置为2；

//白色环境光+强度为1，距离为100，角度为0.06（弧度），边缘模糊为0.5，衰减为10的白色聚光灯效果
var spotLight = new THREE.SpotLight(0xffffff,1,100,0.06,0.5,10);

平行光( DirectionalLight )

//创建平行光
var directionalLight = new THREE.DirectionalLight(0xffffff,1);
scene.add(directionalLight);

DirectionalLight(color,intensity) 有两个参数：

• color：光的颜色值，十六进制，默认值为0xffffff.
• intensity： 光的强度，默认值为1.

平行光或者说方向光可以看成是另类的聚光灯，距离太远以至于光线基本平行了，

就像太阳对于我们来说一样。它与聚光灯不同的一点是，它在任何地方的强度都是一样的。

当然它也是可以产生阴影的。创建平行光的接口与环境光一致。

设置产生阴影效果

//制造产生阴影的几个步骤,让球体和方块将阴影投影到地上，哪些物体投射阴影，哪些物体接受阴影
//1.告诉render 我们需要阴影（允许阴影隐射）
render.shadowMapEnabled = true;
//2.地平面接受阴影
plane.receiveShadow = true;
//3.方块投射阴影
cube.castShadow = true;
//4.设置光源可以投射阴影（不是所有的光源都可以投射阴影，聚光灯和平行光可以，这里使用聚光灯产生阴影
spotLight.castShadow = true;

设置阴影范围效果

shadowCameraNear: 投影近点，距离光源多近能产生阴影；
shadowCameraFar: 投影远点，到哪一点为止不产生阴影；
shadowCameraFov: 投影视场，聚光的角度大小；
target: 决定关注的方向；
exponent: 光照衰减指数，光照越远光强衰减越快；
shadowBias: 阴影偏移；
onlyShadow：如果为true，表示只在场景中添加阴影，并不会添加光照；
shadowCameraVisible=true; 可以场景中看到光源在哪里，和如何产生阴影的;
shadowDarkness: 阴影暗度，默认0.5，定义阴影有多黑；
shadowMapWidth：阴影映射宽度；
shadowMapHeight：阴影映射高度；
ps:对于最后两个：决定有多少像素用来生成阴影，如果阴影的边缘参差不起或者不那么平滑，可以增加这个值，场景渲染之后不能更改

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40,60,-10);//位置
spotLight.castShadow=true;//产生阴影
spotLight.shadowCameraNear=2;//投影进店
spotLight.shadowCameraFar = 200;//投影远点
spotLight.shadowCameraFov = 30;//投影视场，聚光灯角度
spotLight.target = plane;//光照照向地面
spotLight.distance = 0;//光照距离，默认为0，表示无穷远都能照到
spotLight.angle = 0.4;//光照角度
scene.add(spotLight);

 

平行光与聚点光源的主要差别：

聚点光源光距离目标越远光越暗淡，而平行光光强都是一样的。
形成的不是光锥而是一个方块<==很重要 ！