reactjs - React 三纤维，使用动态纹理

Question

我试图建造一个可以改变墙壁和地板纹理的房间。类似于THIS，但带有房间模型。

我按照相同的步骤加载了模型。我尝试使用TextureLoader和<meshStandardMaterial />来加载图像纹理。当我第一次加载它时，它会加载。预览在这里。但是当我更改valtio代理值时，我得到了一个错误。我已在此处发布代码以供预览。

错误： Uncaught TypeError: 'set' on proxy: trap returned falsish for property Name

我的要求是点击右图像卡，我想改变墙壁/地板的纹理。

尝试了谷歌上列出的许多解决方案，但找不到任何解决方案。

这是我到目前为止想出的代码，

如果我如下使用它，它可以工作。

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>

但是当我使用useEffectoruseState更新proxyusing的值时useProxy，它会显示上述错误。

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

仅供参考，我仍在学习react和ThreeJS。任何形式的帮助都会有所帮助。

标签： reactjsreact-hooksreact-three-fiber