javascript - 鼠标控制第一人称移动JS

Question

我正在尝试使用鼠标实现第一人称移动。我确实让它与键盘一起工作，但我在使用鼠标实现它时遇到困难，因为向特定一侧的移动不是那么清楚(即向左移动可以包括向上或向下移动)。我想使用 matrix3d 来接收位置的更改值。

EDIT #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 旋转的变化，然后提交它，现在的问题是 cos(XTURN) .toFixed(10) 可能与 X 和 Y 旋转有关，因此您可以看到它有效但并不完美。将不胜感激任何提示/想法。

P.S 我不想使用 Pointer Lock API ，尽管它很棒，因为我希望它支持最大数量的浏览器。

Answer 1

纯 JavaScript 在很大程度上优于库(除非它是“代码少做多”)，
因为您可以理解您的代码真正做了什么。

这是我的全部 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)';
};

和this is the fiddle .

有效!

(我什至使用 Pointer Lock API 做了一个例子:fiddle (点击方 block 开始)

---

解释:

首先，一个速度变量可以轻松设置旋转速度。
然后，设置了两个旋转变量的 mousemove 事件。
最后一行是根据要求将 rotateX 和 rotateY 转换转换为 matrix3d。 This Stackoverflow question帮助我找到了以下解决方案。

---

rotateX(angleX) 等于以下矩阵:

1               0               0               0


0               cos(angleX)     -sin(angleX)    0


0               sin(angleX)     cos(angleX)     0


0               0               0               1

rotateY(angleY) 等于以下矩阵:

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

这就是将 rotateX 和 rotateY 转换为 matrix3d 的方法。

希望对您有所帮助:)