1. 程式人生 > >three.js入門系列之材質

three.js入門系列之材質

一、基礎網孔材料

MeshBasicMaterial

image.png

圖示(光源是(0,1,0)處的點光源):

image.png

二、深度網孔材料

MeshDepthMaterial

(由於只是改了材料名,程式碼將不重複貼出)

image.png

在這裡,有必要提一下遠景相機的屬性了:

image.png

image.png

大概就是這麼個意思,下面,我們把上述兩個引數改為3,4看一下效果:

image.png

為什麼要提一下相機的引數呢,因為該種材料的物體,離相機越近就越顯示白色,越遠的話則顯示黑色,所以初始化的時候,相機看得非常遠(0.03,400)所以看到的全是黑色的正方體邊框,接下來,我們調整一下相機的視椎體近面(near)和遠面(far)兩個屬性值為(2,20):

image.png

三、聯合材質

顧名思義,就是一個物體包含了多種材質的特性:

image.png

拓展類的新增後續將會貼出方法,請看效果先:

image.png

很顯然,上述聯合材質繼承了之前提到的兩種材質所擁有的特性。

四、法向量網孔材料

MeshNormalMaterial

image.png效果如下:

image.png

五、蘭伯特網孔材料

MeshLambertMaterial(用於暗淡、不光亮表面)

image.png

六、待續