Making a Sphere Rotate in WebGL
<p>Not sure what I'm missing here. Trying to make a planet (i.e. sphere) rotate by having the user click on a 'Rotate' button, but can't seem to figure it out. I do have the following segment which rotates the sphere by way of user interaction with the mouse:</p>

<pre><code>    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;
}
</code></pre>

<p>This one works fine, but I also want to make the planet rotate automatically after the user clicks the button. Here is my <code>onLoad</code> function:</p>

<pre><code>    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(); 
}
</code></pre>

<p>My question is: How can I 'toggle' the rotation after the user clicks the button? So far what I've tried is modify the <code>onmousemove</code> function in an attempt to make the sphere rotate without user interaction, but that's not working. </p>

<p>As an update, here is a new <code>doRotate()</code> function I added:</p>

<pre><code>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);
}
</code></pre>

<p>Which is currently not working for me. This function is supposed to be called when the button is clicked, toggling the rotation. </p>

<p><strong>Update:</strong> </p>

<p>For a similar demo, please see <a href="http://learningwebgl.com/lessons/lesson11/index.html">this page</a>. What I'm trying to do is make the sphere rotate automatically after the user clicks the relevant button. This is obviously not in the demo linked--that's only for clarification purposes. </p>

<p><strong>Update 2:</strong></p>

<p>I've since figured it out. Please see my answer below for details. </p>