Jia的互動技術日誌 Week15

 😆😆😆

這週算是開啟大變化的一週

把原先寫好的蛋糕重新寫了一遍

💾 程式碼存檔區

PImage imgCake1;
PImage cir1;
void setup(){
  size(1920,1080,P3D);
  imgCake1 = loadImage("888.jpg");
  cir1 = loadImage("cir1.png");
}
void draw(){
  background(#D8E3FF);
  //directionalLight(50, 50, 50, 0.5, 1,1);///直射光
  ambientLight( 255, 255, 255, 500, 500, 1000);//環境光
  camera(300,-400,-500,0,0,0,0,1,0);
  fill(255);
  pushMatrix(); //地板
    fill(237,204,132);
    translate(-50,390,100);
    rotateY(100);
    box(3000, 20, 700);
  popMatrix();
  
  pushMatrix();
    beginShape(TRIANGLE_FAN); //盤子
    fill(255);
    for(float a=0;a<TWO_PI+0.1;a+=0.1){
      float x=270*cos(a),z=270*sin(a),y=150;
      vertex(x,y,z,250+240*cos(a),250+240*sin(a));
    }
    rotateY(middleRotate);
    endShape();
  popMatrix();
  
  pushMatrix();
    beginShape(TRIANGLE_STRIP);
    noStroke();
    fill(255);
    for(float a=0;a<TWO_PI+0.1;a+=0.1){
      float x=270*cos(a),z=270*sin(a),y=170;
      vertex(x,y+0,z,a*900/TWO_PI,250);
      vertex(x,y-20,z,a*900/TWO_PI,0);
    }
    rotateY(middleRotate);
    endShape();
  popMatrix();
  
  pushMatrix();
    beginShape(TRIANGLE_FAN); //1
    fill(255);
    texture(cir1);
    for(float a=0;a<TWO_PI+0.1;a+=0.1){
      float x=200*cos(a),z=200*sin(a),y=0;
      vertex(x,y,z,250+240*cos(a),250+240*sin(a));
    }
    rotateY(middleRotate);
    endShape();
  popMatrix();
  
  pushMatrix();
    beginShape(TRIANGLE_STRIP);
    noStroke();
    fill(255);
    texture(imgCake1);
    for(float a=0;a<TWO_PI+0.1;a+=0.1){
      float x=200*cos(a),z=200*sin(a),y=150;
      vertex(x,y+0,z,a*900/TWO_PI,250);
      vertex(x,y-150,z,a*900/TWO_PI,0);
    }
    rotateY(middleRotate);
    endShape();
  popMatrix();
  
  pushMatrix();
    beginShape(TRIANGLE_FAN);  //2
    fill(255);
    texture(cir1);
    for(float a=0;a<TWO_PI+0.1;a+=0.1){
      float x=150*cos(a),z=150*sin(a),y=-130;
      vertex(x,y,z,250+240*cos(a),250+240*sin(a));
    }
    rotateY(middleRotate);
    endShape();
  popMatrix();
    
  pushMatrix();
    beginShape(TRIANGLE_STRIP);
    noStroke();
    fill(255);
    texture(imgCake1);
    for(float a=0;a<TWO_PI+0.1;a+=0.1){
      float x=150*cos(a),z=150*sin(a),y=0;
      vertex(x,y+0,z,a*900/TWO_PI,250);
      vertex(x,y-130,z,a*900/TWO_PI,0);
    }
    rotateY(middleRotate);
    endShape();
  popMatrix();
}
float middleRotate = 0;
void mouseDragged(){
    if(mouseButton==CENTER) middleRotate += (mouseX-pmouseX)*0.01;
}

分段介紹一下內容

所有的3D圖形都使用push pop繪製

這樣方便移動旋轉

貼貼圖之前呢要用上 beginShape() 結尾 endShape()

TRIANGLE_STRIP 三角形貼面用這個把蛋糕外圈貼起來

TRIANGLE_FAN 貼蛋糕的頂 用扇形

裡面內容更是要介紹 舉例蛋糕側邊

  pushMatrix();
    beginShape(TRIANGLE_STRIP);
    noStroke();
    fill(255);
    texture(imgCake1);
    for(float a=0;a<TWO_PI+0.1;a+=0.1){
      float x=150*cos(a),z=150*sin(a),y=0;
      vertex(x,y+0,z,a*900/TWO_PI,250);
      vertex(x,y-130,z,a*900/TWO_PI,0);
    }
    rotateY(middleRotate);
    endShape();
  popMatrix();

為什麼要加0.1? 不然不會繞滿一圈

150是什麼? 我想要的大小

y=0? 位置從哪開始 

厚度多後呢? 0 ~ -130

900 250是什麼? 配合我圖片的長寬 才能正確

再來舉例 蛋糕頂部

  pushMatrix();
    beginShape(TRIANGLE_FAN);  //2
    fill(255);
    texture(cir1);
    for(float a=0;a<TWO_PI+0.1;a+=0.1){
      float x=150*cos(a),z=150*sin(a),y=-130;
      vertex(x,y,z,250+240*cos(a),250+240*sin(a));
    }
    rotateY(middleRotate);
    endShape();
  popMatrix();

頂部和側邊要互相對照才會貼齊

250? 圖片的中心點

240? 圓的半徑

反覆對照調整才有機會做出好看的3D蛋糕

接著會看到旋轉的方式重寫了

float middleRotate = 0;
void mouseDragged(){
    if(mouseButton==CENTER) middleRotate += (mouseX-pmouseX)*0.01;
}

在每個需要旋轉的模型裡藏下

rotateY(middleRotate);

這樣按著中鍵就能旋轉啦

再來就是 += or -= 以及*多少

從這裡改變是順時針轉動或逆時針，以及轉動多少

有點感覺，可以以這個為基礎丟回程式裡並放上美美的圖片啦