Question

我正在尝试使用three.js页面中的一个示例，即体素画家。在此示例中，鼠标坐标用于移动翻转帮助程序，指示单击后框将放置的位置。

mouse.set((event.clientX/window.innerWidth)*2-1, -(event.clientY/window.innerHeight)*2+1);

这段代码计算整个页面上鼠标的位置。我在页面中添加了其他div元素，使得webGL画布的总空间量不同于页面中的总空间量，webGL画布的新尺寸是总高度的95％和85％的总宽度。

现在，我的webGL canavas上的鼠标位置明显不同，因此翻转助手不再与鼠标的位置重叠。我如何修改上面的代码？

Answer 1

如果你想在你的页面上使用鼠标光标的全局位置，你应该使用这样的页面坐标：

event.pageX
event.pageY

Answer 2

您可以使用jQuery来检测鼠标位置，该位置可以处理传递给它的任何jQuery对象。

$(function() {
  var xCoord, yCoord;
  $(document).on("mousemove", function(event) {
    xCoord = event.pageX;
    yCoord = event.pageY;
    console.log("x: "+ xCoord+ ", y: "+ yCoord);
  } );
} );

只需将jQuery选择器更改为画布，jQuery将处理其余部分。

希望这有帮助！

HTML页面上的鼠标坐标

2 个答案: