在鼠标悬停时重新渲染对象 [英] Re-render object on mouse hover

问题描述

我正在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;//找到交叉点var camera = editor.camera，scene = editor.scene；var raycaster = new THREE.Raycaster();raycaster.setFromCamera(鼠标，相机)；var intersects = raycaster.intersectObjects(scene.children);if ( intersects.length > 0 && intersects[ 0 ].object.material.emissive != undefined ) {if ( intersects.length > 0 ) {如果(相交！=相交[0].对象){如果(相交)INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex)；相交 = 相交 [0].object;INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();INTERSECTED.material.emissive.setHex(0xff0000);}} 别的 {如果(相交)INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex)；相交 = 空；}}if ( intersects.length > 0 && intersects[ 0 ].object.material.emissive == undefined ) {if ( intersects.length > 0 ) {如果(相交！=相交[0].对象){如果(相交)INTERSECTED.material.color.setHex(INTERSECTED.currentHex)；相交 = 相交 [0].object;INTERSECTED.currentHex = INTERSECTED.material.color.getHex();INTERSECTED.material.color.setHex(0xff0000);}} 别的 {如果(相交)INTERSECTED.material.color.setHex(INTERSECTED.currentHex)；相交 = 空；}}如果(相交！=未定义){INTERSECTED.dynamic = true;INTERSECTED.geometry.__dirtyColors = true;}}document.getElementById('viewport').addEventListener('mousemove', onMouseMove, false);

我希望将对象颜色更改为红色，并且它会随机工作，但是当鼠标悬停时不会(因此它不会变成以前的颜色)或者它也能工作，但错误的是，当鼠标不在时与实际对象相交.

解决方案

相同的方法，但您可以在我的小提琴中找到该方法:

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.

解决方案

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

这篇关于在鼠标悬停时重新渲染对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！