如何在 P3D 中将图像覆盖在另一个图像上答案

【问题标题】：How to overlay an image over another in P3D如何在 P3D 中将图像覆盖在另一个图像上
【发布时间】：2018-06-09 07:12:38
【问题描述】：

在 processing.js 中，如何在 P3D 模式下将图像叠加到另一个图像上？

这是我的代码：

/* @pjs preload="duck.jpg"; */
/* @pjs preload="a.png"; */ 
PImage imageDuck;
PImage imageA;

void setup() {
    size(500, 500, P3D);
    imageDuck = loadImage("duck.jpg");
    imageA = loadImage("a.png");
}

void draw() {
    background(255);
    noStroke();
    image(imageDuck, 0, 0);
    image(imageA, 0, 0);
}

所以代码试图做的是显示一个鸭子图像，然后在它上面覆盖另一个图像名称 a.png（具有透明背景）。

当我使用普通 size(500, 500); 没有 P3D 模式时，图像叠加效果很好。

但是，我正在使用 P3D，因为接下来我要做的是将图像一起旋转。

所以在这个 size(500, 500, P3D) 模式下，我可以看到我的 a.png 闪烁一次，然后只显示我的鸭子图像。如果我注释掉鸭子，a.png 将显示。如果我注释掉 a.png，我的鸭子就会显示出来。如果我重新排序 image() 调用，仍然只显示鸭子图像。我在 image() 调用之间添加了 translate(0,0,-1) 或 translate(0,0,1)，没有运气，只有我的鸭子图像显示。

这可能吗？

【问题讨论】：

标签： image processing processing.js

【解决方案1】：

我解决了我的问题，它是第一行@pjs，只能调用一次。必须在一行中预加载多个图像。在我的示例中，我的前 2 行必须像这样组合：

/* @pjs preload="duck.jpg,a.png"; */

【讨论】：