Orangutan - 第四週 - 旋轉Rotation

=========================================================================

Fourth

一、老師帶大家載資料，呈現車子的模型，並解釋旋轉

老師的網站網址(https://jsyeh.org/3dcg10/)

1.下載三個檔案

data.zip、win32、glut32.dll

2.將data.zip中的data拉到windows.zip並執行解壓縮Transformation.exe

3.選取要選轉的軸，去做旋轉，這邊選取的是X軸

4.選取要選轉的軸，去做旋轉，這邊選取的是Y軸

5.選取要選轉的軸，去做旋轉，這邊選取的是Z軸

註:旋轉 glRotatef(角度,X,Y,Z); 使用右手定則來知道旋轉的方向

二、用程式碼如何讓物體旋轉 glRotatef(angle,X,Y,Z)

1.先開好一個GLUT專案，並命名為week04-1_rotate

2.程式碼全刪,換我們上週教的10行，並且把框起來的那些程式碼補加上去，最終呈現的結果為茶壺原地向右旋轉

以下為上方程式碼

#include <GL/glut.h>

float angle = 0;

void display()

{

    glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); ///清背景

    glPushMatrix(); ///備份矩陣

        glRotatef(angle, 0, 1, 0);///旋轉角度

        glutSolidTeapot( 0.3 );

    glPopMatrix(); ///還原矩陣

    glutSwapBuffers();

    angle++;///把角度++

}

int main(int argc, char* argv[] )

{

    glutInit(&argc, argv);

    glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE|GLUT_DEPTH);

    glutCreateWindow("week03");

    glutDisplayFunc(display);

    glutIdleFunc(display);

    glutMainLoop();

}

3.再開一個GLUT專案，命名為week04-2_rotate_light

4.把177行程式碼換成剛剛寫得程式碼再加上框框中的程式碼來呈現光

以下為上方程式碼

myLight()

{

    const GLfloat light_ambient[]  = { 0.0f, 0.0f, 0.0f, 1.0f };

    const GLfloat light_diffuse[]  = { 1.0f, 1.0f, 1.0f, 1.0f };

    const GLfloat light_specular[] = { 1.0f, 1.0f, 1.0f, 1.0f };

    const GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };

    const GLfloat mat_ambient[]    = { 0.7f, 0.7f, 0.7f, 1.0f };

    const GLfloat mat_diffuse[]    = { 0.8f, 0.8f, 0.8f, 1.0f };

    const GLfloat mat_specular[]   = { 1.0f, 1.0f, 1.0f, 1.0f };

    const GLfloat high_shininess[] = { 100.0f };

    glEnable(GL_DEPTH_TEST);

    glDepthFunc(GL_LESS);

    glEnable(GL_LIGHT0);

    glEnable(GL_NORMALIZE);

    glEnable(GL_COLOR_MATERIAL);

    glEnable(GL_LIGHTING);

    glLightfv(GL_LIGHT0, GL_AMBIENT,  light_ambient);

    glLightfv(GL_LIGHT0, GL_DIFFUSE,  light_diffuse);

    glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular);

    glLightfv(GL_LIGHT0, GL_POSITION, light_position);

    glMaterialfv(GL_FRONT, GL_AMBIENT,   mat_ambient);

    glMaterialfv(GL_FRONT, GL_DIFFUSE,   mat_diffuse);

    glMaterialfv(GL_FRONT, GL_SPECULAR,  mat_specular);

    glMaterialfv(GL_FRONT, GL_SHININESS, high_shininess);

}

5.呈現出有光影的樣子

6.加上glClearColor(1,1,1,1);///用來清背景的色彩R,G,B,A、glColor3f(1,1,0);///加點色彩

來讓背景跟茶壺變顏色

以下為上方程式碼

#include <GL/glut.h>

float angle = 0;

void display()

{

    glClearColor(1,1,1,1);///用來清背景的色彩R,G,B,A

    ///(目前GLUT_RGB不會用到 A)

    glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); ///清背景

    glPushMatrix(); ///備份矩陣

        glRotatef(angle, 0, 1, 0);///旋轉角度

        glColor3f(1,1,0);///加點色彩

        glutSolidTeapot( 0.3 );

    glPopMatrix(); ///還原矩陣

    glutSwapBuffers();

    angle++;///把角度++

}

