簡體   English   中英

P5.js - 結合兩個草圖,2D 和 WEBGL,一個在另一個之上

[英]P5.js - combine two sketches, 2D and WEBGL, sitting one on top of the other

我正在嘗試組合兩個 p5.js 草圖並將它們作為網站背景,一個在另一個之上。 特別是,第一個是對聲音做出反應的橢圓,第二個是旋轉的 3D object。 我需要將它們都定位在 canvas 的中心。

使用實例模式時有兩個問題我無法克服:

  1. 從兩個 2D 草圖開始,我無法將 position 一個放在另一個之上。 當嘗試將p.canvas.style('z-index', '-1')應用到底部時,它會消失。

  2. 當添加 WEBGL 作為 canvas 規范的第三個元素時,canvas 消失。

因此,我想知道是否有可能實現上述目標? 如果是,實例模式是否正確?

提前致謝!

更新:

正如建議的那樣,我嘗試使用 createGraphics 並工作!

現在我只剩下 3D model 位於 2D canvas 頂部的問題。 當我在 createGraphics 中應用 WEBGL 時,變換函數的反應似乎不同 - 好像它不能識別軸的中心點並改變速度,也許?

這是 Github 存儲庫(model 就在那里,只需移動鼠標使其出現):

https://bianchinicecilia.github.io/XMAS-Web/

如您所見,我認為 object 的中心似乎已翻譯。

這不是 model 的問題,因為我在另一個簡單的 WEBGL canvas 中對其進行了測試。 這是工作示例的 GH 存儲庫: https://bianchinicecilia.github.io/CreateGraphics/

有什么想法嗎? 謝謝

用 extraCanvas.push() + extraCanvas.pop() 解決。

這是工作圖 function:

function draw() {
  //sound reaction
  background('#F4EDED');

  var vol = amp.getLevel();
  var diam = map(vol, 0, 0.3, 370, 600);

  fill('#FFFFFF');
  noStroke();
  ellipse(width / 2, height / 2, diam, diam);

  // obj

  extraCanvas.ambientLight(50);
  extraCanvas.directionalLight(255, 255, 255, 0, 0, 1);
  extraCanvas.noStroke();

  extraCanvas.push();

  extraCanvas.rotateZ(frameCount * 0.005);
  extraCanvas.rotateX(frameCount * 0.005);
  extraCanvas.rotateY(frameCount * 0.005);

  // Rotate in direction of mouse
  let posX = width/8;
  let posY = height/8;

  let angle = Math.atan2(mouseY-posY, mouseX-posX);

  // Rotate on MouseDrag
  /*let angle = 0;

  if (mouseIsPressed) {
    angle =  atan2(mouseY - height / 2, mouseX - width / 2);
  }*/

  extraCanvas.rotateX(angle);
  extraCanvas.rotateY(angle);
  extraCanvas.rotateZ(angle);

  //extraCanvas.translate(-100, 0, 0);
  extraCanvas.clear();
  extraCanvas.texture(kitten);
  extraCanvas.model(train);

  image(extraCanvas, 0, 0);

  extraCanvas.pop();

}

這是解釋該過程的 Reddit 線程: https://www.reddit.com/r/p5js/comments/k2ydcp/combine_2_sketches_one_2d_one_webgl_and_make_them/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM