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, Oct 02 '16 at 10:15
ok, I will think about it, but its still not solve my problem with spin around the Y axis — john, Oct 02 '16 at 10:26
[This might be helpful](http://webglfundamentals.org/webgl/lessons/webgl-scene-graph.html) — gman, Oct 02 '16 at 10:34
@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, Oct 02 '16 at 11:20

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

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!)

edited May 23 '17 at 12:15

Community

1
1

answered Oct 02 '16 at 10:20

splay

327
2
12

I think its should be [1 0 0]. and I already check this website but still no success.. I appriciate if you have an answer – john Oct 02 '16 at 10:24

rotate 3D sphere around itself - webGL

1 Answers1