时间戳

首页 > 解决方案 > 如何将材料分配给 GLTF react-three-fiber

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

问题描述

我已经设法将一个 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]} />
  }

标签： reactjsobjectthree.jsgltfreact-three-fiber

解决方案

是否可以在此模型上使用标准材料？

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;

    }

} );

推荐阅读