尝试更改单击的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数组中（如果检查控制台，您将看到被点击的对象被打印）< / p>

是什么给出了？

Answer 1

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

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