React Three Fiber, Use dynamic Texture

Viewed 338

I was trying to build a room in which walls and floor texture can be changed. similar to THIS, but with a room model.

I followed the same steps and loaded the model. I tried using TextureLoader and the <meshStandardMaterial /> to load the image texture. When I'm loading it for the first time, it loads. Preview is here. but when I change the valtio proxy value, I'm getting an error. I've published the code here for the preview.

Error: Uncaught TypeError: 'set' on proxy: trap returned falsish for property Name

My requirement is On click of right image cards, I want to change the texture of walls/floor.

Tried many solutions listed on google, but couldn't find any solution.

This is the code which I came up with till now,

If I use it as below, it works.

const state = proxy({
  current: null,
  items: {
    texture: "",
    texture1: "",
    texture2: ""
  },
})
...
const texture = useLoader(TextureLoader, "wood-1.jpg");
const textureWall = useLoader(TextureLoader, "wall-3.jpg");
const textureFloor = useLoader(TextureLoader, "floor-1.jpg");
...
<mesh
    geometry={nodes.Wall_4.geometry}
    material={nodes.Wall_4.material}
    position={[-17.97, -0.13, -0.04]}
    rotation={[Math.PI / 2, 0, 0]}
    scale={[0.09, 0.09, 0.09]}>
<meshStandardMaterial map={texture} attach="material"/>
</mesh>

but when I use useEffect or useState to update the value of proxy using useProxy, It will show the above error.

useEffect(() => {
 texture = useLoader(TextureLoader, state.items.texture);
}, [state.items.texture])

FYI, I'm still learning both react and ThreeJS. any form of help would be helpful.

0 Answers
Related