使球体在WebGL中旋转

Question

不知道我在这里缺少什么.尝试通过让用户点击"旋转"按钮来使行星(即球体)旋转,但似乎无法弄明白.我确实有以下段通过用户与鼠标的交互来旋转球体:

    document.onmousemove = function() {
        if (!mouseDown) {
            return;
        }
        var newX = event.clientX;
        var newY = event.clientY;

        var deltaX = newX - lastMouseX
        var newRotationMatrix = mat4.create();
        mat4.identity(newRotationMatrix);
        mat4.rotate(newRotationMatrix, degToRad(deltaX / 10), [0, 1, 0]);

        var deltaY = newY - lastMouseY;
        mat4.rotate(newRotationMatrix, degToRad(deltaY / 10), [1, 0, 0]);

        mat4.multiply(newRotationMatrix, planetRotationMatrix, planetRotationMatrix);

        lastMouseX = newX
        lastMouseY = newY;
}

这个工作正常,但我也希望在用户点击按钮后让行星自动旋转.这是我的onLoad功能:

    window.onload = function onLoad() {
        canvas = document.getElementById("gl-canvas");
        initGL(canvas);
        initShaders();
        initBuffers();
        initTexture();
        initEvtHandlers();

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.enable(gl.DEPTH_TEST);

        var newRotationMatrix = mat4.create();
        mat4.identity(newRotationMatrix);
        document.getElementById("rotate").onclick = function () {
            // rotation code goes here?
        }
        render(); 
}

我的问题是:用户点击按钮后如何"切换"旋转？到目前为止,我所尝试的是修改onmousemove函数以试图使球体旋转而无需用户交互,但这不起作用.

作为更新,这是doRotate()我添加的新功能:

var myRotationMatrix = mat4.create();
mat4.identity(myRotationMatrix);

doRotate = function () {
    var dx = 1;
    var newMatrix = mat4.create();
    mat4.identity(newMatrix);
    mat4.rotate(newMatrix, degToRad(dx / 10), [0, 1, 0]);

    mat4.multiply(newMatrix, myRotationMatrix);
    requestAnimFrame(doRotate);
}

哪个目前不适合我.单击按钮时,应调用此函数,切换旋转.

更新:

有关类似的演示,请参阅此页面.我要做的是在用户点击相关按钮后自动旋转球体.这显然不在演示链接中 - 这只是为了澄清目的.

更新2:

我已经弄清楚了.有关详细信息,请参阅下面的答案.

Answer 1

经过无数次的尝试和错误，我自己弄清楚了。基本上，正如WaclawJapser提到的那样，我并没有重新绘制场景。我也完全忽略了制服。我不会发布完整的代码，但这是修复后的相关功能：

requestAnimationFrame(rotatePlanet);

    function rotatePlanet(now) {
        if (flag == false) {
            return; // do nothing if unchecked
        } else {
            // Start by clearing the current buffers to avoid an overlap.
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            // Subtract the previous time from the current time.
            now *= 0.001;
            var deltaTime = now - then;
            // Cache the current time to remember it for the next frame.
            then = now;

            // Every frame increases the rotation a little.
            rotation[0] += rotationSpeed * deltaTime;

            // Perform the necessary transformations. 
            mat4.identity(mvMatrix);
            mat4.translate(mvMatrix, [0, 0, -6]);
            mat4.rotate(mvMatrix, rotation[0], [0, 1, 0]); // rotates around y
            mat4.rotate(mvMatrix, rotation[1], [1, 0, 0]); // rotates around x

            // Set the matrix.
            setMatrixUniforms();

            // Draw the geometry.
            gl.drawElements(gl.TRIANGLES, planetVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

            requestAnimationFrame(rotatePlanet);
        }
    }

现在这完全符合我最初的预期。我不知道它是否会对任何人有帮助，因为这似乎是一个相当狭窄的问题，但我想我会发布状态更新。

感谢所有试图提供帮助的人！