18.Three.js中AmbientLightProbe 环境光探针详解（含 Vue 3 实战示例）-CSDN博客

本文链接：https://blog.csdn.net/Miller777_/article/details/147783000

在 Three.js 的光照系统中，AmbientLightProbe 是一个不太常见但非常有用的光源类型。相比于 AmbientLight 的简单均匀照明，AmbientLightProbe 更真实地模拟了来自各个方向的环境光照。

🧠 关键词：THREE.AmbientLightProbe、环境光探针、立体光照、Vue3 Composition API、真实感照明

🌍 一、AmbientLight vs AmbientLightProbe

光照类型	特性	是否有方向	常见用途
`AmbientLight`	简单均匀照亮所有物体	❌	场景基础照明
`AmbientLightProbe`	模拟各个方向来的环境光	✅（但不可控制方向）	与环境贴图结合，提高真实感

🔍 AmbientLightProbe 基于三阶球谐函数（SH）采样环境贴图（environment）中的光照信息来创建一个更加真实的环境光。

🔧 二、如何使用 AmbientLightProbe？

✅ 基本用法：

const lightProbe = new THREE.AmbientLightProbe(0xffffff, 1); scene.add(lightProbe);

但是，仅仅添加 AmbientLightProbe 并不会有特别的视觉变化❗️——它需要配合 WebGLRenderer.environment（环境贴图）或 PMREMGenerator。

📦 搭配 PMREM 示例（最常见）

const pmremGenerator = new THREE.PMREMGenerator(renderer);
const envMap = pmremGenerator.fromScene(yourEnvironmentScene).texture;

scene.environment = envMap;

const lightProbe = new THREE.AmbientLightProbe();
scene.add(lightProbe);

🎓 三、源码深入理解 AmbientLightProbe

AmbientLightProbe 实现于 src/lights/AmbientLightProbe.js，是基于 LightProbe 的封装：

class AmbientLightProbe extends LightProbe {
  constructor(color = 0xffffff, intensity = 1) {
    super();
    this.sh.fromArray( [
      0.282095 * intensity * color.r,
      0.282095 * intensity * color.g,
      0.282095 * intensity * color.b,
      // 其余六项为0
    ] );
  }
}

🧠 知识点解释：

this.sh 是 SphericalHarmonics3 的一个对象，用来存储球谐函数数据。
只对第一个 SH 系数（代表均匀分布）赋值，其余方向光为 0。

🛠️ 四、何时使用 AmbientLightProbe？

🎯 推荐使用场景：

使用了真实环境贴图（如 .hdr 文件）。
想模拟高质量的环境光，不只是一团白光。
需要支持 MeshStandardMaterial、MeshPhysicalMaterial 的高级光照。

🧪 五、🌈 Vue 3 + Three.js Composition API 示例

以下是一个使用 Vue 3 Composition API 的示例，演示如何使用 AmbientLightProbe 🌟

📁 文件结构建议：

📦 src/
 ┣ 📂 components/
 ┃ ┗ 🧩 AmbientLightProbeScene.vue
 ┗ 📜 main.js

🔹 `AmbientLightProbeScene.vue`

<template>
  <div ref="container" class="w-full h-full"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as THREE from 'three'

const container = ref<HTMLDivElement | null>(null)

onMounted(() => {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.z = 3

  const renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)
  container.value?.appendChild(renderer.domElement)

  // 📦 几何体 + 材质
  const geometry = new THREE.SphereGeometry(1, 64, 64)
  const material = new THREE.MeshStandardMaterial({ metalness: 0.6, roughness: 0.4 })
  const sphere = new THREE.Mesh(geometry, material)
  scene.add(sphere)

  // 🔆 环境贴图加载
  const pmremGenerator = new THREE.PMREMGenerator(renderer)
  pmremGenerator.compileEquirectangularShader()

  const rgbeLoader = new THREE.RGBELoader()
  rgbeLoader.load('/env.hdr', (texture) => {
    const envMap = pmremGenerator.fromEquirectangular(texture).texture
    scene.environment = envMap
    texture.dispose()

    // 🌟 添加环境光探针
    const probe = new THREE.AmbientLightProbe()
    scene.add(probe)

    render()
  })

  // ✨ 灯光（可选）
  const dirLight = new THREE.DirectionalLight(0xffffff, 0.5)
  dirLight.position.set(3, 3, 3)
  scene.add(dirLight)

  const render = () => {
    renderer.render(scene, camera)
  }

  const animate = () => {
    requestAnimationFrame(animate)
    sphere.rotation.y += 0.01
    render()
  }

  animate()
})
</script>

<style scoped>
div {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

🎉 效果说明：