16.Three.js 中的 RectAreaLight 全面详解 + Vue 3 实战案例

😎 本文将带你从零了解 THREE.RectAreaLight 的工作原理、使用方式、注意事项，并在最后用 Vue 3 的 Composition API 封装一个完整的光源演示组件，一站式搞懂矩形区域光的魅力 💡！

---

🖼️ 一、展示图效果示意（先睹为快）

建议你用一个简单的立方体 + 平面 + RectAreaLight 来观察柔和的边缘阴影和打光效果 💫：

• ✅ 光线从矩形区域面板中均匀发射

• ✅ 立方体产生柔和阴影

• ✅ 可以使用辅助工具查看朝向

📷 示例图：

🔧 使用了：MeshStandardMaterial、RectAreaLightHelper、RectAreaLightUniformsLib 等。

---

🧠 二、什么是 RectAreaLight？

RectAreaLight（矩形区域光）是一种面光源，可以从一个矩形面板均匀发出光线，具有非常真实的软阴影效果和柔和照明表现，常用于：

• 模拟摄影棚灯光 💡

• 制作屏幕、灯管等矩形发光体 ✨

• 渲染高质量可控光照环境（尤其是室内设计）🛋️

✅ 它不像点光源那样从一个点发射光线，而是从一个平面发射多个方向的光线。

---

📦 三、RectAreaLight 的基本语法

const light = new THREE.RectAreaLight(color, intensity, width, height); 
scene.add(light);

📌 参数解释

参数名	类型	说明
color	Color	光的颜色
intensity	number	光强，默认为 1.0
width	number	矩形光源宽度
height	number	矩形光源高度

⚠️ 注意：要看到效果，必须开启光照支持的材质，比如 MeshStandardMaterial 或 MeshPhysicalMaterial。

---

🔧 四、RectAreaLight 需要引入额外模块

为了让 RectAreaLight 正常工作，你必须手动导入并使用 RectAreaLightUniformsLib 👇

import { RectAreaLightUniformsLib } from 'three/examples/jsm/lights/RectAreaLightUniformsLib.js';
RectAreaLightUniformsLib.init();

🚨 重要提醒：不引入它你会发现光源不会生效！

---

🎨 五、RectAreaLight 可配属性

light.position.set(x, y, z); 
light.rotation.set(x, y, z); 
light.lookAt(target);

属性	说明
.width	控制光照矩形的宽度 🔍
.height	控制光照矩形的高度 🔍
.intensity	光照强度调整 💥
.color	发出的光颜色 🎨
.position	光源的位置 💫
.lookAt()	用于设置光照朝向 👀

---

🧰 六、RectAreaLight 的辅助工具

为了调试光照，可以使用 RectAreaLightHelper：

import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js';
const helper = new RectAreaLightHelper(light);
scene.add(helper);

✅ 非常有用！可以清楚看见光照的实际朝向和作用区域。

---

💡 六、Vue3 Composition API 示例（完整封装）

让我们用 Vue 3 Composition API 封装一个 RectAreaLight 实例吧！🎯

📁 目录结构建议

components/
├─ lights/
│  └─ RectAreaLight.vue

📄 RectAreaLight.vue

<script setup lang="ts">
import * as THREE from 'three';
import { onMounted } from 'vue';
import { RectAreaLightUniformsLib } from 'three/examples/jsm/lights/RectAreaLightUniformsLib.js';
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js';const props = defineProps<{scene: THREE.Scene;
}>();onMounted(() => {// 初始化Uniform库RectAreaLightUniformsLib.init();const rectLight = new THREE.RectAreaLight(0xffffff, 3, 4, 2);rectLight.position.set(5, 5, 5);rectLight.lookAt(0, 0, 0);// 添加到场景中props.scene.add(rectLight);// 可选：添加辅助工具const helper = new RectAreaLightHelper(rectLight);props.scene.add(helper);
});
</script><template><!-- 该组件不渲染任何DOM，仅作为光源配置用 -->
</template>

✅ 使用方式：

<RectAreaLight :scene="scene" />

---

🧪 八、实战注意事项 ⚠️

1. 必须开启支持光照的材质：
   使用 MeshStandardMaterial 或 MeshPhysicalMaterial 才能看到效果。

2. 光源朝向重要！
   一定记得使用 light.lookAt(...) 指定目标方向。

3. 适当调整 intensity：
   RectAreaLight 发散面积大，通常需要更高的强度，比如 5~20。

4. 不要忘记初始化 UniformsLib！ 否则一片漆黑！

---

🎁 九、展示总结

优点 ✅	缺点 ⚠️
柔光自然、真实感强 👍	需要手动初始化 UniformLib
可控范围广、角度精准 🔍	光照计算相对复杂，性能开销稍大

---

📚 十、推荐阅读 & 资源

名称	链接	说明
Three.js 官方文档：RectAreaLight	https://threejs.org/docs/#api/en/lights/RectAreaLight	官方API说明，必读基础 🔖
RectAreaLightUniformsLib 示例	https://threejs.org/examples/#webgl_lights_rectarealight	官方使用案例，查看光照效果演示 💡
RectAreaLightUniformsLib 源码	RectAreaLightUniformsLib.js	初始化 shader uniform 的工具库源码 🔧
RectAreaLightHelper 源码	RectAreaLightHelper.js	可视化辅助工具源码，适合调试 👀
Three.js Journey（付费英文）	Three.js Journey — Learn WebGL with Three.js	最权威的 Three.js 实战课程之一，讲解深入细致，含光照篇章
Vue + Three.js 教程	https://github.com/fritx/vue-threejs	使用 Vue 封装 Three.js 的社区实践，适合参考组合式写法 🎯
中文Three.js教程	https://www.webgl3d.cn/Three.js/	全中文文档教程，包含灯光、材质、辅助线等内容 📘
open-ended.dev Three.js 系列	https://open-ended.dev/tags/threejs/	社区精选文章与项目实战合集 🧪