在three.js中将多个材质分层到SphereGeometry上

// 创建多个材质
var material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var material2 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var material3 = new THREE.MeshBasicMaterial({ color: 0x0000ff });

// 将材质添加到数组中
var materials = [material1, material2, material3];

// 创建SphereGeometry
var geometry = new THREE.SphereGeometry(1, 32, 32);

// 设置每个面的材质索引
for (var i = 0; i < geometry.faces.length; i++) {
  var face = geometry.faces[i];
  if (i < geometry.faces.length / 3) {
    face.materialIndex = 0;  // 使用第一个材质
  } else if (i < geometry.faces.length * 2 / 3) {
    face.materialIndex = 1;  // 使用第二个材质
  } else {
    face.materialIndex = 2;  // 使用第三个材质
  }
}

// 创建网格对象，应用MultiMaterial
var mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);

// 创建MeshFaceMaterial
var materials = [
  new THREE.MeshBasicMaterial({ color: 0xff0000 }),  // 第一个材质
  new THREE.MeshBasicMaterial({ color: 0x00ff00 }),  // 第二个材质
  new THREE.MeshBasicMaterial({ color: 0x0000ff })   // 第三个材质
];

// 设置SphereGeometry每个面的材质
for (var i = 0; i < geometry.faces.length; i++) {
  geometry.faces[i].materialIndex = i % materials.length;
}

// 创建网格对象，应用MeshFaceMaterial
var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
scene.add(mesh);