Three.js數組材質、材質索引materialIndex

數組材質、材質索引.materialIndex

本文是Three.js電子書的8.3節

這節課爲大家講解數組材質和三角形面Face3的材質索引屬性.materialIndex。

數組材質

你可以測試把數組材質作爲幾何體的紋理貼圖，所謂數組材質就是多個材質對象構成一個數組作爲模型對象的材質。

var geometry = new THREE.BoxGeometry(100, 100, 100); //立方體
// var geometry = new THREE.PlaneGeometry(204, 102, 4, 4); //矩形平面
// var geometry = new THREE.SphereGeometry(60, 25, 25); //球體
// var geometry = new THREE.CylinderGeometry(60, 60, 25,25); //圓柱
//
// 材質對象1
var material_1 = new THREE.MeshPhongMaterial({
  color: 0xffff3f
})
var textureLoader = new THREE.TextureLoader(); // 紋理加載器
var texture = textureLoader.load('Earth.png'); // 加載圖片，返回Texture對象
// 材質對象2
var material_2 = new THREE.MeshLambertMaterial({
  map: texture, // 設置紋理貼圖
  // wireframe:true,
});
// 設置材質數組
var materialArr = [material_2, material_1, material_1, material_1, material_1, material_1];

// 設置數組材質對象作爲網格模型材質參數
var mesh = new THREE.Mesh(geometry, materialArr); //網格模型對象Mesh
scene.add(mesh); //網格模型添加到場景中

材質索引屬性

三角形面Face3可以設置材質索引屬性.materialIndex,Face3.materialIndex指向數組材質中的材質對象，表達的意思是數組材質中哪一個元素用於渲染該三角形面Face3。

通過材質屬性Face3.materialIndex的介紹，你應該可以明白上面案例代碼中數組材質的渲染規律。

var geometry = new THREE.BoxGeometry(100, 100, 100); //立方體
// 你可以測試BoxGeometry、PlaneGeometry、CylinderGeometry三角形面的材質索引
// 查看face3對象的materialIndex屬性
console.log(geometry.faces);
geometry.faces.forEach(elem => {
  console.log(elem.materialIndex);
});

案例：自定義Face3的材質索引

var geometry = new THREE.PlaneGeometry(204, 102, 4, 4); //矩形平面
// 材質對象1
var material1 = new THREE.MeshPhongMaterial({
  color: 0xffff3f,
  // wireframe:true,
})
// 材質對象2
var material2 = new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  // wireframe:true,
}); //材質對象Material
// 數組材質
var materialArr = [material1, material2];
// 設置幾何體的材質索引(對於PlaneGeometry而言所有Face3的材質索引默認0)
geometry.faces[4].materialIndex = 1;
geometry.faces[5].materialIndex = 1;
var mesh = new THREE.Mesh(geometry, materialArr); //網格模型對象Mesh

總結