How to pass multiple textures into one mesh in react-three-fiber?

user_9328610 0
Viewed 673

Using React-three-fiber, I’m trying to build out a carousel made of plane geometries that I intend to animate. I’m having a bit of trouble figuring out how to pass multiple textures inside my basic mesh material so that each of my three planes have a unique texture (like a carousel of images) Would appreciate any feedback on the best approach!

I made use of react-three-drei’s useTexture:

const [ texture1, texture2, texture3 ] = useTexture([`${strike1}`, `${strike2}`, `${strike3}`]);
return (
<>
<mesh>
<meshBasicMaterial map={} />
...
mesh react-three-fiber three.js textures
1 Answers

I would load the textures one level outside of the plane component and then pass each texture down independently as a prop. you can make the textures 1 array without deconstructing and them map that array:

const textures = useTexture(['texture-1','texture-2'])

const mappedTextures = textures.map((el) => {
    return <CarouselItem texture={el} />
})

return (
    <Canvas>
        {mappedTextures}
    <Canvas/>
)


//this is just a fake function to show the prop chain. texture gets passed to child component
function CarouselItem({texture}) {

}

You get the idea from this. The other issue you will have is you are going to have to pass independant positions down to the mesh as well, or else all these planes will be in the same position.

user_128100700
Related