如何在 three.js 中使用 Matrix4 加速修复我的旋转

Question

我希望在使用 Matrix4 按下 "x" 键时能够旋转我的对象。然而，我下面的代码有效，我按住 "x" 键的时间越长，对象开始随着时间的推移旋转得更快然后开始。我该如何解决这个问题。

var r1 = 1, r5 = 1, r9 = 1, r2 = 0, r3 = 0, r4 = 0, r6 = 0, r7 = 0, r8 = 0;
var Rx = 0, Ry = 0, Rz = 0;
var rotation = new THREE.Matrix4();

function keyDown(event){
    if(event.key == 'x'){
        mesh.matrixAutoUpdate = false;
        Rx += Math.PI/180 //1 degree per key press
        r5 = Math.cos(Rx);
        r6 = -Math.sin(Rx);
        r8 = Math.sin(Rx);
        r9 = Math.cos(Rx);
        rotation.set( r1, r2, r3, 0,
                      r4, r5, r6, 0,
                      r7, r8, r9, 0,
                      0, 0, 0, 1 );
        mesh.applyMatrix4(rotation);
    }
    if(event.key == 'y'){

    }
    if(event.key == 'z'){

    } 

}

let loader = new THREE.STLLoader();
var material = new THREE.MeshLambertMaterial({color: 0x818181});

loader.load('STL/test.stl', function (geometry) {
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
});

window.addEventListener("keypress", keyDown);

Answer 1

.applyMatrix4 不设置矩阵，它将新变换连接到网格的当前变换。由于 Rx 递增，因此旋转增加并且旋转速度加快。不要增加 Rx，在每次按键时附加相同的变换（1°），以解决问题：

~~Rx += Math.PI/180~~

Rx = Math.PI/180 //1 degree per key press
r5 = Math.cos(Rx);
r6 = -Math.sin(Rx);
r8 = Math.sin(Rx);
r9 = Math.cos(Rx);
rotation.set( r1, r2, r3, 0,
              r4, r5, r6, 0,
              r7, r8, r9, 0,
              0, 0, 0, 1 );
mesh.applyMatrix4(rotation);

如何在 three.js 中使用 Matrix4 加速修复我的旋转

How to fix my rotation from speeding up using Matrix4 in three.js

javascript

rotation

three.js