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.