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

Question

我在 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() 我发现其中没有存储任何内容。 在 this fiddle ，你可以找到完整的代码。你是否偶然知道我做错了什么？

预先感谢您的回复!

Answer 1

代码中的一些问题:

1. 您似乎使用 INTERSECTED.currentRGB 来恢复以前的颜色。但是您永远不会将之前的颜色保存到其中(也许 object.currentHex 应该已经完成​​了？)

2. THREE.Color.setRGB 接受 3 个参数:(r, g, b)。即使您将 [r,g,b] 保存到 currentRGB，您的代码也不会工作，因为没有 THREE.Color.getRGB，您不能这样做。在这种情况下，最好使用 Hex。 (三色.getHex 和三色.setHex)

这里是固定的部分代码，我修改的行有注释

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/