鼠标悬停时重新渲染对象答案

【问题标题】：Re-render object on mouse hover鼠标悬停时重新渲染对象
【发布时间】：2019-01-18 00:52:26
【问题描述】：

我在 electron 中设置了threejs 编辑器，我将对其进行自定义。我正在尝试实现一个“悬停”对象来更改面的颜色，然后选择两个对象的两个面并捕捉它们（面对面）。所以现在我正在实现悬停效果，但效果不佳：它非常随机地更新（而不是现在，当鼠标悬停时）。我哪里错了？

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

我希望将对象颜色更改为红色，它会随机工作，但不是在鼠标悬停时（因此它不会变成以前的颜色），或者它也可以，但不正确，当鼠标不在时与实际对象相交。

【问题讨论】：

标签： three.js

【解决方案1】：

同样的方法，但你可以在这里找到我的小提琴：http://jsfiddle.net/mmalex/ed0jhpyk/

从这里开始使用助手类：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
});

【讨论】：