這節我們淺談一下THREE的材質。材質就是物體的面板，決定物體的表面。THREE的材質有很多種，他們有的和到相機的距離有關，有的和麵的法向量角度有關，有的不受光照的影響，有的受到光照的影響會產生反射效果或者漫反射效果，也可以將多個材質合成一個。
1. THREE.MeshBasicMaterial(基礎材料)。
2. THREE.MeshDepthMaterial(深度材料)。
3. THREE.MeshNormalMaterial(法向材料)。
4. THREE.MeshFaceMaterial(面材質)。
5. THREE.MeshLambertMaterial(Lambert材質)。
6. THREE.MeshPhongMaterial(Phong材質)。
7. THREE.LineBasicMaterial(線性基礎材質)。
8. THREE.LineDashMaterial(虛線材質)。
接下來我們詳細的講一下這些材質。

1.THREE.MeshBasicMaterial(基礎材料)

基礎材質非常簡單，它不受光照影響。它常用的一些屬性如下：
- color 材質的顏色
- wireframe 設定該屬性可以將材質設定成線框
- wireframeLinewidth 線框中線的寬度
- wireframeLineLinecap 線框線段端點如何顯示

var mesh = new THREE.MeshBasicMaterial({color: 0xffaa00})

2.THREE.MeshDepthMaterial(深度材料)

這種材質不受光照影響，同時也不能設定材質顏色，它只與物體到攝像機的距離有關，越遠越暗。它常用的一些屬性如下：
- wireframe 是否顯示線框
- wireframeLineWidth 線框線的寬度

var material = new THREE.MeshDepthMaterial();

3.THREE.MeshNormalMaterial(法向材料)

這種材料表面顏色只與面的法向量方向決定。它常用的一些屬性如下：
- wireframe 設定該屬性可以將材質設定成線框
- wireframeLinewidth 線框中線的寬度
- shading 設定著色方法FlatShading表示平面著色SmoothShading表示平滑著色

var material = new THREE.MeshNormalMaterial();

4.THREE.MeshFaceMaterial(面材質)

這是一個材料容器，他可以為每個面設定不同的材料。直接看程式碼：

var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
materialArray.push(new THREE.MeshPhongMaterial({color: 0x0051ba}));
materialArray.push(new THREE.MeshNormalMaterial({color: 0xffd500}));
materialArray.push(new THREE.MeshLambertMaterial({color: 0xff5800}));
materialArray.push(new THREE.MeshNormalMaterial({color: 0xC41E3A}));
materialArray.push(new THREE.MeshNormalMaterial({color: 0xffffff}));
var faceMaterial = new THREE.MeshFaceMaterial(materialArray);
var cubeGeom = new THREE.BoxGeometry(3, 3, 3);
var cube = new THREE.Mesh(cubeGeom, faceMaterial);

我們給一個正方體的六個面設定了六個不同的材質。

5.THREE.MeshLambertMaterial(Lambert材質)

它是一種高階材質，可以對光源產生反應建立不光亮的表面。除了上面材料的屬性外，還有一些獨特的屬性，
- ambient 這是材料的環境色，這個顏色會與環境光源疊加的顏色相乘，預設為白色。
- emissive 這是材料的發射顏色，就是不受光照時發出的顏色，預設為黑色。
- wrapAround 開啟此屬性會讓陰影變得柔和，分佈均勻。
- wrapRGB 開啟此屬性，可以使用THREE.Vector3來控制光下降的速度。

var material = new THREE.MeshLambertMaterial({color: 0x7777ff});

6.THREE.MeshPhongMaterial(Phong材質)

這個材料除了MeshLambertMaterial屬性外還有一些額外的出行
- specular 指定光照高亮部分的顏色，如果這個顏色與color屬性的顏色相同，得到一個類似金屬的材質。
- shininess 高亮部分的亮度。
- metal 開啟後使材質更像金屬。

var material = new THREE.MeshPhongMaterial({color: 0x7777ff});

這個效果非常好

7.THREE.LineBasicMaterial(線性基礎材質)

這個材質可以為線設定材質，屬性為
- color 定一線的顏色 如果指定vertexColors，這個屬性會被忽略
- linewidth 該屬性定義顯得寬度
- linecap 該屬性定義線端點如何顯示
- linejoin 該屬性定義線連線點如何顯示
- vertexColors 將該屬性設定成THREE.VertexColors值，可以給每一個定點設定顏色
- fog 設定是否霧化（需開啟全域性霧化）。

var material = new THREE.LineBasicMaterial({
    opacity: 1.0,
    linewidth: 1,
    vertexColors: THREE.VertexColors
});

8.THREE.LineDashMaterial(虛線材質)

該屬性和線性基礎材質幾乎相同，額外的屬性為
- scale 縮放dashSize和gapSize
- dashSize 虛線段長度
- gapSize 虛線空隙長度

var material = new THREE.LineDashedMaterial({
    vertexColors: true,
    color: 0xffffff,
    dashSize: 1,
    gapSize: 1,
     scale: 4
});

以上就是THREE的材質，具體如何使用我們日後在實戰專案中講解。
轉載請註明原文地址 郭志強的部落格

&n