마우스로 제어되는 1 인칭 동작 JS

Question

마우스를 사용하여 1 인칭 동작을 구현하려고합니다. 키보드로 작업해도 마우스를 사용하여 구현하는 데 어려움이 있습니다. 특정면으로의 이동이 명확하지 않아서 (즉, 왼쪽으로 움직이는 것이 위 또는 아래로 움직이는 것을 포함 할 수 있기 때문입니다.) 변경된 위치 값을 받으려면 matrix3d을 사용하고 싶습니다.

편집 # 2 여기는 jsfiddle입니다.

편집는 내가 해결하기 위해 관리했습니다 새 코드를 붙여 넣은 :

$(document).on('mousemove', function (e) { 
     var MOVE = 10; // how much to move 
     var XTURN = 1; // how much to rotate 
     var YTURN = 1; // how much to rotate 
     var transformer, origMat, translationMatrix, result; 
     transformer = document.getElementById("transformer"); 

     if ($.browser.webkit) 
      origMat = new WebKitCSSMatrix(window.getComputedStyle(transformer).webkitTransform); 

     //turn left 
     if (e.pageX < xPrev) { 
      if (XTURN < 0) { 
       XTURN *= -1; 
      } 
      xPrev = e.pageX; 
     //turn right 
     } else { 
      if (XTURN > 0) { 
       XTURN *= -1; 
      } 
      xPrev = e.pageX; 

     } 
     //look up 
     if (e.pageY < yPrev) { 
      if (YTURN < 0) { 
       YTURN *= -1; 
      } 
      yPrev = e.pageY; 
     //look down 
     } else { 
      if (YTURN > 0) { 
       YTURN *= -1; 
      } 
      yPrev = e.pageY; 
     } 

     translationMatrix = new WebKitCSSMatrix("matrix3d(" + cos(XTURN).toFixed(10) + ",0," + sin(XTURN).toFixed(10) + ",0,0,"+ cos(-YTURN).toFixed(10) +","+ sin(YTURN).toFixed(10) +",0, " + sin(-XTURN).toFixed(10) + ","+ sin(-YTURN).toFixed(10) +"," + cos(XTURN).toFixed(10) + ",0,0,0,0,1)"); 

     transformer.style.webkitTransform = translationMatrix.multiply(origMat).toString(); 
    }); 

내가이 X의 변경 사항을 진술하고있어 (하나 개의 라인 매트릭스 죄송합니다)에서 볼 수 있듯이 및 같은 행렬에서 Y 행렬을 바꾼 다음 커밋하면 이제는 X 및 Y 회전과 관련 될 수있는 cos(XTURN).toFixed(10)을 사용하여 문제가 해결됩니다. 그러나 완벽하지는 않습니다. 팁/아이디어를 주시면 감사하겠습니다.

피씨 나는 최대한의 브라우저를 지원하기를 원하기 때문에 Pointer Lock API을 사용하고 싶지 않습니다.

Answer 1

순수 자바 스크립트 라이브러리보다 대부분 더 나은을하기 때문에,
을 (그것은 일 "코드가 덜 더을"않는 한) 코드가 실제로 무엇을하는지 이해할 수 있습니다.

var velocity = 0.5; 

document.onmousemove = function(e) { 
    var angleX = e.pageY * velocity * Math.PI/180; 
    var angleY = e.pageX * velocity * Math.PI/180; 
    document.getElementById('transformer').style.webkitTransform = 'matrix3d(' + Math.cos(-angleY) + ',0,' + Math.sin(-angleY) + ',0,' + (Math.sin(angleX)*Math.sin(-angleY)) + ',' + Math.cos(angleX) + ',' + (-Math.sin(angleX)*Math.cos(-angleY)) + ',0,' + (-Math.cos(angleX)*Math.sin(-angleY)) + ',' + Math.sin(angleX) + ',' + (Math.cos(angleX)*Math.cos(-angleY)) + ',0,0,0,0,1)'; 
}; 

그리고 this is the fiddle :

이 내 전체 자바 스크립트 코드입니다.

작동합니다!

