三.js - 鼠标悬停效果不会恢复以前的颜色

Three.js - Mouse hover effect doesn't restore previous color

本文关键字：恢复 颜色 js 鼠标 悬停      更新时间：2023-09-26

我正在Three.js创建一个图案，每当用户与其中一个面相交时mouse hover，它应该变成灰色，当鼠标远离它时，它应该恢复到原来的颜色（浅蓝色）。不幸的是，这并没有发生。这是我认为我遇到问题的代码部分：

if (intersects.length > 0) {
    if (intersects[0].object != INTERSECTED) {
        if (INTERSECTED) {
            INTERSECTED.face.color.setRGB(INTERSECTED.currentRGB);
        }
        INTERSECTED = intersects[0];
        INTERSECTED.object.currentHex = INTERSECTED.object.material.color.getHex();
        INTERSECTED.face.color.setHex(0x777777);
        INTERSECTED.object.geometry.colorsNeedUpdate = true;
    }
} else {
    if (INTERSECTED) {
        INTERSECTED.material.color.setRGB( INTERSECTED.currentRGB );
    }
    INTERSECTED = null;
}

我认为它的问题在于 在targetList = []内部 ，因为使用console.log()我看到里面没有存储任何东西。在这个小提琴中，您可以找到完整的代码。你偶然知道我做错了什么吗？

提前感谢您的回复！

代码中的几个问题：

  1. 您似乎使用INTERSECTED.currentRGB来恢复以前的颜色。但是你从来没有把之前的颜色保存到其中（也许object.currentHex应该这样做？）

  2. 三。Color.setRGB 有 3 个参数：（r， g， b）。 即使将 [r，g，b] 保存到当前 RGB，您的代码也不起作用，因为没有 THREE，因此您不能这样做。在这种情况下，最好使用十六进制。（三.Color.getHex 和 THREE。颜色设置十六进制）

这是代码的固定部分，我更改的行被注释

if (intersects.length > 0) {
    if (intersects[0].object != INTERSECTED) {
        if (INTERSECTED) {
            // Use hex rather than RGB (setRGB uses 3 arguments, hex one)
            INTERSECTED.face.color.setHex(INTERSECTED.currentHex);
        }
        INTERSECTED = intersects[0];
        // Save actual color so we can restore it later
        INTERSECTED.currentHex = INTERSECTED.face.color.getHex();
        INTERSECTED.face.color.setHex(0x777777);
        INTERSECTED.object.geometry.colorsNeedUpdate = true;
    }
} else {
    if (INTERSECTED) {
        // Use hex rather than RGB (setRGB uses 3 arguments, hex one)
        INTERSECTED.face.color.setHex( INTERSECTED.currentHex );
    }
    INTERSECTED = null;
}

您可以在此处看到它的工作原理：https://jsfiddle.net/ord2rjw5/3/

相关文章：