Three.js通过Lensflare创建镜头光晕

Three.js通过Lensflare可以创造出我们看向太阳的时候出现的那种光晕的效果。

1、效果图：

2、使用步骤

2.1、引入Lensflare和LensflareElement

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

2.2、创建光源

本案例中使用的是点光源，一般来说都会将光晕放在光源的位置。

     const pointLight = new PointLight(0xffffff, 1);
     pointLight.position.set(-10, 20, 0);
     this.scene.add(pointLight);

2.3、创建镜头光晕

        const texture = new TextureLoader().load('../assets/lensflare0.png');
        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));
        // 将光晕放置在点光源位置
        pointLight.add(lensflare);

3、完整源代码：

import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls';//控制器
import { LensflareElement, Lensflare } from '../../node_modules/three/examples/jsm/objects/Lensflare';
import Stats from 'stats.js';
import * as dat from 'dat.gui';
import { Mesh, PerspectiveCamera,  Scene, WebGLRenderer, PointLight, AmbientLight, AxesHelper,  MeshBasicMaterial,  BoxGeometry,  MeshLambertMaterial, Color,  PlaneBufferGeometry,  TextureLoader,  } 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;
    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);
        
        const planeMaterial = new MeshBasicMaterial({
            color: '#1e85d7',
            // 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 MeshLambertMaterial({ color: '#A00000' });
        const boxmesh = new Mesh(box, material);
        this.scene.add(boxmesh);

       
        // 场景加雾
        // this.scene.fog = new Fog(0xffffff, 0.015, 100);
        // 点光源
        const pointLight = new PointLight(0xffffff, 1);
        pointLight.position.set(-10, 20, 0);
        this.scene.add(pointLight);

        // 镜头光晕
        const texture = new TextureLoader().load('../assets/lensflare0.png');
        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));
        // 将光晕放置在点光源位置
        pointLight.add(lensflare);
        

        // 环境光
        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('是否显示环境光');


        // 辅助坐标系
        var axis = new AxesHelper(250);
        // this.scene.add(axis);
        // 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();
    }
}