在p5中上傳影像以創建影片并將其匯出為視頻-有解無憂

我正在嘗試加載一組影像，然后為每個影像單獨創建一個影片，然后匯出該影片。影片只是一個旋轉的立方體，一側是影像。目前我可以批量上傳影像，但隨后我得到并出錯："Cannot read properties of undefined (reading 'gifProperties')"這似乎與texture()命令有關

我暫時執行了以下操作：要上傳檔案，我似乎無法真正回圈，因為它們的名稱并不完全相同，我無法找到一種方法來獲取檔案中包含的所有影像，而無需指定每個影像的檔案名。因此我做了以下事情：

let plate;
let invisible_sides;
let invisible_up_down;

function setup() {
    createCanvas(800, 800, WEBGL);
    textSize(18);
    text("Select the images", 20, 20);
    inputbtn = createFileInput(FileSimple,"true");
    inputbtn.position(30, 40);
    //then i need additional elements: 
    invisible_sides = createGraphics(400,400); 
    invisible_up_down= createGraphics(400,400);  
    BOX_WIDTH = 400;
    BOX_HEIGHT = 400;
    BOX_DEPTH = 400;
}

上面的不可見變數只是為了用不可見紋理填充立方體的某些側面。

然后我需要將檔案資料轉換為影像，為此我在我的設定中呼叫了 FileSimple 函式——createFileInput：

function FileSimple(file){

if (file.type == 'image'){

    plate = createImg(file.data, '' )

}else{

    img = null;

} }

然后我在另一個 Stack Overflow 問題上找到了這個答案，用于在不同側面具有不同紋理的旋轉立方體影片：（對不起，我再也找不到提要了）

 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);
  }

這里我們似乎有關于紋理動作的問題。

最后，我想顯示影片，因此我運行了 draw 函式：

function draw(){
 background(255);

 drawFaceBox(BOX_WIDTH, BOX_HEIGHT, BOX_DEPTH,
 plate, invisible_up_down, invisible_sides, invisible_up_down, invisible_sides, 
 plate);   }

對于專案的匯出部分，我考慮使用本教程：https : //stubborncode.com/posts/how-to-export-images-and-animations-from-p5-js/

非常感謝您提供的任何幫助

uj5u.com熱心網友回復：

您呼叫的問題texture()在于它的引數不能為空或未定義。您可以通過在plate尚未定義時默認為空白紋理來解決此問題：

const SCALE_FACTOR = 0.5;

let arial;
let plate;
let blank;

function preload() {
  arial = loadFont('https://www.paulwheeler.us/files/Arial.otf');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  textFont(arial);
  textSize(18);
  text("Select the images", 20, 20);
  inputbtn = createFileInput(FileSimple, "true");
  inputbtn.position(30, 40);
  //then i need additional elements:
  blank = createGraphics(400, 400);
  BOX_WIDTH = 400;
  BOX_HEIGHT = 400;
  BOX_DEPTH = 400;
}

function draw() {
  background(255);
  
  orbitControl(1, 1, 0.1);

  drawFaceBox(
    BOX_WIDTH,
    BOX_HEIGHT,
    BOX_DEPTH,
    // Don't pass null or undefined here because texture() will fail
    plate || blank,
    blank,
    blank,
    blank,
    blank,
    plate || blank
  );
}

function FileSimple(file) {
  if (file.type == "image") {
    plate = createImg(file.data, "");
  }
}

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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/372885.html

標籤：javascript 动画片视频 3d p5.js

上一篇：我如何在向下滾動時修復我的影像，它位于導航欄的頂部，而文本不是

下一篇：滑動擴展影片旁邊的專案