reactjs - 以编程方式更改 gltf 导入网格的 Material - react 三纤维

Question

我目前正在从事一个与react-三纤维相关的项目。我已经使用 useGLTF 从 @react- Three/drei 导入了模型。

与

const { nodes, materials } = useGLTF('/model.glb');

我从 glb 文件访问 Material 。 为了访问和操作模型，我使用 gltfjsx 来生成模型。

现在我需要以编程方式更改网格的 Material 。因为我无法直接访问模型的 JSX，所以我使用 React.cloneElement 来实现。并修改网格的 Prop 。

所以我尝试了这样的事情:

return React.cloneElement(mesh, {
  material: overwriteMaterial ?
    <meshStandardMaterial attach="material" color={0xa3005c} metalness={1} roughness={0.2} visible={true} /> :
    materials['mat_7']
});

如果overwriteMaterial是假的，它有效。它显示了应有的 Material 。但如果这是真的，那么网格就会消失。

我还想过把<meshStandardMaterial />在网格物体的 Children 支柱中。像这样:

return React.cloneElement(mesh, {
  material: overwriteMaterial ? undefined : materials['mat_7'],
  children: overwriteMaterial ? <meshStandardMaterial attach="material" color={0xa3005c} metalness={1} roughness={0.2} visible={true} /> : undefined
});

这样我总是会收到此错误，但我不知道为什么会出现:

TypeError: Cannot read properties of undefined (reading 'visible')

这种方法是否可行，或者我做的事情完全错误吗？

欢迎任何帮助。谢谢

Answer 1

好吧，经过几个小时的寻找解决方案后，我自己找到了答案。

Material 属性不接受 JSX 标签。因此，如果您创建类 MeshStandardMaterial 的实例，您可以将其传递给属性，并且它工作得很好。现在看起来像这样:

return React.cloneElement(mesh, {
  material: overwriteMaterial
  ? new MeshStandardMaterial({ color: 0x0ff000 })
  : materials['mat_7']
})

注意:MeshStandardMaterial 类是从 two 包中导出的。