如何在p5.js的box()的每一面保留不同的图片？ [英] How do I / Is it posssible to keep different picture in each side of box() in p5.js?

问题描述

作为P5.js的初学者，我正在尝试制作一个交互式骰子，现在唯一的问题是在立方体的每一面都保持不同的面孔。

以下是我的代码：

let sizeOfCube = 400, img;

function preload() {
    img = loadImage("olo/fgfg.jpg");
}

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw() {
    background(250);
    translate(0, 0, sizeOfCube);
    if (sizeOfCube > 100) {
        sizeOfCube -= 10;
    }
    rotateX(frameCount * 0.1);
    rotateY(frameCount * (0.1));
    rotateZ(frameCount * 0.1);
    texture(img);
    box(70, 70, 70);
}

此代码添加图像，但应用于所有侧面。是否有方法将6个图像添加到全部6面？

有关演示(纹理和其他)，请访问hereMight take some time to load. Please wait!

有什么建议或替代方法吗？请一定要说出来。

推荐答案

我这里有一个有效的解决方案。我尝试了上面的建议，使用四边形，并使用纹理和旋转逐个绘制每个脸。我还将draFaceBox函数抽象出来，以便您可以通过传入您自己的维度轻松地重用它。

function preload() {
  BOX_WIDTH = 1083;
  BOX_HEIGHT = 1457;
  BOX_DEPTH = 345;
  FRONT_IMG = loadImage('images/front.png');
  LEFT_IMG = loadImage('images/left.png');
  TOP_IMG = loadImage('images/top.png');
  RIGHT_IMG = loadImage('images/right.png');
  BOTTOM_IMG = loadImage('images/bottom.png');
  BACK_IMG = loadImage('images/back.png');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  // Make sure the box always fit the screen.
  SCALE_FACTOR = windowHeight / 2 /
      Math.max(Math.max(BOX_WIDTH, BOX_HEIGHT), BOX_DEPTH);
}

function drawFaceBox(boxWidth, boxHeight, boxDepth,
    front, top, right, bottom, left, back) {
  angleMode(DEGREES); 
  let w = boxWidth * SCALE_FACTOR;
  let h = boxHeight * SCALE_FACTOR;
  let d = boxDepth * SCALE_FACTOR;

  // Center the box.
  translate(-w / 2, -h / 2);

  texture(front);
  quad(0, 0, w, 0, w, h, 0, h);

  push();
  texture(left);
  translate(0, 0, -d);
  rotateY(-90);
  quad(0, 0, d, 0, d, h, 0, h);

  pop();
  push();
  texture(top);
  translate(0, 0, -d);
  rotateX(90);
  quad(0, 0, w, 0, w, d, 0, d);

  pop();
  push();
  texture(right);
  translate(w, 0, 0);
  rotateY(90);
  quad(0, 0, d, 0, d, h, 0, h);

  pop();
  push();
  texture(bottom);
  translate(0, h, 0);
  rotateX(-90);
  quad(0, 0, w, 0, w, d, 0, d);

  pop();
  push();
  texture(back);
  rotateY(180);
  translate(-w, 0, d);
  quad(0, 0, w, 0, w, h, 0, h);
}

function draw() {
  background(50);

  // Simple rotation control by mouse.
  rotateX(mouseY);
  rotateY(-mouseX);

  drawFaceBox(BOX_WIDTH, BOX_HEIGHT, BOX_DEPTH,
      FRONT_IMG, TOP_IMG, RIGHT_IMG, BOTTOM_IMG, LEFT_IMG, BACK_IMG);
}

这篇关于如何在p5.js的box()的每一面保留不同的图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！