鼠標事件上每個<g> svg標籤加載在三維材料上

我使用SVGLoader將SVG圖像加載到BoxBufferGeometry（立方體）的網格基本材質上。我想在用戶懸停/點擊加載在多維數據集特定側的SVG的特定元素時觸發鼠標事件。鼠標事件上每個<g> svg標籤加載在三維材料上

我嘗試在加載之前將事件添加到.svg文件中，但一旦它加載到材質上時，它不會顯示由事件引起的任何更改。

是否有任何其他可能的方式來選擇加載的svg圖像的元素並在其上應用事件？

爲了更好的理解，請參閱http://plnkr.co/edit/YYN8aechHGTKXvPv6tOo?p=preview除了這也嘗試使用下面的代碼訪問特定的一面：

   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; 
       }

來源

2017-07-07 Mohit Patel

我覺得這個鏈接可以幫助你https://stackoverflow.com/questions/12451855/how-to-add-event-listeners-to-objects-in-a-svg – gusaindpk

也很高興在問題中添加一些示例代碼。 – gusaindpk

將SVG作爲紋理應用時，它不再是SVG。如果你想交叉SVG，你需要獲得立方體面上點擊的UV位置（它映射到SVG上的x，y位置），並根據該位置確定哪個SVG標記被點擊。 – TheJim01

我用threex.domevent.js捕捉鼠標懸停事件，並創建一個笨蛋。我找到具有svg圖像的立方體臉部。鏈接： detect mouse click/hover event on sides of cube in three jsand https://github.com/jeromeetienne/threex.domevents。

連接使用DOM事件* threex.domevent.js **

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

聽鼠標事件，並找到您所需要的臉。

 domEvents.addEventListener(mesh, 'mouseover', function(event) { 
     var vector = new THREE.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 here 
       console.log('##############'); 
       mesh.material[4].map = new THREE.TextureLoader().load('sample2.svg'); 
      } 

     } 
    }, false)

Plunker：http://plnkr.co/edit/QXwqN3X70ex3EZmlKhRf?p=preview 希望它能幫助。

來源

2017-07-09 08:01:26 gusaindpk

@MohitPatel有幫助嗎？ – gusaindpk

感謝您的解決方案，但我已經能夠使用我的代碼執行相同的任務。我想觸發形狀的子幾何體（圓形，星形等）上的事件並更改這些特定子幾何體的顏色。 –

好吧，我會考慮它 – gusaindpk

鼠標事件上每個<g> svg標籤加載在三維材料上

回答

相關問題