以编程方式更改gltf导入网格的材质-反应三种纤维

Question

我目前在react three fiber的一个项目中工作。我已经从@react three/drei导入了带有useGLTF的模型。

与

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

我访问glb文件中的材料。为了访问和操作模型，我使用gltfjsx生成模型。

现在我需要以编程方式更改网格的材质。因为我不能直接访问模型的JSX，所以我用React.clone元素来修改网格的道具。

所以我尝试了这样的方法：

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

如果overwriteMaterial为false，则该选项有效。它显示了它应该使用的材质。但如果这是真的，网格就会消失。

我还想到了把

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
});

有了这个，我总是会出现这样的错误，我不知道为什么会出现这样的错误：

无法读取未定义的属性（读取可见）

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

欢迎每一个帮助。谢啦




Answer 1

我真的不认为必须克隆任何react元素，这似乎不正确。你可以像在普通的三个应用程序中一样克隆或变异材料。我不知道你为什么要克隆jsx。

const { scene } = useGLTF(url)
const clonedScene = useMemo(() => scene.clone(), [])
useLayoutEffect(() => {
  clonedScene.traverse(o => {
    if (o.type === 'Mesh') {
      o.material = ...
    }
  })
}, [clonedScene]}
return <primitive object={clonedScene} />

您也可以完全跳过clonedScene，只有在计划在场景中多次重复使用模型时才可以这样做。

Answer 2

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

材质属性不接受JSX标记。因此，如果您创建类的实例Mesh标准材料，您可以将其传递给属性，并且它工作得非常好。现在它看起来像这样：

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

注意：类MeshStandard ard材料是从三包导出的。