myLight()

{

    const GLfloat light_ambient[]  = { 0.0f, 0.0f, 0.0f, 1.0f };

    const GLfloat light_diffuse[]  = { 1.0f, 1.0f, 1.0f, 1.0f };

    const GLfloat light_specular[] = { 1.0f, 1.0f, 1.0f, 1.0f };

    const GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };

    const GLfloat mat_ambient[]    = { 0.7f, 0.7f, 0.7f, 1.0f };

    const GLfloat mat_diffuse[]    = { 0.8f, 0.8f, 0.8f, 1.0f };

    const GLfloat mat_specular[]   = { 1.0f, 1.0f, 1.0f, 1.0f };

    const GLfloat high_shininess[] = { 100.0f };

    glEnable(GL_DEPTH_TEST);

    glDepthFunc(GL_LESS);

    glEnable(GL_LIGHT0);

    glEnable(GL_NORMALIZE);

    glEnable(GL_COLOR_MATERIAL);

    glEnable(GL_LIGHTING);

    glLightfv(GL_LIGHT0, GL_AMBIENT,  light_ambient);

    glLightfv(GL_LIGHT0, GL_DIFFUSE,  light_diffuse);

    glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular);

    glLightfv(GL_LIGHT0, GL_POSITION, light_position);

    glMaterialfv(GL_FRONT, GL_AMBIENT,   mat_ambient);

    glMaterialfv(GL_FRONT, GL_DIFFUSE,   mat_diffuse);

    glMaterialfv(GL_FRONT, GL_SPECULAR,  mat_specular);

    glMaterialfv(GL_FRONT, GL_SHININESS, high_shininess);

}

int main(int argc, char* argv[] )

{

    glutInit(&argc, argv);

    glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE|GLUT_DEPTH);

    glutCreateWindow("week03");

    glutDisplayFunc(display);

    glutIdleFunc(display);

    myLight();

    glutMainLoop();

}

三、旋轉、移動的交換，結果是什麼，呈現出來的又是什麼

1.交換移動、旋轉的這兩行，並觀察跟原本的有什麼差別

觀察:交換後車子變成了公轉，glRotatef()變成讓車子以中心點公轉，glTranslatef()變成了距離中心的遠近

2.開一個GLUT專案，並命名為week04-3_rotate_translate，把weel04-1的程式碼copy到這裡

3.加上glTranslatef(0.6, 0, 0);就可以看到茶壺向右邊移動了

4.加上以下程式碼把紅色茶壺呈現出來，並且可以看到紅色茶壺是以中心來做公轉，黃色茶壺則是以自轉的方式做旋轉

下方程式碼跟黃色茶壺的最大不同則是rotate跟translate做交換了

glPushMatrix(); ///備份矩陣

    glRotatef(angle, 0, 1, 0);///旋轉角度

    glTranslatef(0.6, 0, 0);

    glColor3f(1,0,0);

    glutSolidTeapot( 0.3 );

glPopMatrix(); ///還原矩陣

以下為上面的程式碼

#include <GL/glut.h>

float angle = 0;

void display()

{

    glEnable(GL_DEPTH_TEST);

    glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); ///清背景

    glPushMatrix(); ///備份矩陣

        glTranslatef(0.6, 0, 0);

        glRotatef(angle, 0, 1, 0);///旋轉角度

        glColor3f(1,1,0);

        glutSolidTeapot( 0.3 );

    glPopMatrix(); ///還原矩陣

    glPushMatrix(); ///備份矩陣

        glRotatef(angle, 0, 1, 0);///旋轉角度

        glTranslatef(0.6, 0, 0);

        glColor3f(1,0,0);

        glutSolidTeapot( 0.3 );

    glPopMatrix(); ///還原矩陣

    glutSwapBuffers();

    angle++;///把角度++

}

int main(int argc, char* argv[] )

{

    glutInit(&argc, argv);

    glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE|GLUT_DEPTH);

    glutCreateWindow("week03");

    glutDisplayFunc(display);

    glutIdleFunc(display);

    glutMainLoop();

}