Three.js 定义材质

概述

Three.js中Mesh()的第二个参数material可以是一个数组，所以我们就能给网格模型定义多个材质，效果：

我们可以在效果图中看到，这个box网格模型总共使用了三种材质，分别为颜色贴图的基础网格材质，黄色的基础网格材质，红色的基础网格材质

步骤

1. 创建多个材质

let loader = new THREE.TextureLoader();
let texture = loader.load('ground.jpg')
let material1 = new THREE.MeshBasicMaterial( {map: texture} );
let material2 = new THREE.MeshBasicMaterial( {color: 'red'} );
let material3 = new THREE.MeshBasicMaterial( {color: 'yellow'} );

2. 创建网格模型

let geometry = new THREE.BoxGeometry( 20, 20, 20 );
let materials = []
for (let i = 0; i < geometry.faces.length / 2; i+=3) {
    materials.push(material1, material2, material3)
}
let cube = new THREE.Mesh( geometry, materials );

在控制台打印出网格模型cube可以看到每一个都应用到了不同的材质索引