20200620 鋼彈&地球
今天老師教了讓3D的鋼彈模型和地球轉動的程式
先從鋼彈模型開始
一開始把老師給的5個檔案都拉進Processing裡
再來要載入檔案 讓鋼彈模型出現
只讀obj檔是因為 obj檔會呼叫mtl檔 mtl檔又會呼叫AO.jpg跟Diffuse.jpg
所以只要讀入一個obj檔 剩下的就會全部跑完!
(可以自己用Notepad++開來看看 但不要直接點開mtl檔 不然檔案會壞掉!)
PShape gundam;
void setup()
{
size(500,500,P3D);
gundam=loadShape("Gundam.obj");
}
void draw()
{
shape(gundam);
}
--------------------------------------------------------------------------------------------------------------------------
因為鋼彈模型太小了 所以我們要把它放大
PShape gundam;
void setup()
{
size(500,500,P3D);
gundam=loadShape("Gundam.obj");
}
void draw()
{
scale(10,10,10);//scale(x,y,z); 調整縮放比例
shape(gundam);
}
--------------------------------------------------------------------------------------------------------------------------
因為鋼彈模型太旁邊了 所以要移到畫面中間
PShape gundam;
void setup()
{
size(500,500,P3D);
gundam=loadShape("Gundam.obj");
}
void draw()
{
translate(250,0,0);//translate(x,y,z); 移動位置
scale(10,10,10);//scale(x,y,z); 調整縮放比例
shape(gundam);
}
--------------------------------------------------------------------------------------------------------------------------
再來要讓鋼彈模型可以轉動
PShape gundam;
void setup()
{
size(500,500,P3D);
gundam=loadShape("Gundam.obj");
}
void draw()
{
rotate(1);//rotate(radians); 旋轉角度
translate(250,0,0);//translate(x,y,z); 移動位置
scale(10,10,10);//scale(x,y,z); 調整縮放比例
shape(gundam);
}
--------------------------------------------------------------------------------------------------------------------------
因為旋轉的角度是用弧度算 所以上面那樣的轉法會怪怪的
要改成用radians(frameCount)才可以
(1秒轉60度 6秒轉360度)
PShape gundam;
void setup()
{
size(500,500,P3D);
gundam=loadShape("Gundam.obj");
}
void draw()
{
rotate(radians(frameCount));//rotate(radians); 旋轉角度
translate(250,0,0);//translate(x,y,z); 移動位置
scale(10,10,10);//scale(x,y,z); 調整縮放比例
shape(gundam);
}
--------------------------------------------------------------------------------------------------------------------------
因為旋轉的中心點在左上角 所以這樣轉還是會怪怪的 要改成以Y軸為中心才可以
PShape gundam;
void setup()
{
size(500,500,P3D);
gundam=loadShape("Gundam.obj");
}
void draw()
{
translate(250,0,0);//translate(x,y,z); 移動位置
scale(10,10,10);//scale(x,y,z); 調整縮放比例
rotateY(radians(frameCount));//rotate(radians); 旋轉角度
shape(gundam);
}
--------------------------------------------------------------------------------------------------------------------------
再來要讓鋼彈模型可以雙腳著地
PShape gundam;
void setup()
{
size(500,500,P3D);
gundam=loadShape("Gundam.obj");
}
void draw()
{
translate(250,0,0);//translate(x,y,z); 移動位置
scale(10,-10,10);//scale(x,y,z); 調整縮放比例
rotateY(radians(frameCount));//rotate(radians); 旋轉角度
shape(gundam);
}
--------------------------------------------------------------------------------------------------------------------------
鋼彈模型的位置太高 所以要再往下移動
PShape gundam;
void setup()
{
size(500,500,P3D);
gundam=loadShape("Gundam.obj");
}
void draw()
{
translate(250,400,0);//translate(x,y,z); 移動位置
scale(10,-10,10);//scale(x,y,z); 調整縮放比例
rotateY(radians(frameCount));//rotate(radians); 旋轉角度
shape(gundam);
}
--------------------------------------------------------------------------------------------------------------------------
最後清背景 就完成了!
PShape gundam;
void setup()
{
size(500,500,P3D);
gundam=loadShape("Gundam.obj");
}
void draw()
{
background(128);
translate(250,400,0);//translate(x,y,z); 移動位置
scale(10,-10,10);//scale(x,y,z); 調整縮放比例
rotateY(radians(frameCount));//rotate(radians); 旋轉角度
shape(gundam);
}
--------------------------------------------------------------------------------------------------------------------------
下一個要做的是地球
一開始一樣先把老師給的圖片放進Processing裡
然後先把圖片讀進來
PImage img;
void setup()
{
size(300,300,P3D);
img=loadImage("earth.jpg");
}
void draw()
{
image(img,0,0);
}
--------------------------------------------------------------------------------------------------------------------------
再來要畫一個圓球
PImage img;
void setup()
{
size(300,300,P3D);
img=loadImage("earth.jpg");
}
void draw()
{
image(img,0,0);
sphere(100);//畫圓球
}
--------------------------------------------------------------------------------------------------------------------------
但是剛剛那個方法畫出來的圓球 沒辦法將圖貼到上面
所以要換別的方式畫圓球
PImage img;
PShape globe;
void setup()
{
size(300,300,P3D);
img=loadImage("earth.jpg");
globe=createShape(SPHERE,100);//畫圓球
}
void draw()
{
image(img,0,0);
//sphere(100);//畫圓球
shape(globe);
}
--------------------------------------------------------------------------------------------------------------------------
再來要把圖片貼到圓球上
PImage img;
PShape globe;
void setup()
{
size(300,300,P3D);
img=loadImage("earth.jpg");
globe=createShape(SPHERE,100);//畫圓球
globe.setTexture(img);//把img貼到globe上
}
void draw()
{
//image(img,0,0);
//sphere(100);//畫圓球
shape(globe);
}
--------------------------------------------------------------------------------------------------------------------------
再來要把地球放到螢幕中間
PImage img;
PShape globe;
void setup()
{
size(300,300,P3D);
img=loadImage("earth.jpg");
globe=createShape(SPHERE,100);//畫圓球
globe.setTexture(img);//把img貼到globe上
}
void draw()
{
//image(img,0,0);
//sphere(100);//畫圓球
translate(300/2,300/2);//移動位置
shape(globe);
}
--------------------------------------------------------------------------------------------------------------------------
但是用上面的方法設定位置的話 只要把螢幕放大地球就會跑掉
所以要用螢幕的寬跟長來設定位置
這樣就不會跑掉了
PImage img;
PShape globe;
void setup()
{
size(300,300,P3D);
img=loadImage("earth.jpg");
globe=createShape(SPHERE,100);//畫圓球
globe.setTexture(img);//把img貼到globe上
}
void draw()
{
//image(img,0,0);
//sphere(100);//畫圓球
translate(width/2,height/2);//移動位置(螢幕寬的一半 螢幕長的一半)
shape(globe);
}
--------------------------------------------------------------------------------------------------------------------------
接下來要讓地球上的線條消失
PImage img;
PShape globe;
void setup()
{
size(300,300,P3D);
img=loadImage("earth.jpg");
globe=createShape(SPHERE,100);//畫圓球
globe.setStroke(false);//不顯示線條
globe.setTexture(img);//把img貼到globe上
}
void draw()
{
//image(img,0,0);
//sphere(100);//畫圓球
translate(width/2,height/2);//移動位置(螢幕寬的一半 螢幕長的一半)
shape(globe);
}
--------------------------------------------------------------------------------------------------------------------------
再來要讓地球跟鋼彈模型一樣可以旋轉
PImage img;
PShape globe;
void setup()
{
size(300,300,P3D);
img=loadImage("earth.jpg");
globe=createShape(SPHERE,100);//畫圓球
globe.setStroke(false);//不顯示線條
globe.setTexture(img);//把img貼到globe上
}
void draw()
{
//image(img,0,0);
//sphere(100);//畫圓球
translate(width/2,height/2);//移動位置(螢幕寬的一半 螢幕長的一半)
rotateY(radians(frameCount));//旋轉角度
shape(globe);
}
--------------------------------------------------------------------------------------------------------------------------
最後再清背景 就完成了!
PImage img;
PShape globe;
void setup()
{
size(300,300,P3D);
img=loadImage("earth.jpg");
globe=createShape(SPHERE,100);//畫圓球
globe.setStroke(false);//不顯示線條
globe.setTexture(img);//把img貼到globe上
}
void draw()
{
background(128);
//image(img,0,0);
//sphere(100);//畫圓球
translate(width/2,height/2);//移動位置(螢幕寬的一半 螢幕長的一半)
rotateY(radians(frameCount));//旋轉角度
shape(globe);
}
--------------------------------------------------------------------------------------------------------------------------
心得
這次是最後一堂課，而且是補端午連假放掉的課，老師教了之前都沒學過的3D模型!我們以後的課也會學到這些東西，感覺現在學的這些會很實用，而且我們之前學的都是2D的東西，這次能看到會動的3D模型在Processing裡面跑，感覺更有趣了!
沒有留言:
張貼留言