I’m having some difficulty with a carousel I have built. It’s not a carousel per se that has navigation, but rather a ring of plane geometries that rotate around so the different planes can be seen.
I have written it using React-Three-Fiber and in order to get the planes to curve around to form the ring I’ve used a shader to bend them. The issue I am having is when it has come to place images as textures on each plane. I have 10 images for 10 planes, but each plane displays the last image instead of image 1 on plane 1, image 2 on plane 2, and so on.
I’m still very new to Three.js and shaders, and amazed I have got this far to be honest, but I cannot figure out why the images are not appearing one per plane? I have a minimal code sandbox demo if someone has some time to take a look and advise what I need to do or if I need to refactor anything?