阅读:516回复:0
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 |
|