브라우저에서 mouselook을 구현하는 방법은 무엇입니까?

10

현재 WebGL을 사용하여 브라우저에서 3D 1 인칭 슈팅 게임을 만들고 있습니다. 그러한 게임에 대해 mouselook / free look 을 어떻게 구현 합니까?

— 제 피르
소스

THREE.js의 FirstPersonControls 클래스 구현을 살펴보십시오 . 플레이어를 자유롭게 둘러 보려면 포인터를 잠 가야 할 수도 있습니다. 이것을보십시오 : 포인터 잠금 . 불행히도 그것은 Opera와 IE에서 구현되지 않지만 WebGL은 그러한 브라우저에서도 구현되지 않습니다.

— Szymon Wygnański

10

Mouselook은 이제 W3C Pointer Lock 사양을 통해 Chrome 및 Firefox에서 지원됩니다 . 본질적으로 :

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;

좋은 자습서 기사는 HTML5Rocks의 포인터 잠금 및 1 인칭 슈팅 컨트롤 입니다.

— 빈센트 쉬브
소스

: 버그는 현재 파이어 폭스에서이 데모 작동하기 때문에, 고정해야 mdn.github.io/pointer-lock-demo은 당신이 당신의 코멘트를 업데이트하는 경우, 내가 '최대'당신주지

— xaxxon

1

mousemove이벤트를 캡처 하고 이벤트 객체 의 screenX및 screenY속성을 사용하여 카메라 위치를 업데이트합니다 (델타를 마지막 screenX및 screenY위치로 사용하여 이동량을 얻습니다).

어떤 종류의 scenegraph 가 있다면 다음과 같은 노드 설정을 만들 수 있습니다.

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

X 축에서의 이동은 YawNode를 회전시키고 Y 축에서의 이동은 PitchNode를 회전시킵니다. 플레이어가 움직일 때 카메라 노드가 이동합니다.

— 범작
소스

1

매우 간단하며 두 가지만 필요합니다.

마우스 이동 이벤트를위한 이벤트 핸들러.
기본 모델 뷰 변환을 나타내는 카메라 객체

샘플 이벤트 코드

다음은 이벤트 처리를위한 샘플 소스 코드입니다. 시스템 모듈 (모든 게임 <-> 브라우저 상호 작용을 처리)은 두 가지 변수를 추적합니다 : lastMousePosition및 lastMouseDelta.

마우스로 카메라를 추적하려면 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에 전달할 수 있습니다.) 그리고 잘 가야합니다.

— 크리스 스미스
소스