Làm thế nào để thực hiện mouselook trong trình duyệt?

10

Tôi hiện đang tạo một trò chơi bắn súng góc nhìn thứ nhất 3D trong trình duyệt bằng WebGL. Làm thế nào tôi có thể thực hiện mouselook / tìm kiếm miễn phí cho một trò chơi như vậy?

— Jephir
nguồn

Nhìn vào việc triển khai lớp FirstPersonControls của THREE.js . Bạn cũng có thể cần phải khóa con trỏ để tự do nhìn xung quanh người chơi. Hãy thử điều này: Khóa con trỏ . Thật không may, nó không được triển khai trong Opera và IE nhưng WebGL cũng không triển khai trong các trình duyệt đó.

— Szymon Wygnański

10

Mouselook hiện được hỗ trợ trong Chrome và Firefox thông qua thông số kỹ thuật Khóa con trỏ W3C . Bản chất:

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;

Một bài viết hướng dẫn tốt là Khóa con trỏ và Điều khiển bắn súng góc nhìn thứ nhất trên HTML5Rocks.

— Vincent Scheib
nguồn

Lỗi này phải được sửa, vì bản demo này hoạt động trong firefox ngay bây giờ: mdn.github.io/pulum-lock-demo Nếu bạn cập nhật nhận xét của mình, tôi sẽ cung cấp cho bạn một 'up'

— xaxxon

1

Chụp mousemovesự kiện và sử dụng screenXvà screenYcác thuộc tính của đối tượng sự kiện để cập nhật vị trí camera (sử dụng delta đến vị trí cuối cùng screenXvà screenYvị trí để lấy lượng chuyển động).

Nếu bạn có một số loại cảnh , bạn có thể xây dựng một thiết lập nút như sau:

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

Chuyển động trong Trục X xoay YawNode và chuyển động trong Trục Y xoay Vòng xoay. CameraNode sẽ được di chuyển khi người chơi di chuyển.

— bummzack
nguồn

1

Nó khá đơn giản và chỉ mất hai thứ.

Một xử lý sự kiện cho sự kiện di chuyển chuột.
Một đối tượng máy ảnh đại diện cho chuyển đổi chế độ xem mô hình cơ bản của bạn

Mã sự kiện mẫu

Đây là một số mã nguồn mẫu để thực hiện xử lý sự kiện. Mô-đun hệ thống (xử lý tất cả trò chơi <-> tương tác trình duyệt) theo dõi hai biến: lastMousePositionvà lastMouseDelta.

Để theo dõi máy ảnh bằng chuột, bạn chỉ cần lastMouseDeltađó là cách bạn sẽ biết bao nhiêu độ để xoay khung hình này sang khung hình khác.

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

Mã chuyển động của camera giống nhau

Đây là một số mã mẫu để xử lý xoay camera. Dựa vào số pixel mà chuột đã di chuyển theo hướng X hoặc Y, xoay camera theo nhiều độ.

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

Sau này, khi bạn thực sự tiếp tục kết xuất thế giới của mình, chỉ cần tạo ma trận xem mô hình từ máy ảnh của bạn. (Chuyển đổi vị trí của máy ảnh, ngáp, cao độ và cuộn thành các vectơ bạn có thể chuyển sang gluLookAt.) Và bạn nên đi.

— Chris Smith
nguồn