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

您的代码中几乎没有问题：

您似乎使用INTERSECTED.currentRGB来恢复以前的颜色。但是你永远不会将之前的颜色保存到它中（也许object.currentHex应该已经完成了吗？）
THREE.Color.setRGB有3个参数：（r，g，b）。即使你将[r，g，b]保存到currentRGB，你的代码也不会起作用，因为没有THREE.Color.getRGB，所以你不能这样做。在这种情况下，如果使用Hex，效果会更好。（THREE.Color.getHex和THREE.Color.setHex）

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

.row {
  background-color: white;
  border: 1px solid grey;
}

.flex {
  display: flex;
}

.checkbox {
  order: 0;
  padding: 10px;
}

.metadata {
  order: 1;
  flex: 1 1 auto;
  padding: 10px;
  padding-left: 0;
}

.subject, .recipients {
  order: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date, .labels {
  order: 1;
  text-align: right;
  white-space: nowrap;
}

.badge {
  border: 2px solid purple;
  border-radius: 5px;
  color: purple;
  font-weight: bold;
  font-size: 10px;
}

您可以在此处看到它：https://jsfiddle.net/ord2rjw5/3/

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

1 个答案: