Threejs制作窗户透亮效果

应该经常看到这样的图片，昏暗的屋里，阳光通过窗户照射进来，将照射到的地方照亮，没有照到的地方依然昏暗，

Threejs提供了一种特殊的灯光用来实现上图中的效果叫RectAreaLight，他是一种平面光源，平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。下面一起实践一下：

首先需要创建基础的场景，包括：场景，相机，渲染器等。这部分之前已经有很多，不再赘述了，然后我们需要在场景中放置一个box，用来测试灯光的效果，

    initBox(){
      let geometry = new THREE.BoxGeometry(10,10,10);//创建一个几何体
      let material = new THREE.MeshStandardMaterial ({color:'#FF0000'});//创建材质
      this.box = new THREE.Mesh(geometry, material);//创建网格模型
      this.box.position.set(0,0,0)
      this.scene.add(this.box);//添加到场景中
    },

        

          
        
        
        

          

          AI 代码解读
        
      
      

然后创建RectAreaLight，为了更直观的查看灯光的位置，在添加上RectAreaLightHelper，这是一个专门描绘大小和形状的辅助工具。

    initRectAreaLight(){
      const rectLight = new THREE.RectAreaLight( 0xffffff, 1,  10, 10 );
      rectLight.position.set( 50, 50, 0 );
      rectLight.lookAt( 0, 0, 0 );
      this.scene.add( rectLight )
      const rectLightHelper = new RectAreaLightHelper( rectLight );
      this.scene.add( rectLightHelper );
    },

        

          
        
        
        

          

          AI 代码解读
        
      
      

最终效果如下，上方的白色是窗户，下面的盒子是被照射到的，可以看到盒子面对窗户的方向是亮的，背对着的是黑色，和上面图效果有差距，但是原理是这样子。