three.js入門系列之光和陰影


初中物理教過我們鏡面反射和漫反射,這是由於物體的材質直接導致的。

在three.js中,由於物體的材料不同,對於光源的反應也是不一樣的,下面就讓我們一探究竟。

一、材料

據Three.js中描述,有兩種材料能對光源有所反應:

就是圖中箭頭標識的兩種材料。

二、檢驗

編輯前例,設置光源位置:

如圖所示,我們在(1,1,0)點放置了一個光源,但是此時,三個物體的材質都是MeshNormalMaterial:

此時,頁面顯示如下:

三個物體較之前並無任何改變,因為材料的緣故,對光源並無任何反應,下面我們來改變物體的材質為MeshPhongMaterial:

再換一種材料MeshLambertMaterial:

三、陰影

three.js中陰影形成有3個條件:光源、物體、地面。

首先光源投射到物體上(特殊材質),物體產生的陰影再投射到地面(一種平面的物體)。

結果:

我們可以手動設置地面的大小(10,10);

接下來,為渲染器設置允許陰影映射屬性為true,因為渲染陰影需要大量計算資源,所以默認是關閉的:

接下來就是光的設置(類型和投射陰影屬性):

物體的陰影相關屬性:

因為陰影要投射到“地面”上,所以“地面”這個物體的receiveShadow屬性為true;

因為想要物體要產生陰影,那么該物體的castShadow屬性為true;

所以並且不要忘記了,無論是接收陰影還是產生陰影,對該物體的材質都是由要求的,前面已經提到過,所以我們添加了3個物體的陰影相關屬性:

最終:



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM