วิธีการใช้ mouselook ในเบราว์เซอร์?

ขณะนี้ฉันกำลังสร้างเกมยิงมุมมองบุคคลที่สามในเบราว์เซอร์โดยใช้ WebGL ฉันจะใช้mouselook / ฟรีมองหาเกมดังกล่าวได้อย่างไร

Mouselook ได้รับการสนับสนุนในขณะนี้ใน Chrome และ Firefox ผ่าน W3C ชี้ล็อคสเปค เป็นหลัก:

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;

บทความเกี่ยวกับการสอนที่ดีคือPointer Lock และ First Person Shooter Controlsบน HTML5Rocks

จับภาพmousemoveเหตุการณ์และใช้screenXและscreenYคุณสมบัติของวัตถุเหตุการณ์เพื่ออัปเดตตำแหน่งกล้อง (ใช้เดลต้าเป็นตำแหน่งสุดท้ายscreenXและscreenYตำแหน่งเพื่อรับปริมาณการเคลื่อนไหว)

หากคุณมีScenegraphบางประเภทคุณสามารถสร้างโหนดการตั้งค่าดังนี้:

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

การเคลื่อนไหวในแกน X จะหมุน YawNode และการเคลื่อนที่ในแกน Y จะหมุน PitchNode CameraNode จะย้ายเมื่อผู้เล่นย้าย

มันค่อนข้างง่ายและใช้สองสิ่ง

1. ตัวจัดการเหตุการณ์สำหรับเหตุการณ์การเลื่อนเมาส์
2. วัตถุกล้องที่แสดงถึงการแปลงโมเดลมุมมองพื้นฐานของคุณ

ตัวอย่างรหัสเหตุการณ์

นี่คือตัวอย่างซอร์สโค้ดสำหรับการจัดการเหตุการณ์ โมดูลระบบ (ซึ่งมีหน้าที่จัดการทุกเกม <-> ปฏิสัมพันธ์เบราว์เซอร์) ติดตามการทำงานของสองตัวแปร: และlastMousePositionlastMouseDelta

ในการติดตามกล้องด้วยเมาส์คุณเพียงแค่ต้องlastMouseDeltaรู้ว่าคุณจะรู้ว่าจะหมุนเฟรมเป็นเฟรมได้กี่องศา

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

รหัสการเคลื่อนไหวของกล้องเดียวกัน

นี่คือตัวอย่างรหัสบางส่วนสำหรับจัดการหมุนกล้อง เมื่อกำหนดจำนวนพิกเซลที่เมาส์เคลื่อนที่ในทิศทาง X หรือ Y ให้หมุนกล้องไปตามหลาย ๆ องศา

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

ต่อมาเมื่อคุณไปสู่โลกของคุณจริงๆเพียงแค่สร้างเมทริกซ์มุมมองจากกล้องของคุณ (การแปลงตำแหน่งของกล้องหันเหขว้างและหมุนเป็นเวกเตอร์คุณสามารถส่งผ่านไปยัง gluLookAt.) และคุณน่าจะดี