[英]P5.js - combine two sketches, 2D and WEBGL, sitting one on top of the other
我正在嘗試組合兩個 p5.js 草圖並將它們作為網站背景,一個在另一個之上。 特別是,第一個是對聲音做出反應的橢圓,第二個是旋轉的 3D object。 我需要將它們都定位在 canvas 的中心。
使用實例模式時有兩個問題我無法克服:
從兩個 2D 草圖開始,我無法將 position 一個放在另一個之上。 當嘗試將p.canvas.style('z-index', '-1')
應用到底部時,它會消失。
當添加 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.