Three.js实现台灯的灯光效果

写在前面

这篇博客和Demo早就想写了，简单版的Demo早就完成了，博客最近才写。这个案例的由来是有一天晚上从实验室回宿舍，看到街边的路灯，便想实现一下。结果便了无音讯了（哈哈哈嗝.gif），前两天在一个webgl交流群里，有个人发了一张室内装修渲染图，我看到了里边的台灯，便想起了这个坑还没有填，最后便有了这个案例。

台灯效果类似于这样的，主要是实现台灯下的灯光效果。

正文

通过查阅资料，发现了Three中的RectAreaLight属性，意思就是区域光，面积光等。

构造函数

        THREE.RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )；

参数解释

• color：灯光颜色；
• intensity：灯光强度；
• width：区域光的宽度；
• height：区域光高度；

实现代码

//创建区域光 
let rectLight = new THREE.RectAreaLight(0xffffff,1500,5,5);
//设置区域光位置
rectLight.position.set(0,20,30);
//设置区域光旋转角度
rectLight.rotation.x = 0.5*Math.PI;
//将区域光添加进场景
scene.add(rectLight);
//创建区域光辅助器
let rectLightHelper = new THREE.RectAreaLightHelper(rectLight,0xff0000);
//将区域光辅助器添加进场景
scene.add(rectLightHelper);

注意

RectAreaLight没有影子效果，如果需要实现影子效果应添加其他光源。RectAreaLight其实角度是朝向Z轴正方向，需要进行旋转得到正确灯光效果。

案例运行效果

 

案例展示地址：http://47.106.185.140//RectAreaLightDemo/RectAreaLightDemo.html

案例源码地址：https://github.com/hu2878375578/ThreeJSDemo/tree/master/RectAreaLightDemo

本人的知识有限，如果本节内容有错误和不合理之处，还请朋友们多多指出，我会虚心接受每一个建议。