THREE.js中如何为已有网格添加材质？无需重新调用构造函数

你直接赋值数组无效的核心原因是：Three.js中给网格设置多材质时，需要**配合几何体的材质组（Geometry Groups）**来指定不同面使用的材质索引，否则网格只会默认加载数组里的第一个材质。另外新版本Three.js已经废弃了MultiMaterial，直接用材质数组即可，但要做好对应配置。

下面分两种常见场景给出具体实现：

场景1：给网格不同区域分配不同材质 #

如果你想让网格的某些面保留原材质，其他面使用新材质，步骤如下：

1. 先给几何体添加材质组，明确哪些面对应哪个材质索引：

   // 以BoxGeometry为例：将前2个面（前、后面）分配给原材质（索引0），剩下4个面分配给新材质（索引1）
   geometry.addGroup(0, 2, 0); // 参数依次为：起始面索引、面数量、材质数组中的对应索引
   geometry.addGroup(2, 4, 1);
   

2. 给网格赋值材质数组，并触发更新：

   mesh.material = [material, material2];
   // 强制标记材质需要更新，确保渲染生效
   mesh.material.forEach(m => m.needsUpdate = true);
   

场景2：让网格同时显示双材质（比如实体+线框） #

如果你的需求是让网格同时渲染两种材质（比如一个实体材质加一个线框材质），无需拆分面的话，更简便的方式是给现有网格添加子网格，复用原几何体即可，不用重新创建主网格：

// 创建使用新材质的子网格，直接复用原网格的几何体
const subMesh = new THREE.Mesh(mesh.geometry, material2);
// 同步子网格与主网格的位置、旋转、缩放
subMesh.position.copy(mesh.position);
subMesh.rotation.copy(mesh.rotation);
subMesh.scale.copy(mesh.scale);
// 将子网格添加到主网格中
mesh.add(subMesh);

这种方式不用修改原几何体结构，就能实现双材质叠加的视觉效果。

版本兼容注意 #

如果你的Three.js版本较旧（r125之前），需要用MultiMaterial包裹材质数组：

mesh.material = new THREE.MultiMaterial([material, material2]);

内容的提问来源于stack exchange，提问作者cybafelo