學習Three.js——材質(Material)
材質
材質的種類
MeshBasicMaterial:基礎材質，給幾何體賦予一種簡單的顏色，不受光源的影響
MeshDepthMaterial:深度材質，這種材質根據攝像機到網格的距離給網格上色，常用於得到物體逐漸原理視線消失的效果
MeshNormalMaterial:法向材質，這種材質根據每個面的法向量而附上不同的顏色
MeshFaceMaterial:面材質，可以為幾何體的不同面賦予不同的材質
MeshLambertMaterial:Lambert材質，一種表面粗糙，比較暗淡的材質
MeshPhongMaterial:一種比較光亮的材質
ShaderMaterial
LineBasicMaterial:直線基礎材質，用於建立著色的直線
LineDashMaterial:和直線基礎材質一樣，不過可以建立一種虛線的效果
材質的共有屬性
id:識別符號，用於識別材質，第一個材質為0，第二個為1，以此類推
name:名稱，也是用於識別材質
opacity:不透明度，1表示不透明，0表示完全透明，和transparent配合使用
transparent:是否使用透明，當設定為true時opacity才有效
visible:是否可見，設定為false則看不見物體
side:用於設定幾何體那一面應用材質，THREE.FrontSide表示外側，THREE.BackSize表示內側，THREE.DoubleSide表示兩側，但是比較耗資源
needsUpdate:是否需要更新，若設定為true，下一次渲染則使用新的材質，並重新設定為false
MeshBasicMaterial
基礎材質的顏色只與初始化定義的顏色有關，不受光照的影響。
基礎材質有自己的特有屬性。
color:顏色
wireframe:是否顯示線框
wireframeLinewidth:線框線的寬度
shading:定義著色的方式，可選的值有
-THREE.SmoothShading:平滑過渡，看不到面和麵之間的連線
-THREE.NoShading:不使用著色
-THREE.FlatShading:
vertexColors
-THREE.NoColors:沒有顏色
-THREE.VertexColors:使用geometry幾何體的顏色
fog:是否受全域性霧化的影響
MeshDepthMeterial
這種材質的外觀不受光照的影響，而是由物體到攝像機的距離決定，通過這種材質和其他材質組合，可以創造出逐漸消失的效果。
它只有兩種屬性
wireframe:是否顯示線框
wireframeLineWidth:控制線框的寬度
效果
MeshNormalMaterial
這種材質根據每個面的法向量不同而對該面使用不同的材質
它有三種屬性：
wireframe:是否顯示線框
wireframeLineWidth:控制線框的寬度
shading:選擇不同的著色方式，可以選擇THREE.FlatingShading(平面著色)和THREE.SmoothShading(平滑著色)
THREE.FlatingShading:
THREE.SmoothFlating
THREE.MeshFaceMaterial
這不是一種材質，而是為每個面分配不同的材質
用法
var group = new THREE.Mesh();
// add all the rubik cube elements
var mats = [];
mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));
mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));
mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));
mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));
mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));
mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));
mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));
mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));
var faceMaterial = new THREE.MeshFaceMaterial(mats);
for (var x = 0; x < 3; x++) {
for (var y = 0; y < 3; y++) {
for (var z = 0; z < 3; z++) {
var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);
var cube = new THREE.Mesh(cubeGeom, faceMaterial);
cube.position.set(x * 3 - 3, y * 3, z * 3 - 3);
group.add(cube);
}
}
}
scene.add(group);
注意這裡使用了群(group)，將小立方體加入群組成一個大立方體。
另外系統會為每個面分配對應的材質(materialIndex),也可以自己手動為每個面定義材質。
效果圖：
MeshLambertMaterial
一種表面比較暗淡的材質
ambient:環境的環境色，好像沒什麼用
emissive:材質發射的顏色，用於創造一種不受光源影響的顏色
wrapAround:此屬效能夠使得陰影變得柔和和分佈均勻
wrapRGB:用於控制光下降的速度
效果：
MeshPhongMaterial
一種比較光亮的材質，屬性有
ambient:環境光，好像沒什麼用
emissive:材質發出來的光，不受外部光照的影響
specular:用於設定材質光亮程度和高光部分的顏色
shininess:設定材質高光部分的亮度
metal:使得物體看起來更像金屬
wrapAround、wrapRGB:和上面的一樣
效果：
MeshShaderMaterial
略
LineBasicMaterial
用於渲染線段的材質，一些基本屬性：
color:線段的顏色，如果定義了vertexColors，那麼該屬性將被忽略
vertexColor:線段端點的顏色，將其設定為THREE.VertexColors則可以根據colors陣列為每個端點分配顏色，同時決定了線段的顏色
lineWidth:線段的寬度
fog:是否受全域性霧化的影響
用法：
var points = gosper(4, 60);//得到一條gosper曲線的各個頂點，暫時沒搞懂這個函式
var lines = new THREE.Geometry();
var colors = [];
var i = 0;
points.forEach(function (e) {
lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
colors[i] = new THREE.Color(0xffffff);//為每個端點都分配一個顏色，這裡使用HSL色彩空間
colors[i].setHSL(e.x / 100 + 0.5, ( e.y * 20 ) / 300, 0.8);
i++;
});
lines.colors = colors;
var material = new THREE.LineBasicMaterial({
opacity: 1.0,
linewidth: 1,
vertexColors: THREE.VertexColors
});
var line = new THREE.Line(lines, material);
效果
LineDashMaterial
和前者差不多，但是可以繪製曲線，除了有以上的屬性外，還有
scale:縮放dashSize和gapSize
dashSize:實線部分的長度
gapSize:虛線部分的長度
效果：
