Javascript 当鼠标悬停在线段的不同部分时，如何实现光线投射的准确性？

我创建了一个示例，在

three.js

中绘制

线段。我已将
顶点颜色
应用于其
材质
，并为顶点按下
颜色
。现在，当我将鼠标悬停在
线段的所有不同部分上时，我会更改该顶点的
颜色
（以及下一个或上一个顶点，具体取决于它在
几何体中被推入的顺序。顶点
数组，以便一条线的
颜色
发生更改，一旦看到代码，您就会明白）由
光线投射器拾取的

jsfiddle链接在这里

现在的问题是悬停不准确；一段
线段
的
颜色
即使在鼠标光标离它很远的时候也会发生变化（当您运行它时，您将能够看到它）。我想看看这种情况的准确性。当鼠标光标准确定位在
线段上时，
线段应更改
颜色。

这是可以实现的吗？
您不需要计算，您的容器不在屏幕上的[0，0]位置

作为一个选项，您可以使用
.getBoundingClientRect（）
方法获取容器的边界矩形，然后从侦听器中获取的鼠标坐标中减去它

var rect;
. . .

// in the listener
rect = myDiv.getBoundingClientRect();

mouse.x = ((event.clientX - rect.left) / container.clientWidth) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / container.clientHeight) * 2 + 1;

范例

PS仅供参考，jsfiddle.net的界面有
Tidy
按钮，这使得代码格式良好，因此可读性更好。
问题仍然存在。你只要仔细观察就可以了。现在，它发生在对象的右侧，而不是应用它之前发生在对象的左侧。@SounakGarai至少对我来说，我的JSFIDLE示例工作得非常好。我在几个不同的机器上检查了您的小提琴，但问题仍然存在。我不能添加屏幕截图，因为堆栈溢出不允许这样做。如果可以的话，我可以告诉你这个问题。@SounakGarai
THREE.Raycaster（）
对线条有一定的精度，你可以使用它的
.linePrecision
参数。是的，使用linePrecision它工作得更好，尽管不够精确。