javascript - p5.j​​s 3D 草图中的背景图像

Question

我有一个 p5.js 3D 草图。我必须设置它的背景图像。我知道我们可以使用相同的 background() 轻松实现它在 2D 草图中起作用，但在 3D 草图中无法实现。
我用谷歌搜索了一些技巧，发现我可以拥有 plane Canvas 的尺寸在后面，然后使用 texture()设置其背景图像，如下例所示。

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()在我的草图中。因此，当我四处拖动时，背景( plane )也会移动。我希望我的背景是静态的(当我移动其他对象时它不应该移动)。
最后，我求助于 css background-image属性设置canvas的背景图像并删除 background(255)在 draw()功能。但是由于这个原因，当我拖动对象时，背景(前几帧)没有重叠并且也是可见的。
在这种情况下如何实现背景图像？
我的草图可在 https://editor.p5js.org/praneetdixit1234/sketches/9pN4lA8KB 获得

Answer 1

我认为您的 CSS 方法很好，只是不确定为什么要使用 cover关于尺寸...
你的图片是 1365px 宽，但你的 Canvas 只有 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);这是工作示例:
https://editor.p5js.org/heldersepu/sketches/ll8txfcs0

我还添加了 smooth()在我的样本上:


差异很明显，请在此处阅读更多信息:
https://p5js.org/reference/#/p5/smooth