15.Three.js PointLight 知识详解 + Vue3 实战案例

本文将带你全方位了解 Three.js 中的 PointLight 点光源，包括它的属性、使用方式、配套工具以及如何在 Vue 3 中使用 Composition API 构建一个完整可视化场景 ✨！

---

一、什么是 PointLight？

PointLight 是 Three.js 中一种 点光源，从一个点向所有方向发射光线，类似生活中的 灯泡。

const light = new THREE.PointLight(color, intensity, distance, decay);

---

二、构造函数参数详解

参数名	类型	默认值	含义
color	Color	0xffffff	光的颜色
intensity	Number	1	光照强度（越大越亮）
distance	Number	0	光线照射距离，0表示无限远
decay	Number	1	衰减系数，代表光强随距离减弱程度（需开启 physicallyCorrectLights）

注意：distance 和 decay 共同控制光线的衰减效果，模拟真实场景下的照明逻辑。

---

️ 三、常用属性

属性名	类型	含义
.power	Number	光源功率（单位流明），power = intensity × 4π
.decay	Number	衰减系数（见上）
.distance	Number	最大照射距离
.castShadow	Boolean	是否投射阴影（默认为 false）
.shadow	LightShadow	阴影属性配置对象

---

四、辅助工具：PointLightHelper

const helper = new THREE.PointLightHelper(pointLight, sphereSize, color); scene.add(helper);

✅ 可视化点光源位置和范围，调试好帮手！

---

五、完整基础示例

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
pointLight.castShadow = true;
scene.add(pointLight);

const helper = new THREE.PointLightHelper(pointLight);
scene.add(helper);

---

六、Vue 3 + Three.js Composition API 实战案例

创建一个 Vue 3 组件，渲染立方体并加上点光源

---

七、PointLight 常见使用场景

场景	说明
局部照明	如桌面台灯、手电筒效果等
多光源构建氛围灯光	和 AmbientLight/SpotLight 搭配使用
与材质联动	MeshStandardMaterial/MeshPhysicalMaterial 支持真实光照模型

---

八、性能优化建议

• ✅ 尽量控制光源数量（尤其是投影）

• ✅ 减少阴影贴图大小或频率

• ✅ 使用 light.visible = false 动态关闭不必要光源

• ✅ 结合 LightHelper 可视化调试区域，精准控制距离和衰减范围

---

✅ 总结一下！

通过本文你学到了：

• PointLight 的构造参数与作用 ️

• 光源属性与阴影配置 ☀️

• Vue 3 Composition API + Three.js 实战

• 优化建议与常见问题 ⚙️

---

下一篇预告：RectAreaLight 高级光源实战 + 动态移动效果实现

如果你觉得这篇文章对你有帮助，记得 点赞 + 收藏 + 评论 支持我写下去 ！