Re-render object on mouse hover

问题

I'm setting up the threejs editor in electron, and I'm going to customize it. I'm trying to implement a "hover" object to change the color of faces, then select two faces of two objects and snap them (face-to-face). So now I'm implementing the hover effect, but it works not well: it updates quite randomly (and not now, when the mouse is hover). Where am I wrong?

function onMouseMove( event ) {

    var mouse = new THREE.Vector2(), INTERSECTED;

    event.preventDefault();

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    // find intersections

    var camera = editor.camera, scene = editor.scene;

    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera( mouse, camera );

    var intersects = raycaster.intersectObjects( scene.children );

    if ( intersects.length > 0 && intersects[ 0 ].object.material.emissive != undefined ) {

        if ( intersects.length > 0 ) {

            if ( INTERSECTED != intersects[ 0 ].object ) {

                if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );

                INTERSECTED = intersects[ 0 ].object;
                INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
                INTERSECTED.material.emissive.setHex( 0xff0000 );

            }

        } else {

            if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );

            INTERSECTED = null;

        }

    }

    if ( intersects.length > 0 && intersects[ 0 ].object.material.emissive == undefined ) {

        if ( intersects.length > 0 ) {

            if ( INTERSECTED != intersects[ 0 ].object ) {

                if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

                INTERSECTED = intersects[ 0 ].object;
                INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
                INTERSECTED.material.color.setHex( 0xff0000 );

            }

        } else {

            if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

            INTERSECTED = null;

        }

    }

    if ( INTERSECTED != undefined ) {

        INTERSECTED.dynamic = true;
        INTERSECTED.geometry.__dirtyColors = true;

    }

}

document.getElementById( 'viewport' ).addEventListener( 'mousemove', onMouseMove, false );

I expect to change the object color to red, and it works randomly, but not when the mouse is hovering (and so it don't turn to previous color) or it works also, but incorrectly, when the mouse is not intersecting the actual object.

回答1:

Same approach, but working you may find in my fiddle here: http://jsfiddle.net/mmalex/ed0jhpyk/

Helper classes are used from here: https://github.com/nmalex/three.js-helpers

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

var mouseMove = new RayysMouseMove(mouse, controls);

//let mouseMove "know" which objects should be interactive
mouseMove.objects.push(cube);

mouseMove.cb.onObjectEnter.push(function(obj) {
    //todo: handle mouse hover, obj here is threejs scene node
});
mouseMove.cb.onObjectLeave.push(function(obj) {
    //todo: handle mouse unhover, obj here is threejs scene node
});

来源：https://stackoverflow.com/questions/53873977/re-render-object-on-mouse-hover

标签

three.js