寫在前面
這篇博客和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
本人的知識有限，如果本節內容有錯誤和不合理之處，還請朋友們多多指出，我會虛心接受每一個建議。