Como implementar o mouselook no navegador?

Atualmente, estou criando um jogo de tiro em primeira pessoa 3D no navegador usando o WebGL. Como eu implementaria a aparência do mouselook / free para esse jogo?

O Mouselook agora é suportado no Chrome e Firefox através da especificação W3C Pointer Lock . Essencialmente:

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;

Um bom artigo de tutorial é o Pointer Lock e o First Person Shooter Controls no HTML5Rocks.

Capture mousemoveEventos e use as propriedades screenXe screenYdo objeto de evento para atualizar a posição da câmera (use o delta até o último screenXe screenYposição para obter a quantidade de movimento).

Se você tiver algum tipo de gráfico de cenário , poderá criar uma configuração de nó como a seguinte:

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

O movimento no eixo X gira o YawNode e o movimento no eixo Y gira o PitchNode. O CameraNode será movido quando o player se mover.

É bem simples e requer apenas duas coisas.

1. Um manipulador de eventos para o evento de movimentação do mouse.
2. Um objeto de câmera que representa sua transformação básica de visualização de modelo

Código de Evento de Amostra

Aqui está um exemplo de código-fonte para a manipulação de eventos. O módulo do sistema (que lida com toda a interação do navegador do jogo <-->) controla duas variáveis: lastMousePositione lastMouseDelta.

Para rastrear a câmera com o mouse, basta lastMouseDeltasaber como você saberá quantos graus rodar quadro a quadro.

  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];
  };

O mesmo código de movimento da câmera

Aqui está um código de exemplo para lidar com a rotação da câmera. Dado o número de pixels que o mouse se moveu na direção X ou Y, gire a câmera em muitos graus.

 /**
   * 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]);
  }

Mais tarde, quando você realmente renderizar seu mundo, simplesmente gere uma matriz de visualização de modelo a partir de sua câmera. (Convertendo a posição da câmera, guinada, inclinação e rotação em vetores que você pode passar para o gluLookAt.) E você deve estar pronto.