使用 JavaScript 旋转 3D 对象

Question

我正在 p5.js (JavaScript) 中使用 WebGL 3D 对象。我有四个有点复杂的“独立”3D 对象，当按计划工作时，将通过 mouseOver 事件对其进行操作。理想情况下，当用户将鼠标移到其中一个孤立对象上时，该单个对象将在其 Y 轴上翻转 180 度，然后在所有四个对象都翻转后再翻转回来。

我认为我最大的问题是我能找到的每个示例都包含创建原始 3D 对象时/之前的旋转函数。但是，我需要它作为静止对象开始，并且仅在触发 mouseOver 事件后才移动。

let blueStartR = 144;
let blueStartG = 220;
let blueStartB = 255;

let greenStartR = 147;
let greenStartG = 229;
let greenStartB = 193;

let yelStartR = 249;
let yelStartG = 255;
let yelStartB = 150;

let purpStartR = 200; 
let purpStartG = 240;
let purpStartB = 170;

let swatches = [];

function setup() {
  createCanvas(600, 600, WEBGL);
  //frameRate = 15;
}

function draw() {
  background(195);
  
  //orbitControl();
  
  let swatchOne = new Swatch(-230, purpStartR, purpStartG, purpStartB, 'purple', false);
  swatchOne.id = "purpleSw";
  
  let swatchTwo = new Swatch(-80, blueStartR, blueStartG, blueStartB, 'blue', false);
  swatchTwo.id = "blueSw";
  
  let swatchThree = new Swatch(80, greenStartR, greenStartB, greenStartG, 'green', false);
  swatchThree.id = "greenSw";
  
  let swatchFour = new Swatch(230, yelStartR, yelStartB, yelStartG, 'yellow', false);
  swatchFour.id = "yellowSw";
  
  
  swatches.push(swatchOne);
  swatches.push(swatchTwo);
  swatches.push(swatchThree);
  swatches.push(swatchFour);
  
  for(var i = 0; i < swatches.length; i++){
    drawSwatch(swatches[i]);
    swatches[i].checkOver(mouseX, mouseY);
    //if(swatches[i].over){
    //  
    //}else{
    //  
    //}
  }
}


class Swatch {
  constructor(xTranslate, topColorFinal, topColorSecond, topColorMain, swatchColor, over){
    this.xTranslate = xTranslate;
    this.topColorFinal = topColorFinal;
    this.topColorSecond = topColorSecond;
    this.topColorMain = topColorMain;
    this.swatchColor = swatchColor;
  }
  
  checkOver(mouseX, mouseY){
    if(mouseX > 30 && mouseX < 130 && mouseY > 30 && mouseY < 570){
      //swatches[0].over = true;
      swatches[0].over = true;
      console.log("over purple");
    }
    else{
      swatches[0].over = false;
    }
    if(mouseX > 150 && mouseX < 250 && mouseY > 30 && mouseY < 570){
      swatches[1].over = true;
      console.log("over blue");
    }
    else{
      swatches[1].over = false;
    }
    if(mouseX > 310 && mouseX < 410 && mouseY > 30 && mouseY < 570){
      swatches[2].over = true;
      console.log("over green");
    }
    else{
      swatches[2].over = false;
    }
    if(mouseX > 480 && mouseX < 580 && mouseY > 30 && mouseY < 570){
      swatches[3].over = true;
      console.log("over yellow");
    }
    else{
      swatches[3].over = false;
    }
  }
}

