Mouse Events On Each Tag Of Svg Loaded On The Material In Threejs

I am loading SVG images on to the mesh basic material of BoxBufferGeometry(cube) using SVGLoader. I want to trigger mouse events when user hovers/clicks on specific element of SVG

Solution 1:

I have used threex.domevent.js to capture the mouseover event and created a plunker. I am finding the cube face which has the svg image. Links: detect mouse click / hover event on sides of cube in three jsandhttps://github.com/jeromeetienne/threex.domevents.

• Attach the dom event using *threex.domevent.js**

  domEvents = new THREEx.DomEvents(camera, renderer.domElement)

• Listen to mouse over event and find the face you require.

          domEvents.addEventListener(mesh, 'mouseover', function(event) {
          var vector = newTHREE.Vector3(
              (event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, );
          vector.unproject(camera);
          raycaster.set(camera.position, vector.sub(camera.position).normalize());
  
          var intersects = raycaster.intersectObject(mesh);
          if (intersects.length > 0) {
              var index = Math.floor(intersects[0].faceIndex / 2);
              if (index === 4) {
                  //index 4 is  cude face having the svg image,//you can load a new svg or do required things hereconsole.log('##############');
                  mesh.material[4].map = newTHREE.TextureLoader().load('sample2.svg');
              }
  
          }
      }, false)
  

  Plunker: http://plnkr.co/edit/QXwqN3X70ex3EZmlKhRf?p=preview Hope it helps.