Wie implementiere ich Mouselook im Browser?

10

Ich erstelle gerade ein 3D-Ego-Shooter-Spiel im Browser mit WebGL. Wie würde ich Mouselook / Free Look für ein solches Spiel implementieren ?

3d javascript webgl first-person-shooter browser-based-games Jephir
quelle
Schauen Sie sich die Implementierung der FirstPersonControls- Klasse durch THREE.js an. Möglicherweise müssen Sie auch den Zeiger sperren, um sich im Player frei umzusehen. Versuchen Sie Folgendes: Zeigersperre . Leider ist es nicht in Opera und IE implementiert, aber WebGL ist auch nicht in diesen Browsern implementiert.
Szymon Wygnański

Antworten:

10

Mouselook wird jetzt in Chrome und Firefox über die W3C Pointer Lock- Spezifikation unterstützt. Im Wesentlichen:

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;

Ein guter Tutorial-Artikel ist Pointer Lock und First Person Shooter Controls auf HTML5Rocks.

Vincent Scheib
quelle
Der Fehler muss behoben werden, da diese Demo jetzt in Firefox funktioniert: mdn.github.io/pointer-lock-demo Wenn Sie Ihren Kommentar aktualisieren, gebe ich Ihnen ein "up"
xaxxon
1

Erfassen Sie mousemoveEreignisse und verwenden Sie die Eigenschaften screenXund screenYdes Ereignisobjekts, um die Kameraposition zu aktualisieren (verwenden Sie das Delta bis zum letzten screenXund die screenYPosition, um den Bewegungsumfang zu ermitteln).

Wenn Sie eine Art Szenegraph haben , können Sie ein Knoten-Setup wie das folgende erstellen:

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

Die Bewegung in der X-Achse dreht den YawNode und die Bewegung in der Y-Achse dreht den PitchNode. Der CameraNode wird verschoben, wenn sich der Player bewegt.

bummzack
quelle
1

Es ist ganz einfach und erfordert nur zwei Dinge.

  1. Ein Ereignishandler für das Mausbewegungsereignis.
  2. Ein Kameraobjekt, das Ihre grundlegende Modellansichtstransformation darstellt

Beispiel für einen Ereigniscode

Hier ist ein Beispiel-Quellcode für die Ereignisbehandlung. Das Systemmodul (das alle <-> Browser-Interaktionen des Spiels abwickelt) verfolgt zwei Variablen: lastMousePositionund lastMouseDelta.

Um die Kamera mit der Maus zu verfolgen, müssen Sie nur lastMouseDeltawissen, um wie viel Grad Sie sich von Bild zu Bild drehen müssen.

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

Gleicher Kamerabewegungscode

Hier ist ein Beispielcode für die Handhabung der Kameradrehung. Drehen Sie die Kamera angesichts der Anzahl der Pixel, die die Maus in X- oder Y-Richtung bewegt hat, um so viele Grad.

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

Wenn Sie später tatsächlich Ihre Welt rendern, generieren Sie einfach eine Modellansichtsmatrix aus Ihrer Kamera. (Konvertieren Sie die Position, das Gieren, die Neigung und das Rollen der Kamera in Vektoren, die Sie an gluLookAt übergeben können.) Und Sie sollten bereit sein, loszulegen.

Chris Smith
quelle