Javascript 每个屏幕上的鼠标事件<；g>；三个JS中加载在材质上的svg标记

我正在使用SVGLoader将SVG图像加载到BoxBufferGeometry（立方体）的网格基本材质中。我想在用户悬停/单击加载在多维数据集特定一侧的SVG的特定元素时触发鼠标事件

在加载.svg文件之前，我尝试将事件添加到该文件中，但一旦加载到材质中，它就不会显示由事件引起的任何更改

是否有其他可能的方法来选择加载的svg图像的元素并在其上应用事件

为了更好地理解，请参考除此之外的内容，并尝试使用以下代码访问特定的一方：

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

---

我使用threex.domevent.js捕获了鼠标悬停事件，并创建了一个plunker。我正在查找具有svg图像的立方体面。 链接： 和

• 使用*threex.domevent.js附加dom事件**

  domEvents=新的三个.domEvents（摄影机、渲染器.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)
  

  普朗克： 希望能有帮助

---

我认为此链接也可以帮助您在问题中添加一些示例代码。当您将SVG作为纹理应用时，它不再是SVG。如果要与SVG相交，需要获取立方体面上单击的UV位置（该位置映射到SVG上的x、y位置），并根据该位置确定单击了哪个SVG标记。@gusaindpk在描述中添加了示例链接。希望这能让我的问题更清楚clear@MohitPatel创建了一个有帮助的plunker hope。@Mohittatel有帮助吗？谢谢你的解决方案，但我已经能够使用我的代码执行相同的任务了。我想触发形状的子几何体（圆形、星形等）上的事件，并更改这些特定子几何体的颜色。OK将研究它。我认为不可能像@TheJim01在评论中提到的那样将事件附加到svg本身。您还可以检查链接，这可能是增强代码的一种方式，以查找特定的圆形区域坐标，检查鼠标是否存在，并加载其他svg和更改子几何体。是的，@TheJim01提供的方法是迄今为止我收到的最好的方法。试图在我的代码中实现同样的功能。