如何在浏览器中实现mouselook？

10

我目前正在使用WebGL在浏览器中创建3D第一人称射击游戏。我将如何为此类游戏实现mouselook /自由外观？

— 耶菲尔
source

查看THREE.js的FirstPersonControls类的实现。您可能还需要锁定指针，以便自由浏览播放器。试试这个：Pointer Lock。不幸的是，它没有在Opera和IE中实现，但是WebGL也没有在那些浏览器中实现。

— SzymonWygnański2012年

10

现在，Chrome浏览器和Firefox通过W3C 指针锁定规范支持Mouselook 。实质上：

document.onmousemove = function (e) {
  document.body.innerHTML = "<div>dx: " + 
    (e.movementX || e.mozMovementX || e.webkitMovementX || 0);
} 

document.body.onclick = document.body.requestPointerLock ||
                        document.body.mozRequestPointerLock ||
                        document.body.webkitRequestPointerLock;

一篇不错的教程文章是HTML5Rocks上的Pointer Lock和First Person Shooter Controls。

— 文森特·舍布（Vincent Scheib）
source

该错误必须得到修复，因为此演示现在可以在firefox中使用： mdn.github.io/pointer-lock-demo如果您更新评论，我给您一个“ up”

— xaxx，2015年

1

捕获mousemove事件并使用事件对象的screenX和screenY属性更新相机位置（使用最后一个增量screenX和screenY位置的增量来获取移动量）。

如果您有某种Scenegraph，则可以构建如下的节点设置：

CameraNode (Scene Node)
 |
 +- YawNode (Scene Node)
     |
     +- PitchNode (Scene Node)
         |
         +- Camera (actual Camera Object)

X轴上的移动将旋转YawNode，Y轴上的移动将旋转PitchNode。播放器移动时，CameraNode也将移动。

— 布姆扎克
source

1

这很简单，只需两件事。

鼠标移动事件的事件处理程序。
代表基本模型视图转换的摄影机对象

样本事件代码

这是一些用于事件处理的示例源代码。系统模块（处理所有游戏<->浏览器交互）跟踪两个变量：lastMousePosition和lastMouseDelta。

要用鼠标跟踪摄像机，您只需要lastMouseDelta知道如何逐帧旋转多少度即可。

  var canvas = /* WebGL rendering context */
  canvas.onmousedown = function (event) { me.handleMouseDown(event); };
  canvas.onmouseup   = function (event) { me.handleMouseUp(event);   };
  canvas.onmousemove = function (event) { me.handleMouseMove(event); };

  // snip

  engine.SystemModule.prototype.handleMouseMove = function(event) {
    this.lastMouseDelta = [event.clientX - this.lastMousePosition[0],
                           event.clientY - this.lastMousePosition[1]];
    this.lastMousePosition = [event.clientX, event.clientY];
  };

相同的相机移动代码

这是一些用于处理相机旋转的示例代码。给定鼠标在X或Y方向上移动的像素数，将相机旋转那么多度。

 /**
   * degrees/pixel
   * @const
   */
  var cameraMouseRotation = 0.5;


  // Mouse movement for camera angle.
  if (sys.isMouseDown()) {
    var positionChange = sys.getLastMousePositionDelta();
    camera.rotateYDegs(cameraMouseRotation * positionChange[0]);
    camera.rotateXDegs(-cameraMouseRotation * positionChange[1]);
  }

稍后，当您实际渲染世界时，只需从相机生成模型视图矩阵即可。（将相机的位置，偏航，俯仰和横滚转换为向量，您可以将其传递给gluLookAt。）并且您应该一切顺利。

— 克里斯·史密斯
source