three.js 镜头光晕

// 导入three.js
import * as THREE from 'three'
// 导入镜头光晕
import {
  Lensflare,
  LensflareElement,
} from 'three/examples/jsm/objects/Lensflare.js'
// 加载镜头光晕贴图
import lensflare from '@/assets/car/lensflare.jpg'

export class ChangeLensflare {
  // 创建纹理加载器
  textureLoader = new THREE.TextureLoader()

  // 镜头贴图
  lensFlareImage!: THREE.Texture

  // 镜头光晕1
  lensflare1!: Lensflare

  // 镜头光晕2
  lensflare2!: Lensflare

  // 一个组
  carGroup!: THREE.Group

  // 创建镜头光晕
  createLensflare = async () => {
    // 加载镜头光晕贴图
    this.lensFlareImage = await this.textureLoader.loadAsync(lensflare)

    // 设置镜头光晕贴图的编码格式
    this.lensFlareImage.encoding = THREE.sRGBEncoding

    // 创建镜头光晕1
    this.lensflare1 = new Lensflare()

    // 设置光晕1的贴图
    this.lensflare1.addElement(
      new LensflareElement(this.lensFlareImage, 512, 0)
    )

    // 设置光晕1的渲染顺序
    this.lensflare1.renderOrder = 2

    // 创建镜头光晕2
    this.lensflare2 = new Lensflare()

    // 设置光晕2的渲染顺序
    this.lensflare2.renderOrder = 2

    // 设置光晕2的贴图
    this.lensflare2.addElement(
      new LensflareElement(this.lensFlareImage, 512, 0)
    )

    // 设置光晕位置
    this.carGroup.getObjectByName('镜头光晕1')?.add(this.lensflare1)
    this.carGroup.getObjectByName('镜头光晕2')?.add(this.lensflare2)

    // 默认隐藏镜头光晕, Object3D类型
    this.lensflare1.visible = false
    this.lensflare2.visible = false
  }
}