Three.js Raycaster问题：如何仅让被射线触碰的盒子变为粉色

问题根源 #

你创建的三个盒子共用了同一个MeshStandardMaterial实例。Three.js中材质是可共享资源，修改任意一个盒子的material.color时，所有使用该材质的物体都会同步变化，这就是所有盒子颜色同步改变的原因。

修复方案 #

需要为每个盒子创建独立的材质实例，有两种实现方式：

方式1：直接创建独立材质

修改几何体与材质的创建代码，给每个盒子分配单独的材质：

//GEOMETRIES
const boxGeo=new THREE.BoxGeometry(2,2)
// 为每个盒子单独实例化材质
const boxMat1=new THREE.MeshStandardMaterial()
const boxMat2=new THREE.MeshStandardMaterial()
const boxMat3=new THREE.MeshStandardMaterial()
const box1=new THREE.Mesh(boxGeo,boxMat1)
const box2=new THREE.Mesh(boxGeo,boxMat2)
const box3=new THREE.Mesh(boxGeo,boxMat3)

方式2：克隆基础材质

如果需要基于同一套基础材质配置（比如统一设置金属度、粗糙度），可以使用clone()方法复制材质：

//GEOMETRIES
const boxGeo=new THREE.BoxGeometry(2,2)
const baseMat=new THREE.MeshStandardMaterial({
  // 可统一配置材质属性，如 metalness: 0.5
})
const box1=new THREE.Mesh(boxGeo, baseMat.clone())
const box2=new THREE.Mesh(boxGeo, baseMat.clone())
const box3=new THREE.Mesh(boxGeo, baseMat.clone())

效果验证 #

修复后，每次tick函数执行时：

1. 先将所有盒子材质重置为蓝色
2. 再将射线击中的盒子材质设为粉色
   此时只有被射线触碰的盒子会显示粉色，其余保持蓝色，初始状态也只会有射线击中的盒子（box2）显示粉色。

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