Jak zaimplementować mouselook w przeglądarce?

10

Obecnie tworzę 3D strzelankę FPS w przeglądarce za pomocą WebGL. Jak mógłbym wdrożyć taką grę dla mouselook / free look ?

3d javascript webgl first-person-shooter browser-based-games Jefir
źródło
Spójrz na realizację Three.js dnia FirstPersonControls klasie. Może być również konieczne zablokowanie wskaźnika, aby swobodnie rozglądać się po odtwarzaczu. Spróbuj tego: Blokada wskaźnika . Niestety nie jest zaimplementowany w Operze i IE, ale WebGL również nie jest zaimplementowany w tych przeglądarkach.
Szymon Wygnański

Odpowiedzi:

10

Mouselook jest teraz obsługiwany w Chrome i Firefox przez specyfikację blokady wskaźnika W3C . Głównie:

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;

Dobry artykuł na samouczek to Blokada wskaźnika i Sterowanie FPS w HTML5Rocks.

Vincent Scheib
źródło
Błąd musi zostać naprawiony, ponieważ to demo działa teraz w Firefoksie : mdn.github.io/pointer-lock-demo Jeśli zaktualizujesz swój komentarz, dam ci „do góry”
xaxxon
1

Przechwytuj mousemovezdarzenia i użyj właściwości screenXi screenYobiektu zdarzenia, aby zaktualizować pozycję kamery (użyj delty do ostatniej screenXi screenYpozycji, aby uzyskać ilość ruchu).

Jeśli masz scenariusz , możesz zbudować konfigurację węzła w następujący sposób:

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

Ruch w osi X obraca węzeł YawNode, a ruch w osi Y obraca węzeł PitchNode. CameraNode zostanie przesunięty, gdy gracz się poruszy.

grzmot
źródło
1

To dość proste i wymaga tylko dwóch rzeczy.

  1. Procedura obsługi zdarzenia przeniesienia myszy.
  2. Obiekt kamery reprezentujący podstawową transformację widoku modelu

Przykładowy kod zdarzenia

Oto przykładowy kod źródłowy do obsługi obsługi zdarzeń. Moduł systemu (który obsługuje wszystkie interakcje przeglądarki <--> w grze) śledzi dwie zmienne: lastMousePositioni lastMouseDelta.

Aby śledzić kamerę za pomocą myszy, wystarczy, lastMouseDeltaże będziesz wiedzieć, ile stopni obrócić klatka po klatce.

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

Ten sam kod ruchu kamery

Oto przykładowy kod do obsługi obrotu kamery. Biorąc pod uwagę liczbę pikseli, które myszka przesunęła w kierunku X lub Y, obróć kamerę o tyle stopni.

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

Później, kiedy faktycznie zaczniesz renderować swój świat, po prostu wygeneruj matrycę widoku modelu z kamery. (Przekształcając pozycję kamery, odchylenie, pochylenie i rolowanie w wektory, które możesz przekazać do gluLookAt.) I powinieneś być dobry.

Chris Smith
źródło