画布：基于指针的视口/包含鼠标指针

Question

似乎没有一个好的方法可以使 视口基于鼠标指针的位置并能够自由移动。基本上，就像市场上所有其他第一人称游戏一样。

1. 没有办法捕获鼠标 在 元素内。
2. 没有办法设置位置 的鼠标指针。
3. 无法全屏显示 使用 ，即使一旦到达边缘，功能也会被破坏。

也有充分的理由。想象一下恶意者可能（并且肯定会）采用什么可能的场景。

也许现在考虑一些几乎只在 3D 环境中有用的东西还为时过早，而且还没有规范。

您的采取或解决方案是什么？

Answer 1

您可以获取画布内的鼠标位置。

function getCursorPosition(e) {
    var x;
    var y;
    if (e.pageX != undefined && e.pageY != undefined) {
    x = e.pageX;
    y = e.pageY;
    }
    else {
    x = e.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
    }

    x -= gCanvasElement.offsetLeft;
    y -= gCanvasElement.offsetTop;

    var cell = new Cell(Math.floor(y/kPieceHeight),
                    Math.floor(x/kPieceWidth));
    return cell;
}

深入了解 HTML5：让我们称之为绘图表面

Answer 2

我认为对此没有一个好的解决方案——至少在我们获得鼠标锁定之前是这样。无论您的解决方案多么优雅，如果您制作了一个由鼠标外观驱动的抽搐游戏，用户将在某个时刻在画布区域之外抽搐。即使他们没有意外点击链接，当视图停止响应鼠标时，他们的沉浸感也会被破坏。

对于节奏较慢的游戏，您可以：

• 使用单击并拖动来转动。一旦用户开始在画布内拖动，您就可以使用从开始拖动点开始的鼠标增量来确定转动多远。由于用户按住按钮，因此他们不会意外单击某些内容。
• 将光标悬停在画布边缘附近即可转动，类似于 RTS。这会变得更慢，但可能是最直观的，并且最容易让用户意外发现。
• 使用键盘看起来就像鼠标前的 FPS 游戏（例如 Doom）。

值得注意的是，Firefox 中有一个关于鼠标锁定的开放功能请求。但不幸的是，这个、鼠标隐藏或全屏都不是 WebGL 规范的一部分。

Unity 支持所有这些功能，因此如果您确实需要 FPS 控件，这可能是一个值得考虑的途径。