每个< g>上的鼠标事件svg的标签加载到threejs中的材料上 [英] Mouse events on each <g> tag of svg loaded on the material in threejs

问题描述

我正在使用SVGLoader将SVG图像加载到BoxBufferGeometry(cube)的网格基本材料上.当用户悬停/单击加载在多维数据集特定侧的SVG特定元素时，我想触发鼠标事件.

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 which is loaded on the specific side of the cube.

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

I tried adding events into the .svg file before loading it but once it get loaded on the material it doesn\'t show any changes caused by the events.

还有其他方法可以选择已加载的svg图像的元素并对其应用事件吗?

Is there any other possible way to select the elements of loaded svg image and apply events on it?

为更好地理解，请参考 http://plnkr.co/edit/YYN8aechHGTKXvPv6tOo?p=预览除此之外，还尝试使用以下代码访问特定方面:

For better understanding please refer http://plnkr.co/edit/YYN8aechHGTKXvPv6tOo?p=preview apart from this also tried to access the particular side using 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;
                }

推荐答案

我已经使用 threex.domevent.js 捕获了 mouseover 事件并创建了一个监听器.我正在找到具有svg图像的立方体面. 链接: 在侧面检测鼠标单击/悬停事件三个js中的多维数据集 和 https://github.com/jeromeetienne/threex.domevents .

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 js and https://github.com/jeromeetienne/threex.domevents.

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

• 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 = 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)

柱塞: http://plnkr.co/edit/QXwqN3X70ex3EZmlKhRf?p=preview 希望对您有所帮助.

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

这篇关于每个< g>上的鼠标事件svg的标签加载到threejs中的材料上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！