【Three.js】第十五章 Lights 灯

最新推荐文章于 2025-06-11 16:15:05 发布

顽皮宝

最新推荐文章于 2025-06-11 16:15:05 发布

阅读量1.5k

点赞数 25

CC 4.0 BY-SA版权

分类专栏： Three.js 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/m0_68324632/article/details/131152003

本文详细介绍了Three.js中的环境光(AmbientLight)、定向光(DirectionalLight)、点光源(PointLight)、半球光(HemisphereLight)、聚光灯(SpotLight)、矩形区域光(RectAreaLight)以及它们在创建逼真场景中的应用。同时探讨了光照对性能的影响，包括烘焙(Baking)和辅助工具的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

15. Lights 灯

介绍

正如我们在上一课中看到的，添加灯光就像添加网格一样简单。您使用适当的类实例化一盏灯，然后将其添加到场景中。
有多种类型的光，我们已经发现了AmbientLight和PointLight。
在本课中，我们将详细了解所有不同的类以及如何使用它们。

设置

启动器中已经设置了一个场景（包括一个球体、一个立方体、一个环面和一个作为地板的平面），但如果您想自己写代码渲染联系，请自行创建项目尝试。
因为我们要使用灯光，所以我们必须使用对灯光有反应的材料。我们本可以使用MeshLambertMaterial、MeshPhongMaterial或MeshToonMaterial，但我们将使用 MeshStandardMaterial，因为它是我们在上一课中看到的最真实的材料。材质还减少了roughness值到0.4，去查看灯光的反射。

一旦启动器开始工作，从头开始我们移除AmbientLight和PointLight两个光源。你应该得到一个渲染结果：纯黑色的幕布，里面什么都看不到。

环境光 AmbientLight

AmbientLight在场景的所有几何体上应用全向照明。第一个参数是color，第二个参数是intensity。至于材质，可以在实例化时直接设置属性，也可以在实例化后更改：

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(ambientLight)

// Equals
const ambientLight = new THREE.AmbientLight()
ambientLight.color = new THREE.Color(0xffffff)
ambientLight.intensity = 0.5
scene.add(ambientLight)

就像我们课程中对材料所做的操作那样，您可以将属性添加到调试 UI。我们不会在本课的其余部分调试新的属性，但如果您想简化测试，请随时添加调整：

gui.add(ambientLight, 'intensity').min(0).max(1).step(0.001)

如果您只有一个AmbientLight，您将获得与 MeshBasicMaterial相同的效果，因为几何体的所有面都将被均匀照亮。
在现实生活中，当你照亮一个物体时，由于光线会在墙壁和其他物体上反射，因此与光相对的物体的侧面不会完全变黑。出于性能原因，Three.js 不支持光反射，但您可以使用昏暗的