尝试更改单击的Three.js对象的颜色，但场景中所有对象的颜色都会更改

Question

示例： http ： //jsfiddle.net/f17Lz5ux/2539/

这是在mousedown事件中发生的神奇部分：

var intersects = raycaster.intersectObjects( [mesh1, mesh2, mesh3] );

if ( intersects.length > 0 ) {
    console.log(intersects[ 0 ].object)
    intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}

我们的想法是，当用户点击时，会在该点创建一个Ray，并找到任何交叉点。 然后将该对象的颜色更改为随机的新颜色。 然而，正在发生的事情是，所有对象的颜色都会改变，即使它们不包含在intersects数组中（如果你检查控制台，你会看到被点击的对象被打印出来）

是什么赋予了？

Answer 1

我想到了。 这是因为该代码实际上正在改变对象材质的颜色，并且由于所有对象共享相同的材质，因此它们都会看到颜色变化。

我移动的解决方案在用户单击时创建新材质，并将其应用于对象。