javascript - 围绕自身旋转 3D 球体 - webGL

Question

我正在尝试使用 webGL 构建 3D 太阳系。
我让所有恒星按照应有的方式绕太阳旋转，并且我希望它们也绕自己的 Y 轴旋转。
我怎样才能添加它？我尝试过:

mat4.rotate(mvMatrix, degToRad(starsList[i].Yangle), [1, 0, 0]);

但我得到了奇怪的结果。
有什么帮助吗？

mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0, 0, -30]);

    for (i = 0; i < starsList.length; i++) {  
        mvPushMatrix();
        mat4.rotate(mvMatrix, degToRad(starsList[i].angle), [0, 1, 0]);
        mat4.rotate(mvMatrix, degToRad(starsList[i].Yangle), [1, 0, 0]);

        mat4.translate(mvMatrix, starsList[i].initPlace);
        mvPopMatrix(); 
     }


var lastTime = 0;

function animate() {
    var timeNow = new Date().getTime();
    if (lastTime != 0) {
        var elapsed = timeNow - lastTime;
        for (i = 0; i < starsList.length; i++) { 
            starsList[i].angle += starsList[i].speed * elapsed;
            starsList[i].Yangle += starsList[i].speed * elapsed;

        }
    }
    lastTime = timeNow;
}

Answer 1

这应该可以解决问题

mat4.rotate(mvMatrix, degToRad(starsList[i].Yangle), [0,1,0]);

注意向量 [0, 1, 0]，我将 x 值设为 0，将 y 值设为 1。我喜欢将向量视为代表旋转轴。在这个stackoverflow question.上找到了很多有用的信息。另外，我发现了这个website是有益的。 (这篇博文是关于旋转对象的，所以它应该会派上用场!)