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

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.

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

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

回答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 js and https://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 = 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 Hope it helps.

来源：https://stackoverflow.com/questions/44966011/mouse-events-on-each-g-tag-of-svg-loaded-on-the-material-in-threejs

标签

javascript