Comment implémenter mouselook dans le navigateur?

Je suis en train de créer un jeu de tir 3D à la première personne dans le navigateur à l'aide de WebGL. Comment implémenter mouselook / free look pour un tel jeu?

Mouselook est désormais pris en charge dans Chrome et Firefox via la spécification W3C Pointer Lock . Essentiellement:

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;

Un bon article de didacticiel est Pointer Lock et First Person Shooter Controls on HTML5Rocks.

Capturez des mousemoveévénements et utilisez les propriétés screenXet screenYde l'objet événement pour mettre à jour la position de la caméra (utilisez le delta jusqu'au dernier screenXet la screenYposition pour obtenir la quantité de mouvement).

Si vous avez une sorte de scénario , vous pouvez créer une configuration de nœud comme celle-ci:

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

Le mouvement dans l'axe X fait tourner le YawNode et le mouvement dans l'axe Y fait pivoter le PitchNode. Le CameraNode sera déplacé lorsque le joueur se déplace.

C'est assez simple et ne prend que deux choses.

1. Un gestionnaire d'événements pour l'événement de déplacement de la souris.
2. Un objet caméra représentant votre transformation de base en vue de modèle

Exemple de code d'événement

Voici quelques exemples de code source pour la gestion des événements. Le module système (qui gère toutes les interactions du navigateur <--> du jeu) garde une trace de deux variables: lastMousePositionet lastMouseDelta.

Pour suivre la caméra avec la souris, il vous suffit de lastMouseDeltasavoir comment vous saurez combien de degrés pour faire pivoter image par image.

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

Même code de mouvement de caméra

Voici un exemple de code pour gérer la rotation de la caméra. Compte tenu du nombre de pixels que la souris a déplacés dans la direction X ou Y, faites pivoter la caméra de ce nombre de degrés.

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

Plus tard, lorsque vous allez réellement rendre votre monde, générez simplement une matrice de vue modèle à partir de votre caméra. (En convertissant la position, le lacet, le tangage et le roulis de la caméra en vecteurs, vous pouvez passer à gluLookAt.) Et vous devriez être prêt à partir.