Bagaimana cara mengimplementasikan mouselook di browser?

10

Saat ini saya membuat game penembak orang pertama 3D di browser menggunakan WebGL. Bagaimana cara saya mengimplementasikan mouselook / look gratis untuk game semacam itu?

3d javascript webgl first-person-shooter browser-based-games Jephir
sumber
Lihatlah implementasi kelas FirstPersonControls dari THREE.js . Anda mungkin juga perlu mengunci pointer agar bebas melihat-lihat pemain. Coba ini: Pointer Lock . Sayangnya itu tidak diterapkan di Opera dan IE tetapi WebGL juga tidak diterapkan di browser tersebut.
Szymon Wygnański

Jawaban:

10

Mouselook sekarang didukung di Chrome dan Firefox melalui spesifikasi W3C Pointer Lock . Pada dasarnya:

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;

Artikel tutorial yang bagus adalah Pointer Lock dan First Person Shooter Controls di HTML5Rocks.

Vincent Scheib
sumber
Bug harus diperbaiki, karena demo ini berfungsi di firefox sekarang: mdn.github.io/pointer-lock-demo Jika Anda memperbarui komentar Anda, saya akan memberi Anda 'up'
xaxxon
1

Capture mousemoveAcara dan menggunakan screenXdan screenYsifat dari objek acara untuk posisi pembaruan kamera (menggunakan delta untuk yang terakhir screenXdan screenYposisi untuk mendapatkan jumlah gerakan).

Jika Anda memiliki semacam scenegraph , Anda bisa membuat simpul-setup seperti berikut:

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

Gerakan di X-Axis memutar YawNode dan gerakan di Y-Axis memutar PitchNode. CameraNode akan dipindahkan ketika pemain bergerak.

bummzack
sumber
1

Ini cukup sederhana, dan hanya butuh dua hal.

  1. Penangan event untuk acara perpindahan mouse.
  2. Objek kamera yang mewakili transformasi tampilan model dasar Anda

Contoh kode acara

Berikut beberapa contoh kode sumber untuk melakukan penanganan acara. Modul sistem (yang menangani semua interaksi browser permainan <-->) melacak dua variabel: lastMousePositiondan lastMouseDelta.

Untuk melacak kamera dengan mouse, Anda hanya perlu lastMouseDeltabagaimana Anda akan tahu berapa derajat untuk memutar bingkai-ke-bingkai.

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

Kode pergerakan kamera yang sama

Berikut beberapa contoh kode untuk menangani rotasi kamera. Mengingat jumlah piksel yang telah dipindahkan mouse ke arah X atau Y, putar kamera sebanyak itu.

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

Kemudian, ketika Anda benar-benar melanjutkan untuk merender dunia Anda, cukup buat matriks model-view dari kamera Anda. (Mengkonversi posisi kamera, menguap, melempar, dan menggulung menjadi vektor yang bisa Anda lewati untuk gluLookAt.) Dan Anda harus baik-baik saja.

Chris Smith
sumber