Three.js通过RectAreaLight创造平面区域光

一、RectAreaLight的特性：

1、不支持阴影，无法通过设置castShadow来产生阴影。

2、RectAreaLight所散发的光源只能影响MeshStandardMaterial和MeshPhysicalMaterial两种材质，其他材质不受该光照的影响。

二、效果图：

三、引入步骤：

1、引入RectAreaLight:

import {RectAreaLight} from 'three'

2、创造RectAreaLight并加入场景

 this.areaLight = new RectAreaLight(0xffffff, 1, 25, 25);
 this.areaLight.position.set(0, 0, 8);
 this.scene.add(this.areaLight);

3、创建两个矩形平面作为平面区域光的载体

  const rectLightMesh = new Mesh(new PlaneGeometry(10, 10), new MeshBasicMaterial({ color:0xffffff, side:BackSide }));
  this.areaLight.add(rectLightMesh);

 const rectLightMeshBack = new Mesh(new PlaneGeometry(10, 10), new MeshBasicMaterial({ color:'#000000' }));
 rectLightMesh.add(rectLightMeshBack);

创建两个矩形平面的原因是为了保证平面光的光源的指向是同一个方向。而且需要注意的是必须设置side = side:BackSide，这样做是为了保证方面的平面缓冲几何体能够上色。

四、完整源代码：

import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls';//控制器
import Stats from 'stats.js';
import * as dat from 'dat.gui';
import { Mesh, PerspectiveCamera, Scene, WebGLRenderer, AmbientLight, MeshBasicMaterial, PlaneGeometry, BoxGeometry, MeshPhongMaterial,  Color,  RectAreaLight, PlaneBufferGeometry, BackSide, MeshStandardMaterial,  } from 'three';
export class LightProbeDemo {
    private camera: PerspectiveCamera;
    private scene: Scene;
    private renderer: WebGLRenderer;
    private stats: Stats;
    private dat: any;
    private params!: any;
    private planeGeometry!: PlaneBufferGeometry;
    private envlight!: AmbientLight;
    private areaLight!: RectAreaLight;
    constructor() {
        // 创建场景
        this.scene = new Scene();
        this.stats = new Stats();
        // 操作器
        this.dat = new dat.GUI();
        // 创建渲染器
        this.renderer = new WebGLRenderer({ antialias: true });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setPixelRatio(window.devicePixelRatio); //设备像素比 可以清晰物体
        this.renderer.setClearColor(0xEEEEEE, 1); //设置背景颜色
        this.renderer.shadowMap.enabled = true;
        document.body.appendChild(this.renderer.domElement);



        // 创建相机
        this.camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
        this.camera.position.set(10, 40, 40);
        this.camera.lookAt(this.scene.position);
        // 平面
        this.planeGeometry = new PlaneBufferGeometry(1600, 1400);
        // console.log(this.planeGeometry);
        
        const planeMaterial = new MeshPhongMaterial({
            specular: 0xffffff,
            color: 0xeeffff,
            shininess: 100,
            // side:DoubleSide
        });
        const planeMesh = new Mesh(this.planeGeometry, planeMaterial);
        planeMesh.rotation.x = -0.5 * Math.PI;
        planeMesh.position.y = -2;
        this.scene.add(planeMesh);

     
        const box = new BoxGeometry(5, 5, 5);
        const material = new MeshStandardMaterial({ color: '#A00000' });
        const boxmesh = new Mesh(box, material);
        boxmesh.rotation.y = 0.1*Math.PI;
        this.scene.add(boxmesh);

        // AreaLight
        this.areaLight = new RectAreaLight(0xffffff, 1, 25, 25);
        this.areaLight.position.set(0, 0, 10);
        this.scene.add(this.areaLight);
        // AreaLight载体
        const rectLightMesh = new Mesh(new PlaneGeometry(10, 10), new MeshBasicMaterial({ color:0xffffff, side:BackSide }));
        this.areaLight.add(rectLightMesh);

        const rectLightMeshBack = new Mesh(new PlaneGeometry(10, 10), new MeshBasicMaterial({ color:'#000000' }));
        rectLightMesh.add(rectLightMeshBack);

        // 环境光
        this.envlight = new AmbientLight(0xffffff, 0.7);

        this.scene.add(this.envlight);


        this.params = {
            envIntensity: 0.7,
            ambientLight: this.envlight.color.getStyle(),
            visible: false,
            
        };
        this.dat.add(this.params, 'envIntensity', 0.1, 1.0).onChange(e => {
            this.envlight.intensity = e;

        }).name('环境光强度');
        this.dat.addColor(this.params, 'ambientLight').onChange(e => {
            console.log(e);
            this.envlight.color = new Color(e);
        }).name('环境光颜色');

        this.dat.add(this.params, 'visible').onChange(e => {
            this.envlight.visible = !e;
        }).name('是否显示环境光');


        // fps显示器
        this.stats.showPanel(0);
        document.body.appendChild(this.stats.dom);
        // 相机控制器
        new OrbitControls(this.camera, this.renderer.domElement);
        window.addEventListener('resize', () => this.onWindowResize());
        this.render();
    }


    // 窗口变化
    private onWindowResize() {
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix(); //相机属性发生变化更新投影矩阵
    }
    // 渲染
    private render() {
        this.stats.begin();

        window.requestAnimationFrame(() => this.render());
        this.renderer.render(this.scene, this.camera);
        this.stats.end();
    }
}