raycast intersecting with all objects/objects are all the same? - three.js

Question

As soon as you mouse over 1 box, all the boxes turn red.I added the go Boolean because otherwise the page would load with the boxes being red. Here is a jsfiddle link https://jsfiddle.net/mduffy/be8vm5vL/17/
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, document.getElementById("canvas").width / document.getElementById("canvas").height, 0.1, 1000 );
var x,y;
var image_spacing = 20;
var image_height = 90;
var image_width = 160;
var rows = 3;
var cols = 4;
var go = false;
var controls = new THREE.OrbitControls( camera );
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var renderer = new THREE.WebGLRenderer( { canvas: canvas } );
var geometry = new THREE.BoxGeometry( image_width, image_height, 0 );
var pictures = new THREE.Object3D();
pictures.position.x = -((cols / 2 * (image_width+image_spacing)) - 0.5*(image_spacing+image_width));
pictures.position.y = -((rows / 2 * (image_height+image_spacing)) - 0.5*(image_spacing+image_height));
var material = new THREE.MeshBasicMaterial();
for(var i = 0;i < rows;i++){
for(var e = 0;e < cols;e++){
var picture = new THREE.Mesh( geometry, material );
picture.position.set( (e*(image_spacing+image_width)), (i*(image_spacing+image_height)), 0 );
//picture.overdraw = true;
pictures.add( picture );
}
}
scene.add( pictures );
camera.position.z = 400;
function render() {
requestAnimationFrame( render );
if(go ){
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children, true);
for ( var e = 0; e < intersects.length; e++ ) {
intersects[ e ].object.material.color.set( 0xff0000 );
}
}
controls.update();
renderer.render( scene, camera );
}
document.getElementById("canvas").addEventListener("mousemove", function(event){
var position = getMousePos(document.getElementById("canvas"),event);
x = position.x;
y = position.y;
mouse.x = ( x / 1000 ) * 2 - 1;
mouse.y = - ( y / 600 ) * 2 + 1;
});
document.getElementById("canvas").addEventListener("mouseenter", function(event){
go = true;
});
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
render();

Answer 1

Your objects are sharing the same material.
var picture = new THREE.Mesh( geometry, material );
Consequently, when you change the the material color for one object, you are changing the color of all the objects.
Instead, do this:
var picture = new THREE.Mesh( geometry, material.clone() );
three.js .r.71