Estoy tratando de cargar dinámicamente un conjunto de imágenes y traducirlas en la dirección Z a una velocidad constante mientras tengo valores aleatorios para X e Y

Estoy trabajando con el siguiente código y no sé cómo usar la propiedad de texture de imagen.

Obtengo un lienzo negro en blanco al renderizar el siguiente código con el que trabajé. Cualquier ayuda será apreciada.

 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); 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) pop(); } }