reactjs - react-three-fiber 在画布上显示多个蒙皮网格

Question

嗨编码向导社区。这是我第一次使用 react-tree-fiber。我有我放在画布上的 3d 蒙皮模型。这里是沙盒。我想要实现的是能够根据某些事件（例如按下按钮等）在场景中放置多个角色。到目前为止，我找不到任何可以帮助我实现目标的东西。这可能会有所帮助，但我无法将其合并到我的代码中。任何帮助将不胜感激！

Answer 1

useLoader 缓存数据，因此两个实例都试图在同一个模型上运行。这可能适用于几何图形，但我认为您不能让两个蒙皮网格引用同一个骨架。甚至不确定是否可以克隆它，看起来这在threejs中是不可能的。

所以解决方案很简单。就像在普通的threejs中那样做。而不是 useLoader 使用 GLTFLoader 加载 gltf。它执行两次获取请求，两次拉取和解析模型。

const [model, set] = useState()
useEffect(() => new GLTFLoader().load(url, set), [url])
return model ? <primitive object={model.scene} /> : null

演示：https ://codesandbox.io/s/r3f-bones-7zw1c?file=/src/Stacy.js

否则我会提出不同的问题或提出一个新问题。尝试在 useMemo 中克隆对象并找出它不起作用的原因。它应该，所以这可能是threejs中的一个错误。

Answer 2

我不确定加载程序是问题所在。加载器使用静态模型，但蒙皮网格似乎是个问题。我曾尝试复制这种方法但没有成功。此外，示例代码沙箱崩溃，因此无法验证工作示例