rotate 3D sphere around itself - webGL

Question

I'm trying to build 3D solar system with webGL.
I have all the stars moving in a circle around the sun as sholud be, and I want them also to spin around their own Y axis.
How can I add it? I tried :

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

but I got wierd result.
any help?

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;
}

I would suggest you don't move each star around the sun using rotation matrix, but rather compute the location using the angle and move each planet to correct location using translation matrix. — davidv
ok, I will think about it, but its still not solve my problem with spin around the Y axis — john
@john I know, just a tip. Another thing you might want to look into are quaternions. Rotations using only matrices have some problems and caveats, and so many programmers use quaternions for rotations. — davidv

splay splay · Accepted Answer · 2016-10-02T10:20:22

this should do the trick

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

notice the vector [0, 1, 0], the x value I made 0 and the y value I made 1. I like to think of the vector representing the axis of rotation. There is a lot of useful information found on this stackoverflow question. Additionally, I found this website to be beneficial. (this blog post is about rotating objects so it should come in handy!)

rotate 3D sphere around itself - webGL

1 Answers