My project consists of a grid with boxes, similar to the example seen at . I have implemented a hover state where the background turns gray when a box is hovered over. However, if there are multiple boxes on the grid and I try to change the background color of the hovered item, all boxes end up with a gray background.
Here is my current implementation:
var voxel = new THREE.Mesh( this.cubeGeometry, this.cubeMaterial );
voxel.position.copy( intersect.point ).add( intersect.face.normal );
voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
this.scene.add( voxel );
this.blocks.push( voxel );
var domEvents = new THREEx.DomEvents(this.camera, this.renderer.domElement)
// DOM events for inside 3d rendering
domEvents.addEventListener(voxel, 'mouseover', this.onDocumentMouseOverCube.bind(this),false);
domEvents.addEventListener(voxel, 'mouseout', this.onDocumentMouseOutCube.bind(this),false);
We create the box and add event listeners specific to that mesh. When the mesh is hovered over, the mouseover function is executed:
this.mouse.x = ( event.origDomEvent.clientX / this.renderer.domElement.width ) * 2 - 1;
this.mouse.y = - ( event.origDomEvent.clientY / this.renderer.domElement.height ) * 2 + 1;
this.raycaster.setFromCamera( this.mouse, this.camera );
var intersects = this.raycaster.intersectObjects( this.blocks );
if ( intersects.length > 0 ) {
var intersect = intersects[ 0 ];
if ( intersect.object != this.plane ) {
console.log(intersect.object);
// update color on hover
intersect.object.material.color.setHex(this.colorHover);
console.log("hover color");
this.render();
}
}
While this functionality works correctly, the issue arises when render() is called (this.renderer.render(this.scene, this.camera)), as it changes the background color of every box instead of just the one that was hovered over. I have checked all objects and confirmed that only one box's color is being set, yet all boxes end up with the same color background. This leads me to believe that the problem lies in how the engine renders the scene.
Any suggestions on how to address this issue?