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" />🧪 八、实战注意事项 ⚠️
-
必须开启支持光照的材质：
使用MeshStandardMaterial或MeshPhysicalMaterial才能看到效果。 -
光源朝向重要！
一定记得使用light.lookAt(...)指定目标方向。 -
适当调整 intensity：
RectAreaLight 发散面积大，通常需要更高的强度，比如 5~20。 -
不要忘记初始化 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/ | 社区精选文章与项目实战合集 🧪 |