Having trouble applying an array of images to planes, each plane with its own image

Questions
, ,
1

Hey all,

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?

Codesandbox demo

Thanks,
Jon

2

I traced it to your CurvedShader

There is only 1 in memory, and each time you assign it to the next Plane, you overwrite the last texture in its own memory.

So I deep cloned it.

  return (
    <mesh ref={mesh}>
      <planeGeometry args={[2.2, 1.4, 40, 1]} />
      <shaderMaterial
        args={[JSON.parse(JSON.stringify(CurvedShader))]}
        uniforms-amplitude-value={amplitude}
        uniforms-curveWidth-value={curveWidth}
        uniforms-textureMap-value={texture}
      />
    </mesh>
  )

Perhaps there is a better way. I am not sure.

3

Hi @seanwasere, thanks very much for this! It works just as I was hoping now. I didn’t know the last texture would be overwritten so that is great to learn that.

Thanks