17.Three.js 光照系统之《LightProbe》详解指南（含 Vue 3示例）

一、展示图效果示意 🎨

下图展示了一个典型的 LightProbe 使用场景：
球体在环境贴图和 LightProbe 配合下实现了逼真的环境光反射和柔和阴影：

---

二、LightProbe 是什么？🤔

LightProbe 是一种 基于环境贴图采样的间接光照。相比于直接光源（如 PointLight、DirectionalLight），它更侧重于提供 环境光（Ambient）和间接光照效果，常与 HDR 环境图或 PMREMGenerator 联合使用。

✨ 核心特性：

• 📷 使用环境贴图采样 来计算光照影响

• 🧠 对物体不产生直接阴影

• 🌎 常用于室内环境、全局光照等高级光效

---

三、应用场景 📌

场景类型	使用 LightProbe 的优势 🪄
逼真室内渲染	模拟真实世界中墙壁、物体反射的间接光照
HDR 场景环境	利用 PMREMGenerator + LightProbe 落地真实环境光
节省性能	无需计算阴影，适合低性能设备的间接光模拟

---

四、与 AmbientLight 的区别对比 🔍

特性	AmbientLight	LightProbe
光照方向性	❌ 无方向性	✅ 有方向性（基于环境图）
强度控制	✅ 有	✅ 有
对场景影响	简单均匀光照	更真实的光照分布
推荐用途	低配环境补光	高级环境光，配合 HDR 使用

---

五、如何创建 LightProbe 📦

import { LightProbe } from 'three';

const lightProbe = new LightProbe();
scene.add(lightProbe);

不过 LightProbe 本身不会起作用，除非你使用了 PMREMGenerator 生成的环境贴图：

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { PMREMGenerator } from 'three';

const loader = new RGBELoader();
loader.load('environment.hdr', (hdrEquirect) => {
  const pmremGenerator = new PMREMGenerator(renderer);
  const envMap = pmremGenerator.fromEquirectangular(hdrEquirect).texture;

  const lightProbe = LightProbeGenerator.fromCubeTexture(envMap);
  scene.add(lightProbe);

  scene.environment = envMap;
});

---

六、常用 API 🌐

属性 / 方法	说明
.intensity	控制光照强度（默认值 1）💡
.sh.coefficients	SH 光照系数（高级用法）📈
LightProbeGenerator	用于从环境贴图生成 LightProbe 的工具 🧪

---

七、使用 LightProbeGenerator 示例 🧪

import { LightProbeGenerator } from 'three/examples/jsm/lights/LightProbeGenerator.js';

const probe = LightProbeGenerator.fromCubeTexture(envMap);
scene.add(probe);

---

八、Vue 3 Composition API 实战 🎮

<script setup lang="ts">
import { onMounted } from 'vue'
import * as THREE from 'three'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
import { PMREMGenerator } from 'three'
import { LightProbeGenerator } from 'three/examples/jsm/lights/LightProbeGenerator'

let scene: THREE.Scene
let camera: THREE.PerspectiveCamera
let renderer: THREE.WebGLRenderer

onMounted(() => {
  init()
})

function init() {
  scene = new THREE.Scene()

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 1, 3)

  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  const loader = new RGBELoader()
  const pmremGen = new PMREMGenerator(renderer)

  loader.load('/assets/env.hdr', (hdrEquirect) => {
    const envMap = pmremGen.fromEquirectangular(hdrEquirect).texture

    const probe = LightProbeGenerator.fromCubeTexture(envMap)
    scene.add(probe)

    scene.environment = envMap

    const geo = new THREE.SphereGeometry(1, 64, 64)
    const mat = new THREE.MeshStandardMaterial({ metalness: 1, roughness: 0.2, envMap })
    const mesh = new THREE.Mesh(geo, mat)
    scene.add(mesh)

    animate()
  })
}

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
</script>

<template>
  <div class="w-full h-screen overflow-hidden"></div>
</template>

---

九、常见问题 FAQ 🧠

❓ 为什么我添加了 LightProbe 却没效果？

LightProbe 依赖 HDR 或 CubeTexture 环境贴图，需要配合 PMREMGenerator 和 LightProbeGenerator 使用。

❓ LightProbe 和环境贴图有什么关系？

LightProbe 会从环境贴图采样生成球谐光照系数，提供模拟真实反射的间接光。

---

🔚 十、推荐阅读 & 资源 📚

名称	链接	说明
LightProbe 官方文档	🌐 官方 API 说明
LightProbe 示例	🔬 官方场景演示
LightProbeGenerator 源码	🔧 光照采样生成器源码
three.js Journey（英文）	🎓 权威 Three.js 教程

---

📝 结语

LightProbe 是构建真实感场景的重要一环，尤其在使用 HDR 贴图时更是锦上添花！🎉掌握它，就掌握了间接光照与环境映射的核心力量。希望本文能帮你快速上手并深入理解！🔥