Я пытаюсь реализовать движение первого лица с помощью мыши.
У меня есть работа с клавиатурой, но у меня возникают трудности с ее использованием с помощью мыши, поскольку перемещение на определенную сторону не так ясно (например, перемещение влево может включать перемещение вверх или вниз).
Я хочу использовать matrix3d для получения измененных значений позиции.
EDIT # 2 Вот jsfiddle.
EDIT Я вставил новый код, который мне удалось решить:
$(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 при одном и том же изменении матрицы, а затем фиксируя это, теперь проблема связана с cos(XTURN).toFixed(10), которая может быть связана к поворотам X и Y, поэтому вы можете видеть, что это работает, но не идеально.
Почитал бы любые советы/идеи.
P.S Я не хочу использовать API-указатель указателей, хотя это здорово, так как я хочу, чтобы он поддерживал максимальное количество браузеров.
