I am currently loading SVG images onto the mesh basic material of a BoxBufferGeometry(cube) using SVGLoader. My goal is to trigger mouse events when a user hovers or clicks on a specific element of the SVG which is loaded on a particular side of the cube.
I attempted to add events directly into the .svg file before loading it, but once it is placed on the material, no changes caused by the events are visible.
Is there an alternative method to select the elements of a loaded svg image and apply events to them?
For better comprehension, please take a look at http://plnkr.co/edit/YYN8aechHGTKXvPv6tOo?p=preview. I've also tried accessing a particular side using the following code:
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
var index = Math.floor( intersects[0].faceIndex / 2 );
if ( INTERSECTED != intersects[ 0 ].object && (index == 4 || index == 5)) {
if ( INTERSECTED ) {
INTERSECTED.material[intersects[0].faceIndex].color.setHex( INTERSECTED.currentHex );
}
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.material[4].color.getHex();
INTERSECTED.material[index].color.setHex( 0xCACACA );
f = index;
}