ThreeJs学习笔记【day12】光照【3】

思乡码农
185 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情 >>

接上一篇，继续探索光源

点光源

点光源，顾名思义，就是从一个点向四面八方发射的光源

{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.PointLight(color, intensity, 0);
light.position.set(0, 10, 0);
scene.add(light);
const helper = new THREE.PointLightHelper(light);
scene.add(helper);    
}

image.png 为了便于理解，我同样为点光源添加了GUI HELPER，之后再代码片段内体现，点光源需要注意的是他的第三个参数，distance, 默认是0，指的是光源强度intensity衰减至0时的距离，0为无穷大

聚光灯

聚光灯可以看成是一个点光源被一个圆锥体限制住了光照的范围。实际上有两个圆锥，内圆锥和外圆锥。光照强度在两个锥体之间从设定的强度递减到 0，怎么去理解呢，恩。。。农村的孩子应该对挂在房梁上的电灯有印象吧？挂在房梁上的电灯外面会有一个壳子，是圆锥状的，罩起来以后光会更聚合，这里大概也是指类似的效果

 {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.SpotLight(color, intensity);
    light.position.set(0, 12, 0);
    scene.add(light);
    
    const helper = new THREE.SpotLightHelper(light);
     function updateLight() {
      helper.update();
    }   
    scene.add(helper);
    const gui = new GUI();
    gui.add(light, 'penumbra', 0, 1, 0.01);
    gui.add(new DegRadHelper(light, 'angle'), 'value', 0, 90).name('angle').onChange(updateLight);
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
    gui.add(light, 'intensity', 0, 2, 0.01);
    gui.add(light, 'distance', 0, 40).onChange(updateLight);
    
    makeXYZGUI(gui, light.position, 'position', updateLight);
  }

这里有几点需要注意，1，光源的位置我同样设为了(0,12,0),Y轴正向为高度，相当于是把聚光灯吊了起来，只有吊起来，才能照射的范围更广，光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大，构造聚光灯的类支持多个参数，下面就依次进行说明

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians（弧度）, penumbra : Float, decay : Float )

  • color - (可选参数) 十六进制光照颜色。 缺省值 0xffffff (白色)。
  • intensity - (可选参数) 光照强度。 缺省值 1。
  • distance - 从光源发出光的最大距离，其强度根据光源的距离线性衰减。
  • angle -光线散射角度，最大为Math.PI/2
  • penumbra - 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。
  • decay- 沿着光照距离的衰减量。

这里需要注意的是，角度由angle控制，penumbra控制的是光照边缘的模糊程度，相当于是给圆锥形的光又套了一个壳子，调整penumbra的大小可以看出清晰边缘与模糊边缘

矩形区域光

Three.js 中还有一种类型的光照，矩形区域光, 顾名思义，表示一个矩形区域的发射出来的光照，例如长条的日光灯或者天花板上磨砂玻璃透进来的自然光。这个涉及到的额外知识点比较多，本身的话也比较好理解，所以先mark一下，之后再进行学习和探索

本文中涉及到的代码依旧以代码片段的形式引入

avatar
文章
阅读
粉丝