function drawSwatch(SwatchA){
  push();
    noStroke();
    fill('white');
    translate(SwatchA.xTranslate, 0, 0);
    box(100, 550, 2);
  pop();
  
  if(SwatchA.swatchColor == 'blue'){
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorSecond, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, -245, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 50, SwatchA.topColorSecond - 20, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, -175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 100, SwatchA.topColorSecond - 40, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, -105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 150, SwatchA.topColorSecond - 60, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, -35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 200, SwatchA.topColorSecond - 80, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, 35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 250, SwatchA.topColorSecond - 100, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, 105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 300, SwatchA.topColorSecond - 120, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, 175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 350, SwatchA.topColorSecond - 140, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, 245, 1);
    box(101, 60, 2);
  pop();
  }
  
    if(SwatchA.swatchColor == 'green'){
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond));
    translate(SwatchA.xTranslate, -245, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 50, SwatchA.topColorMain, SwatchA.topColorSecond - 20));
    translate(SwatchA.xTranslate, -175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 100, SwatchA.topColorMain, SwatchA.topColorSecond - 40));
    translate(SwatchA.xTranslate, -105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 150, SwatchA.topColorMain, SwatchA.topColorSecond - 60));
    translate(SwatchA.xTranslate, -35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 200, SwatchA.topColorMain, SwatchA.topColorSecond - 80));
    translate(SwatchA.xTranslate, 35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 250, SwatchA.topColorMain, SwatchA.topColorSecond - 100));
    translate(SwatchA.xTranslate, 105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 300, SwatchA.topColorMain, SwatchA.topColorSecond - 120));
    translate(SwatchA.xTranslate, 175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 350, SwatchA.topColorMain, SwatchA.topColorSecond - 140));
    translate(SwatchA.xTranslate, 245, 1);
    box(101, 60, 2);
  pop();
  }
  
      if(SwatchA.swatchColor == 'purple'){
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond));
    translate(SwatchA.xTranslate, -245, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 30, SwatchA.topColorMain - 30, SwatchA.topColorSecond - 30));
    translate(SwatchA.xTranslate, -175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 60, SwatchA.topColorMain - 60, SwatchA.topColorSecond - 60));
    translate(SwatchA.xTranslate, -105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 90, SwatchA.topColorMain - 90, SwatchA.topColorSecond - 90));
    translate(SwatchA.xTranslate, -35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 110, SwatchA.topColorMain - 110, SwatchA.topColorSecond - 110));
    translate(SwatchA.xTranslate, 35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 130, SwatchA.topColorMain - 130, SwatchA.topColorSecond - 130));
    translate(SwatchA.xTranslate, 105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 150, SwatchA.topColorMain - 150, SwatchA.topColorSecond - 150));
    translate(SwatchA.xTranslate, 175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 170, SwatchA.topColorMain - 170, SwatchA.topColorSecond - 170));
    translate(SwatchA.xTranslate, 245, 1);
    box(101, 60, 2);
  pop();
  }
  
      if(SwatchA.swatchColor == 'yellow'){
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond));
    translate(SwatchA.xTranslate, -245, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 30));
    translate(SwatchA.xTranslate, -175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 60));
    translate(SwatchA.xTranslate, -105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 90));
    translate(SwatchA.xTranslate, -35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 120));
    translate(SwatchA.xTranslate, 35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 150));
    translate(SwatchA.xTranslate, 105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 180));
    translate(SwatchA.xTranslate, 175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 220));
    translate(SwatchA.xTranslate, 245, 1);
    box(101, 60, 2);
  pop();
  }
}

function mouseOver(){
  for(var i = 0; i < swatches[i]; i++){
  //checkOver(mouseX, mouseY);
  }
}

Answer 1

我想出了如何执行它，至少只要我同意样本不存在，除非我的鼠标悬停在它上面。现在，我对此感到满意。发布更新以表明问题已解决。

let blueStartR = 144;
let blueStartG = 220;
let blueStartB = 255;

let greenStartR = 147;
let greenStartG = 229;
let greenStartB = 193;

let yelStartR = 249;
let yelStartG = 255;
let yelStartB = 150;

let purpStartR = 200; 
let purpStartG = 240;
let purpStartB = 170;

let swatches = [];

function setup() {
  createCanvas(600, 600, WEBGL);
  angleMode(DEGREES);
}

function draw() {
  background(195);
  
  //orbitControl();
  
  let swatchOne = new Swatch(-230, purpStartR, purpStartG, purpStartB, 'purple', false);
  swatchOne.id = "purpleSw";
  
  let swatchTwo = new Swatch(-80, blueStartR, blueStartG, blueStartB, 'blue', false);
  swatchTwo.id = "blueSw";
  
  let swatchThree = new Swatch(80, greenStartR, greenStartB, greenStartG, 'green', false);
  swatchThree.id = "greenSw";
  
  let swatchFour = new Swatch(230, yelStartR, yelStartB, yelStartG, 'yellow', false);
  swatchFour.id = "yellowSw";
  
  
  swatches.push(swatchOne);
  swatches.push(swatchTwo);
  swatches.push(swatchThree);
  swatches.push(swatchFour);
  
  for(var i = 0; i < swatches.length; i++){
    swatches[i].checkOver(mouseX, mouseY);
    swatches[i].drawMe();
  }
}


class Swatch {
  constructor(xTranslate, topColorFinal, topColorSecond, topColorMain, swatchColor, over){
    this.xTranslate = xTranslate;
    this.topColorFinal = topColorFinal;
    this.topColorSecond = topColorSecond;
    this.topColorMain = topColorMain;
    this.swatchColor = swatchColor;
    this.over = over;
  }
  
