P5.js WEBGL图片画廊动画texture使用导致黑屏问题求助

问题根因 #

你的代码仅为渲染上下文绑定了纹理材质，没有绘制任何承载纹理的几何体，纹理无法独立渲染，因此只会显示空白画布。

修复步骤 #

1. 修改Type类的display方法，在设置纹理后补充绘制承载纹理的平面几何体，这里使用和你加载图片尺寸匹配的400*400平面即可，也可根据需求自定义尺寸。
2. 可额外添加noStroke()去掉平面的默认边框，优化显示效果。

修复后完整代码 #

let imgs = [];
let imgs_arr = [];
let num = 15;

function preload() {
  for (let i = 0; i < num; i++) {
    imgs[i] = loadImage("https://picsum.photos/400/400/?image=" + i * 10);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  noStroke(); // 去掉几何体边框，可选配置
  for (let i = 0; i < num; i++) {
    let x = random(-width / 2, width / 2);
    let y = random(-height / 2, height / 2);
    let z = random(-width*5, width/2);
    let texture = new Type(imgs[i], x, y, z)
    imgs_arr.push(texture);
  }
}

function draw() {
  background(0,0,0);
  orbitControl();
  for (let i = 0; i < num; i++) {
    imgs_arr[i].update();
    imgs_arr[i].display();
  }
}

class Type {
  constructor(_img, _x, _y, _z) {
    this.img = _img;
    this.x = _x;
    this.y = _y;
    this.z = _z;
  }

  update() {
    this.z += 10;
    if(this.z > width/2){
      this.z = -width*5;
    }
  }
    
  display() {
    push();
    translate(this.x, this.y, this.z);
    texture(this.img);
    plane(400, 400); // 新增：绘制承载纹理的平面
    pop();
  }
}

内容的提问来源于stack exchange，提问作者Ahmed Meeran