P5.js

Question

我正在尝试合并两个 p5.js 草图并将它们作为网站背景，一个放在另一个上面。特别是，第一个将是一个对声音做出反应的椭圆，第二个将是一个旋转的 3D 对象。我需要将它们都定位在 canvas.

的中心

在使用实例模式时有两个问题我无法克服：

从两个二维草图开始，我无法将一个放置在另一个之上。当尝试将 p.canvas.style('z-index', '-1') 应用到底部时，它消失了。
当添加 WEBGL 作为 canvas 规范的第三个元素时，canvas 消失。

所以我想知道是否有可能实现上述目标？如果是，实例模式是否是正确的处理方式？

提前致谢！

更新：

按照建议，我尝试使用 createGraphics 并成功了！

现在我只剩下 3D 模型位于 2D 之上的问题 canvas。当我在 createGraphics 中应用 WEBGL 时，变换函数似乎有不同的反应 - 好像它不识别轴的中心点并改变速度，也许？

这里是 Github 仓库（模型在某处，只需移动鼠标即可显示）：

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

正如你所看到的，我认为对象的中心似乎被平移了。

这不是模型的问题，因为我在另一个简单的 WEBGL canvas 中对其进行了测试。这是工作示例的 GH 存储库： https://bianchinicecilia.github.io/CreateGraphics/

有什么想法吗？谢谢

Answer 1

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

这是有效的绘制函数：

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/

P5.js - 合并两个草图，2D 和 WEBGL，一个放在另一个之上

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

javascript