  checkOver(mouseX, mouseY){
    if(mouseX > 30 && mouseX < 130 && mouseY > 30 && mouseY < 570){
      //swatches[0].over = true;
      swatches[0].over = true;
      console.log("over purple");
    }
    else{
      swatches[0].over = false;
    }
    if(mouseX > 150 && mouseX < 250 && mouseY > 30 && mouseY < 570){
      swatches[1].over = true;
      console.log("over blue");
    }
    else{
      swatches[1].over = false;
    }
    if(mouseX > 310 && mouseX < 410 && mouseY > 30 && mouseY < 570){
      swatches[2].over = true;
      console.log("over green");
    }
    else{
      swatches[2].over = false;
    }
    if(mouseX > 480 && mouseX < 580 && mouseY > 30 && mouseY < 570){
      swatches[3].over = true;
      console.log("over yellow");
    }
    else{
      swatches[3].over = false;
    }
  }
  
  drawMe(){
    
    noStroke();
    
    push();
      fill('white');
      translate(this.xTranslate, 0, 0);
      if(this.over == true){       
        rotateY(frameCount * 4);
        //console.log(frameCount + " , " + frameCount * 4 );
        box(100, 550, 2);
      }
    pop();
    
    //drawBlues
    if(this.swatchColor == 'blue'){
      push();
        fill(color(this.topColorFinal, this.topColorSecond, this.topColorMain));
        translate(this.xTranslate, -245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 50, this.topColorSecond - 20, this.topColorMain));
        translate(this.xTranslate, -175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 100, this.topColorSecond - 40, this.topColorMain));
        translate(this.xTranslate, -105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 150, this.topColorSecond - 60, this.topColorMain));
        translate(this.xTranslate, -35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

       push();
        fill(color(this.topColorFinal - 200, this.topColorSecond - 80, this.topColorMain));
        translate(this.xTranslate, 35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 250, this.topColorSecond - 100, this.topColorMain));
        translate(this.xTranslate, 105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 300, this.topColorSecond - 120, this.topColorMain));
        translate(this.xTranslate, 175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 350,this.topColorSecond - 140, this.topColorMain));
        translate(this.xTranslate, 245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
      }
  
      //draw greens
    if(this.swatchColor == 'green'){
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond));
        translate(this.xTranslate, -245, 1);  
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        } 
      pop();

      push();
        fill(color(this.topColorFinal - 50, this.topColorMain, this.topColorSecond - 20));
        translate(this.xTranslate, -175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 100, this.topColorMain, this.topColorSecond - 40));
        translate(this.xTranslate, -105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 150, this.topColorMain, this.topColorSecond - 60));
        translate(this.xTranslate, -35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 200, this.topColorMain, this.topColorSecond - 80));
        translate(this.xTranslate, 35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 250, this.topColorMain, this.topColorSecond - 100));
        translate(this.xTranslate, 105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 300, this.topColorMain, this.topColorSecond - 120));
        translate(this.xTranslate, 175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 350, this.topColorMain, this.topColorSecond - 140));
        translate(this.xTranslate, 245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
      }
  
    //draw purples
    if(this.swatchColor == 'purple'){
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond));
        translate(this.xTranslate, -245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 30, this.topColorMain - 30, this.topColorSecond - 30));
        translate(this.xTranslate, -175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 60, this.topColorMain - 60, this.topColorSecond - 60));
        translate(this.xTranslate, -105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 90, this.topColorMain - 90, this.topColorSecond - 90));
        translate(this.xTranslate, -35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 110, this.topColorMain - 110, this.topColorSecond - 110));
        translate(this.xTranslate, 35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 130, this.topColorMain - 130, this.topColorSecond - 130));
        translate(this.xTranslate, 105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 150, this.topColorMain - 150, this.topColorSecond - 150));
        translate(this.xTranslate, 175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 170, this.topColorMain - 170, this.topColorSecond - 170));
        translate(this.xTranslate, 245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
      }
  
    //draw yellows
    if(this.swatchColor == 'yellow'){
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond));
        translate(this.xTranslate, -245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 30));
        translate(this.xTranslate, -175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 60));
        translate(this.xTranslate, -105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 90));
        translate(this.xTranslate, -35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 120));
        translate(this.xTranslate, 35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 150));
        translate(this.xTranslate, 105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 180));
        translate(this.xTranslate, 175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 220));
        translate(this.xTranslate, 245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
      }
  }
}