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

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


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


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


最常见的四种为：


1.环境光( AmbientLight )：基础光源，笼罩在整个空间无处不在的光，它的颜色会被加载到整个场景和所有对象的当前颜色上；
2.点光源( PointLight )：向四面八方发射的单点光源；
3.聚光灯( SpotLight )：发射出锥形状的光， 模拟手电筒，台灯等光源；
4.平行光( 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);




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



                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/vivian_1122/article/details/87259721