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

总结