如何使用@viro-community/react-viro为GLB格式3D模型添加纹理

GLB格式模型自带嵌入的材质系统，和OBJ的无材质/独立材质文件模式不同，直接用materials传单个材质名无法覆盖原有材质，需要通过材质名称映射的方式替换指定材质，具体步骤如下：

1. 确认GLB模型中的材质名称 #

先用3D工具（比如Blender、glTF Viewer）打开你的object_car.glb，找到需要替换纹理的材质的原始名称（比如模型里车身的材质可能叫CarBodyMaterial、MainMaterial之类）。这一步是核心，必须准确对应原材质名。

2. 修改Viro3DObject的materials属性 #

将原来的materials={data.texture}改为对象映射格式，键是GLB里的原材质名称，值是你自定义的材质名：

<Viro3DObject
  source={require("./object_car.glb")}
  position={[0, 1, 0]}
  scale={[0.3, 0.3, 0.3]}
  type="GLB"
  lightReceivingBitMask={3}
  shadowCastingBitMask={2}
  transformBehaviors={["billboardY"]}
  // 替换为对象映射，原材质名: 自定义材质名
  materials={{ CarBodyMaterial: data.texture }} 
  onClick={_toggleButtons}
  rotation={[50, 50, -10]}
/>

如果模型有多个需要替换的材质，可同时映射：

materials={{ 
  CarBodyMaterial: data.texture,
  WheelMaterial: "black" // 假设你定义了black材质
}}

3. 完善PBR材质参数 #

GLB模型普遍使用PBR材质，确保你的自定义材质参数匹配模型的PBR属性，比如补充金属粗糙度纹理（如果模型原本使用的话）：

ViroMaterials.createMaterials({
  white: {
    lightingModel: "PBR",
    diffuseTexture: require("./object_car_main_Base_Color.png"),
    // 若模型有金属粗糙度纹理，需添加对应纹理
    metallicRoughnessTexture: require("./object_car_main_Metallic_Roughness.png"),
  },
  blue: {
    lightingModel: "PBR",
    diffuseTexture: require("./object_car_main_Base_Color_blue.png"),
    metallicRoughnessTexture: require("./object_car_main_Metallic_Roughness_blue.png"),
  },
});

额外注意事项 #

• 纹理图片尺寸建议为2的幂次（如512x512、1024x1024），避免渲染异常；
• 确认纹理路径正确，本地资源需用require导入；
• 如果替换后仍无效果，检查原材质名是否拼写错误，或模型是否有材质分组的情况。

内容的提问来源于stack exchange，提问作者amboji alur