forEach() and current element of an array - foreach

Question

First question on stackOverflow.
Hi everybody,
I created a slide show with Three.js.
There is a uniform called uCorners (Vec2) that allows me to animate the corners of each image.
When the page loads, the timeline (gsap) starts instantly for 4 out of 5 images.
Only 1 image is controllable by the Dat.gui.
I don't see how I can animate each image independently.
Here is my code.
import * as THREE from 'three'
import ExperienceSketch from '../ExperienceSketch'
import * as dat from 'dat.gui';
import Frag from '../../shader/fragment.glsl'
import Vert from '../../shader/vertex.glsl'
import image1 from '../../assets/img/texture.jpg'
import image2 from '../../assets/img/image2.webp'
import image3 from '../../assets/img/logo-acier.webp'
import gsap from 'gsap'
export default class Sketch
{
constructor()
{
this.experience = new ExperienceSketch()
this.camera = this.experience.camera
this.scene = this.experience.scene
this.sizes = this.experience.sizes
this.time = this.experience.time
this.cloths = [
{ title: 'Print#1', src: image1},
{ title: 'Print#2', src: image2},
{ title: 'Print#3', src: image3},
{ title: 'Print#4', src: image2},
{ title: 'Print#5', src: image3}
]
this.description = document.querySelector('div.description')
this.prevTag = document.querySelector('nav a.prev')
this.nextTag = document.querySelector('nav a.next')
this.current = 0
this.currentRotationY = 0
this.aimRotationY = 0
this.arc = (Math.PI * 2 / this.cloths.length)
this.loader = new THREE.TextureLoader()
this.gui = new dat.GUI()
this.loadObject()
this.navigation()
this.setupSettings()
}
setupSettings()
{
this.settings = { progress: 0 }
this.gui.add(this.settings, "progress", 0, 1, 0.001)
}
loadObject()
{
this.cloths.forEach((cloth, index) =>{
cloth.uniforms = {
uTime: { value: 1 },
uProgress: { value: 0 },
uTexture: { value: this.loader.load(cloth.src)},
uTextureSize: { value: new THREE.Vector2(100, 100 )},
uCorners: { value: new THREE.Vector2( 0,0 )},
uResolution: { value: new THREE.Vector2( this.sizes.width, this.sizes.height)},
uQuadSize: { value: new THREE.Vector2( 400, 400)}
}
this.geometry = new THREE.PlaneGeometry( 400, 400, 100, 100 );
this.material = new THREE.ShaderMaterial({
uniforms: cloth.uniforms,
vertexShader: Vert,
fragmentShader: Frag
})
this.tl = gsap.timeline()
.to(this.material.uniforms.uCorners.value, {
x: 1
})
.to(this.material.uniforms.uCorners.value, {
y: 1
})
this.mesh = new THREE.Mesh( this.geometry, this.material );
this.group = new THREE.Group()
this.group.add(this.mesh)
this.group.rotation.set(0, index * this.arc, 0)
this.mesh.position.set(0, 0, -800)
this.scene.add( this.group )
})
}
navigation()
{
const next = ()=>{
this.current += 1
this.aimRotationY += this.arc
if(this.current > this.cloths.length - 1){
this.current = 0
}
update()
}
const prev = ()=>{
this.current -= 1
this.aimRotationY -= this.arc
if(this.current < 0){
this.current = this.cloths.length - 1
}
update()
}
const update = ()=>{
this.description.innerHTML = this.cloths[this.current].title
}
update()
this.prevTag.addEventListener('click', (event)=>{
event.preventDefault()
prev()
})
this.nextTag.addEventListener('click', (event)=>{
event.preventDefault()
next()
})
}
update()
{
const diffy = (this.aimRotationY - this.currentRotationY) * 0.025
this.currentRotationY += diffy
this.camera.instance.rotation.set(0, this.currentRotationY, 0)
this.tl.progress(this.settings.progress)
}
}