Mouselook tarayıcıda nasıl uygulanır?

Şu anda WebGL kullanarak tarayıcıda bir 3D birinci şahıs nişancı oyunu oluşturuyorum. Böyle bir oyun için mouselook / free görünümünü nasıl uygulayabilirim ?

Mouselook artık W3C İşaretçi Kilidi spesifikasyonu aracılığıyla Chrome ve Firefox'ta desteklenmektedir . esasen:

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;

İyi bir öğretici makale HTML5Rocks üzerinde Pointer Lock ve First Person Shooter Kontrolleri .

mousemoveOlayları yakalayın ve kamera konumunu güncellemek için olay nesnesinin screenXve screenYözelliklerini kullanın (hareket miktarını elde etmek için deltayı son screenXve screenYkonumu kullanın).

Bir çeşit sahne grafiğiniz varsa, aşağıdaki gibi bir düğüm kurulumu oluşturabilirsiniz:

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

X Eksenindeki hareket YawNode'u döndürür ve Y Eksenindeki hareket PitchNode'u döndürür. Oynatıcı hareket ettiğinde CameraNode hareket edecektir.

Oldukça basit ve sadece iki şey alıyor.

1. Fare taşıma olayı için bir olay işleyici.
2. Temel model görünümü dönüşümünüzü temsil eden bir kamera nesnesi

Örnek olay kodu

Olay işlemeyi yapmak için bazı örnek kaynak kodları. (Tüm oyun <--> tarayıcı etkileşimini işleyen) sistem modülü iki değişkeni takip eder: lastMousePositionve lastMouseDelta.

Kamerayı fare ile izlemek için, lastMouseDeltaçerçeveden çerçeveye kaç derece döndüreceğinizi bilmeniz yeterlidir .

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

Aynı kamera hareket kodu

İşte kamera dönüşünü işlemek için bazı örnek kod. Farenin X veya Y yönünde hareket ettiği piksel sayısı göz önüne alındığında, kamerayı bu kadar derece döndürün.

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

Daha sonra, dünyanızı gerçekten oluşturmaya devam ettiğinizde, kameranızdan bir model görünümü matrisi oluşturmanız yeterlidir. (Kameranın konumunu, yalpalamasını, eğimini ve yuvarlanmasını vektörlere dönüştürerek gluLookAt'a geçebilirsiniz.) Ve gitmek için iyi olmalısınız.