Javascript p5.js三维草图中的背景图像

我有一个p5.js三维草图。我必须设置它的背景图像。我知道我们可以在二维草图中使用相同的

background（）

函数轻松实现它，但在三维草图中是不可能的

我在谷歌上搜索了一些技巧，发现我可以有一个

平面

，背面有画布的尺寸，然后使用

纹理（）

设置其背景图像，如下图所示

var img;
function preload() {
  img = loadImage("img.png");
}

function setup() { 
  createCanvas(600, 600, WEBGL);
} 

function draw() { 
  background(220);
  
  push();
  texture(img);
  plane(600, 600);
  pop();
}

但问题是——我必须在草图中使用

orbitControl（）

。因此，当我四处拖动时，背景（

平面

）也会移动。我希望我的背景是静态的（当我移动其他对象时，背景不应该移动）

最后，我使用css

background image

属性设置

canvas

的背景图像，并在

draw（）函数中删除
background（255）
。但是由于这个原因，当我拖动对象时，背景（以前的帧）没有重叠，并且也是可见的

在这种情况下，如何实现背景图像

我的草图可以在
上找到，我认为你的CSS方法很好，只是不确定为什么要在尺寸上使用
封面
。

您的图像宽1365px，但画布仅为600px，其中大部分将被隐藏，文本将无法完全看到，但在将来，如果您使用
cover
更改图像，效果可能会很好

这是我用过的

canvas {
  display: block;
  background-image: url("https://static.vecteezy.com/system/resources/previews/000/118/983/original/free-vector-cityscape.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}

…并且不移除背景，设置alpha
background（0,0,0,0）

这是工作示例：



我还在示例中添加了
smooth（）
：



差异是显而易见的，请在此处阅读更多信息：

谢谢。我以前没想过alpha值。