如何将材料分配给 GLTF react-three-fiber答案

【问题标题】：How to assign material to GLTF react-three-fiber如何将材料分配给 GLTF react-three-fiber
【发布时间】：2021-04-05 04:41:39
【问题描述】：

我已经设法将一个 gltf 对象加载到我的 react-three-fiber 场景中。现在我想将材料附加到我的模型上。是否可以在此模型上使用标准材料？这是我尝试过的：

const Shape = (props) => { const gltf = useLoader(GLTFLoader, GLTFfe)

    const material = new THREE.MeshStandardMaterial({
          color: 0xff0000, 
          transparent: false, opacity: 0.5
     });

    const object = new THREE.Mesh(gltf, material)

    return <primitive object={object.scene} position={[0, 0, 0]} />
  }

【问题讨论】：

标签： reactjs object three.js gltf react-three-fiber

【解决方案1】：

我找到了一个方法，加载你的gltf后有必要改变一些东西，用gltfjsx https://github.com/pmndrs/gltfjsx将它转换为jsx

【讨论】：

【解决方案2】：

可以在这个模型上使用标准材料吗？

MeshStandardMaterial 是使用GLTFLoader 加载对象时的默认材质。您可能不必创建新材料，只需修改现有材料即可。

由于 glTF 资产始终由对象层次结构组成，因此您需要这样做：

gltf.scene.traverse( function( object ) {

    if ( object.isMesh ) {

        object.material.color.set( 0xff0000 );
        object.material.transparent = true;
        object.material.opacity = 0.5;

    }

} );

【讨论】：

感谢您的回答，我将把这个功能放在我的场景中的什么位置？在 const 对象之下？这也适用于我，使用github.com/pmndrs/gltfjsx 转换文件
我通常建议不要变异。突变和遍历始终是一种反模式——它会让你在 vanilla dom 应用程序和 threejs 中头疼。 gltfjsx 创建一个不可变的嵌套图，您可以在其中轻松更改任何内容而无需遍历。这也允许您在不克隆或重新获取模型的情况下重复使用模型。这里有一个小教程：github.com/drcmda/floating-shoe