threejs 创建光照，光晕以及阴影

一 创建光照

1 环境光

        无特定的方向，光照会应用到全局

        var ambientLight = new THREE.AmbientLight("white");
        scene.add(ambientLight);

 2 平行光(太阳光)

        平行光照亮的整个区域接收到的光强是一样的。光是平行的；可以生成阴影的光之一

        var light = new THREE.DirectionalLight("red");//光源颜色
        light.position.set(20, 10000, 13);//光源位置
        scene.add(light);//光源添加到场景中

3 聚光灯(台灯) 

        可以产生阴影的光之一

      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(3500, 4000, 3500);

4 点光源(灯泡，照明弹)

一种单点发光、照射所有方向的光源；不会产生阴影。因为它会朝所有的方向发射光线

        var pointLight = new THREE.PointLight("red");
        pointLight.position.set(1000,1000,1000);
        scene.add(pointLight);

二 创建阴影

这里以聚光灯为例，创建一个阴影效果；

需要设置四处实现阴影:

1 开启场景阴影

renderer.shadowMap.enabled = true;

2 创建一个平面，并设置接受阴影

    var planeGeo = new THREE.PlaneGeometry(100,100,10,10);// 创建平面
    var planeMat = new THREE.MeshLambertMaterial({  // 创建材料
        color:0xFFFFFF,
        wireframe:false
    });
    var planeMesh = new THREE.Mesh(planeGeo, planeMat);// 创建网格模型
    planeMesh.rotation.x = -0.5 * Math.PI;// 将平面绕X轴逆时针旋转90度
    planeMesh.receiveShadow = true;// 允许接收阴影
    scene.add(planeMesh);// 将平面添加到场景中

3 创建需要投影的实体，并设置投影属性为true 

    // 创建球体
    var sphereGeo = new THREE.SphereGeometry(6, 20, 40);// 创建球体
    var sphereMat = new THREE.MeshPhongMaterial({// 创建材料
        color:0x0000FF
    });
    var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);// 创建球体网格模型
    sphereMesh.position.set(0, 4, 0);// 设置球的坐标
    sphereMesh.castShadow = true;// 允许投射阴影
    scene.add(sphereMesh);// 将球体添加到场景

4 设置聚光灯光源

平行光和聚光灯都可以实现阴影，这里以聚光灯为例

        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(3500, 4000, 3500);
        spotLight.shadowCameraNear = 2;// 投影近点
        spotLight.shadowCameraFar = 8000;// 投影远点
        spotLight.shadowCameraFov = 5000;// 视场有多大
        spotLight.lookAt(0,0,0);// 望向
        spotLight.castShadow = true; // 允许投射阴影
        spotLight.shadow.mapSize.width=2048;	// 阴影贴图宽度设置为2048像素
        spotLight.shadow.mapSize.height=2048;	// 阴影贴图高度设置为2048像素
        // spotLight.shadowCameraVisible = true;// 开启调试模式
        scene.add(spotLight);

其中shadow.mapSize属性是阴影的像素数量，越大阴影越真实，但是也耗费性能

通过以上四步可以实现投射物体阴影；需要注意要想投射阴影，投射平面的材质只能是MeshLambertMaterial和MeshPhongMaterial中的一种.

三 创建光晕

效果

1 引入光晕类

import { LensflareElement, Lensflare } from 'three/examples/jsm/objects/Lensflare';

2 创建光晕，并将光晕放着在光源位置

2.1 首先下载下载一个光晕图片，作为纹理图片

2.2 创建光晕对象

2.3 将光晕对象添加到指定光源

代码如下:

    const path="./statics/imgs/sun.webp";   
    const texture = new THREE.TextureLoader().load(path);
    const lensflare = new Lensflare();
    // 通过不同光晕贴图的大小创造出炫光的效果
    lensflare.addElement(new LensflareElement(texture, 100, 0));
    lensflare.addElement(new LensflareElement(texture, 80, 0));
    lensflare.addElement(new LensflareElement(texture, 50, 0));
    // 将光晕放置在点光源位置
    spotLight.add(lensflare);