Sterowany myszką ruch pierwszej osoby JS

Question

Próbuję zaimplementować ruchy pierwszoosobowe za pomocą myszy. Mam to działa z klawiaturą, ale mam trudności z zaimplementowaniem go za pomocą myszy, ponieważ ruch do określonej strony nie jest tak oczywisty (tzn. Ruch w lewo może obejmować przesuwanie w górę lub w dół). Chcę użyć matrix3d, aby otrzymać zmienione wartości pozycji. To jest jsfiddle.

EDIT mam wklejony nowy kod udało mi się rozwiązać:

$(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(); 
    }); 

Jak widać (Niestety dla matrycy jednej linii) Jestem podając zmiany X i Obroty Y na tej samej zmianie matrycy, a następnie jej zatwierdzenie, problem jest teraz z cos(XTURN).toFixed(10), który może być powiązany z obrotami X i Y, więc możesz zobaczyć, że działa, ale nie jest doskonały. Doceniam wszelkie wskazówki/pomysły.

P.S Nie chcę korzystać z Pointer Lock API, mimo że jest świetny, ponieważ chcę, aby obsługiwał maksymalną liczbę przeglądarek.

Answer 1

Czysta JavaScript jest przeważnie lepsze niż bibliotek (chyba, że ​​jest to „Kod mniej zrobić więcej” rzeczy),
od możesz zrozumieć, co naprawdę robi twój kod.

To jest mój cały kod JavaScript:

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)'; 
}; 

I this is the fiddle.

Działa!

(I nawet się tego przykład używając API Pointer Lock: fiddle (Kliknij kwadrat, aby rozpocząć)

---

Objaśnienie:

pierwsze, zmienna prędkość łatwo ustawić prędkość obrotowa:
Następnie, zdarzenie mousemove, które ma ustawione dwa zestawy zmiennych obrotu
Ostatnia linia ma zostać przekształcona z rotateX iTransformacje, zgodnie z wymaganiami, do matrix3d. This Stackoverflow question pomógł mi uzyskać następujące rozwiązanie.

---

rotateX(angleX) jest równa następującej macierzy:

1    0    0    0 


0    cos(angleX)  -sin(angleX) 0 


0    sin(angleX)  cos(angleX)  0 


0    0    0    1 

rotateY(angleY) jest równa następującej macierzy:

cos(angleY)  0    sin(angleY)  0 


0    1    0    0 


-sin(angleY) 0    cos(angleY)  0 


0    0    0    1 

i wykorzystanie ich obu razem, trzeba pomnożyć dwa macierze. Napisałem więc małe narzędzie JavaScript, aby podać obliczenia, które muszę wykonać, aby uzyskać wynik tego mnożenia.

Rezultat:

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 

I to jest sposób na konwersję rotateX i rotateY do matrix3d.

Nadzieja to pomaga :)

Answer 2

Nie jest dla mnie jasne, jaki jest twój cel wysokiego poziomu. Wygląda na to, że próbujesz zaimplementować grę podobną do Counterstrike w JS i CSS. Co jest niesamowite! W dalszej części tej odpowiedzi zakładam, że próbujesz coś takiego zrobić.

Realistycznie musisz użyć użyć API blokady wskaźnika. W przeciwnym razie nie będzie można się odwrócić, przesuwając mysz w lewo. Uderzysz w krawędź okna przeglądarki i przestaniesz obracać. Obsługa przeglądarki nie jest świetna, ale zdecydowanie lepsze wrażenia dla graczy!

Aby oddać swój świat za pomocą transformacji CSS, należy wykonać skomplikowaną serię transformacji, aby wygenerować matrycę dla każdej strony każdego obiektu widocznego w świecie gry. Dzieje się tak, ponieważ perspektywa przeglądarki zawsze patrzy bezpośrednio wzdłuż osi Z. Aby więc animować rzeczy "wokół" oka widza, trzeba je tłumaczyć i obracać. Po krótkim pokręceniu doszedłem do wniosku, że wykonanie wszystkich transformacji w CSS jest zbyt powolne (i skomplikowane!). Ale nigdy się nie bój, jest inny sposób! WebGL lub Canvas na ratunek!

Spójrz na grę Isaaca Sukina Nemesis. To doskonały przykład, a on napisał tutorial, żeby wymyślić coś podobnego! Oparta na niej biblioteka Three.js jest bardzo szeroko stosowana i ma bardzo zrozumiały interfejs API. Potrwa prawie cały trudny kawałek i pozwala stworzyć świat 3D!

Powodzenia w grze!

Answer 3

Korzystanie z kwaternionów jest naprawdę łatwiejsze. Znalazłem implementacja w Google closure library więc zrobiłem przykład (także sprawdzić 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(",") + ")" 
    }); 
});