Three.js修改单个Mesh材质时场景所有Mesh材质均同步变化问题求助

问题根源 #

你创建所有建筑Mesh时，都复用了同一个全局的material实例。ThreeJS中的材质对象是引用传递的，所有绑定了同一份材质实例的Mesh，都会共享材质的所有属性，修改其中任意一个Mesh的材质属性，本质上是修改了这份公共的材质实例，自然会同步到所有使用该材质的Mesh上。

修复方案 #

只需要在创建每个建筑Mesh时，单独生成一份材质实例即可，有两种常用实现方式：

• 方式1：创建Mesh时克隆已有全局材质
  把你循环中创建Mesh的代码：

  var building = new THREE.Mesh( geometry, material );
  

  修改为：

  var building = new THREE.Mesh( geometry, material.clone() );
  

  克隆操作会生成独立的材质实例，后续修改不会互相影响。
• 方式2：直接在循环内部为每个建筑单独创建材质
  如果不需要复用全局材质的公共配置，可以直接把材质定义放到循环内部，每个建筑生成独立的材质对象。

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