当前位置：首页 > web >正文

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

web 2025/5/8 7:48:13

一、展示图效果示意 🎨

下图展示了一个典型的 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.WebGLRendereronMounted(() => {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).textureconst probe = LightProbeGenerator.fromCubeTexture(envMap)scene.add(probe)scene.environment = envMapconst 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 教程