three.js 镜头光晕

介绍

镜头光晕效果, 通过光晕贴图实现

镜头光晕 Lensflare

Lensflare (opens new window) 镜头光晕和LensflareElement 镜头光晕实例, 可以实现一个光晕效果

• Lensflare和LensflareElement需要单独导入
• Lensflare是一个Object3D (opens new window)
• Lensflare不能共用, 如果多个物体需要镜头光晕, 那就需要创建多个Lensflare镜头光晕

镜头光晕实现步骤:

1. 导入Lensflare和LensflareElement, three.js核心代码不包含镜头光晕

2. 通过TextureLoader贴图加载器加载光晕贴图

3. 创建镜头光晕Lensflare, 通过.addElement方法传入LensflareElement 镜头光晕实例和相关设置

4. 将创建好的镜头光晕,.add()添加到需要的物体上

具体实现代码

创建两个Lensflare镜头光晕, 分别添加到: 镜头光晕1和镜头光晕2

• 因为Lensflare是一个Object3D, 可以设置 .visible (opens new window)来设置显示与隐藏, 默认是true显示镜头光晕

// 导入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
  }
}