(나는 심지어 포인터 잠금 API를 사용하여이 예를했다

: fiddle은 (시작하기 위해 사각형을 클릭)를

---

설명 :

첫째, 속도 변수를 쉽게 설정할 수있는
두 개의 회전 변수가 설정된 mousemove 이벤트
마지막 줄은 rotateX과로 변환됩니다.변환을 요청하면 matrix3d으로 변경됩니다. This Stackoverflow question 다음 솔루션을 얻는 데 도움이되었습니다.

1    0    0    0 


0    cos(angleX)  -sin(angleX) 0 


0    sin(angleX)  cos(angleX)  0 


0    0    0    1 

rotateY(angleY)는 다음의 행렬과 같다 :

---

rotateX(angleX)는 다음의 행렬과 같다

cos(angleY)  0    sin(angleY)  0 


0    1    0    0 


-sin(angleY) 0    cos(angleY)  0 


0    0    0    1 

과 함께 모두 사용하려면 두 가지를 곱해야 행렬. 그래서이 곱셈의 결과를 얻기 위해 필요한 계산을 제공하는 작은 JavaScript 도구를 작성했습니다.

결과 :

cos(angleY)    sin(angleX)*sin(angleY) cos(angleX)*sin(angleY) 0 



0       cos(angleX)    -sin(angleX)    0 



-sin(angleY)    sin(angleX)*cos(angleY) cos(angleX)*cos(angleY) 0 



0       0       0       1 

그리고 그 matrix3d에 rotateX 및 rotateY 변환하는 방법입니다.

은 도움이 :) 당신이 그것을 작동하는 경우, 당신이 대답에 변경 무엇을 게시하거나 질문 (답변이 더 나은 것)을 삭제하시기 바랍니다

Answer 2

귀하의 높은 목표가 무엇인지는 분명하지 않습니다. JS 및 CSS에서 Counterstrike와 유사한 게임을 구현하려는 것 같습니다. 어느 것이 굉장합니다! 이 답변의 나머지 부분에 대해서는, 당신이 그런 것을하려고한다고 가정 할 것입니다.

현실적으로, 은 포인터 잠금 API를 사용해야합니다. 그렇지 않으면 마우스를 왼쪽으로 움직여서 방향을 바꿀 수 없습니다. 브라우저 창 가장자리를 치고 회전을 멈 춥니 다. 브라우저 지원은 좋지 않지만 게이머에게는 훨씬 좋은 경험입니다!

CSS 변환으로 세계를 렌더링하려면 게임 세계에서 볼 수있는 모든 객체의 모든면에 대해 행렬을 생성하기 위해 복잡한 일련의 변형을 수행해야합니다. 이는 브라우저의 관점이 항상 Z 축을 따라 직접보고 있기 때문입니다. 따라서 시청자의 눈을 "주변에서"움직이게하려면 주위를 번역하고 회전해야합니다. 약간의 파고 끝에 CSS에서 모든 변형을하는 것이 매우 느리고 복잡하다는 결론에 도달했습니다. 그러나 결코 두려워하지 마십시오, 또 다른 방법이 있습니다! WebGL 또는 Canvas를 구출하십시오!

Isaac Sukin의 게임 Nemesis을보세요. 훌륭한 예입니다. 그는 비슷한 것을 생각해 내기 위해 tutorial을 작성했습니다. Three.js를 기반으로하는 라이브러리는 매우 널리 사용되고 있으며 매우 이해하기 쉬운 API를 가지고 있습니다. 거의 모든 어려운 부분을 제거하고 3D 세계를 만들 수 있습니다!

게임에 대한 행운을 비세요!

Answer 3

쿼터니언 사용이 정말 쉽습니다. 나는 Google closure library의 구현 그래서 예 (또한, the jsFiddle 확인) 만든 발견

goog.require('goog.vec.Quaternion'); 

var velocity = 0.5; 

var lastX = null; 
var lastY = null; 
var angleX = 0; 
var angleY = 0; 

$(document).on('mousemove', function (e) { 
    if (lastX == null) lastX = e.pageX; 
    if (lastY == null) lastY = e.pageY; 

    angleX += (e.pageX - lastX) * velocity * Math.PI/180; 
    angleY += (e.pageY - lastY) * velocity * Math.PI/180; 

    lastX = e.pageX; 
    lastY = e.pageY; 

    var quat = goog.vec.Quaternion.concat(
     goog.vec.Quaternion.fromAngleAxis(angleX, [0, 1, 0], []), 
     goog.vec.Quaternion.fromAngleAxis(-angleY, [1, 0, 0], []), []); 

    var matrix = goog.vec.Quaternion.toRotationMatrix4(quat, []); 

    $("#transformer").css({ 
     webkitTransform: "matrix3d(" + matrix.join(",") + ")" 
    }); 
});