1. 程式人生 > >three.js入門系列之光和陰影

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

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

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

一、材料

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

image.png

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

二、檢驗

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

image.png

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

image.png

此時,頁面顯示如下:

image.png

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

image.png

再換一種材料MeshLambertMaterial:

image.png

三、陰影

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

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

image.png

結果:

image.png

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

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

image.png

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

image.png

物體的陰影相關屬性:

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

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

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

image.png

最終:

image.png