javascript - 如何向 GLTF 模型添加光泽度/镜面反射纹理？

Question

问题：

我有一个尚未被 GLTF 模型使用的模型的镜面反射/光泽度纹理图像。

如何在模型中使用/添加纹理，使其在应有的位置具有反射/光泽？

我不知道要在 .gltf 文件中更改什么以使用纹理。

编辑：添加了更多的 GLTF 行以更好地了解情况。

---

GLTF JSON：

"images": [
    {
        "name": "...",
        "uri": "..."
    },
    {
        "name": "...",
        "uri": "..."
    },
    {
        "name": "...",
        "uri": "..."
    },
    {
        "name": "...",
        "uri": "..."
    },
    {
        "name": "...",
        "uri": "..."
    }
],
"samplers": [
    {}
],
"textures": [
    {
        "name": "T_N",
        "sampler": 0,
        "source": 0
    },
    {
        "name": "Map #9",
        "sampler": 0,
        "source": 1
    },
    {
        "name": "T_D",
        "sampler": 0,
        "source": 2
    },
    {
        "name": "Map #6",
        "sampler": 0,
        "source": 3
    },
    {
        "name": "Specular",
        "sampler": 0,
        "source": 4
    }
],

"materials": [
    {
        "name": "Head",
        "alphaMode": "OPAQUE",
        "extras": {
            "fromFBX": {
                "shadingModel": "<unknown>",
                "isTruePBR": false
            }
        },
        "normalTexture": {
            "index": 0,
            "texCoord": 0
        },
        "emissiveTexture": {
            "index": 1,
            "texCoord": 0
        },
        "pbrMetallicRoughness": {
            "baseColorTexture": {
                "index": 2,
                "texCoord": 0
            },
            "baseColorFactor": [
                1.0,
                1.0,
                1.0,
                1.0
            ],
            "metallicFactor": 0.800000002980232,
            "roughnessFactor": 0.600000011920929
        }
    },
    {
        "name": "Body",
        "alphaMode": "BLEND",
        "extras": {
            "fromFBX": {
                "shadingModel": "<unknown>",
                "isTruePBR": true
            }
        },
        "pbrMetallicRoughness": {
            "baseColorTexture": {
                "index": 3,
                "texCoord": 0
            },
            "baseColorFactor": [
                1.0,
                1.0,
                1.0,
                1.0
            ],
            "metallicFactor": 0.80000002980232,
            "roughnessFactor": 0.600000011920929
        },
        "extensions": {
            "KHR_materials_pbrSpecularGlossiness": {
                "specularGlossinessTexture": {
                    "index": 4
                }
            }
        }
    }
],
"meshes": [
    {
        "name": "Head",
        "primitives": [
            {
                "material": 0,
                "mode": 4,
                "attributes": {
                    "COLOR_0": 3,
                    "NORMAL": 2,
                    "POSITION": 1,
                    "TEXCOORD_0": 4
                },
                "indices": 0,
                "extensions": {
                    "KHR_draco_mesh_compression": {
                        "bufferView": 0,
                        "attributes": {
                            "COLOR_0": 2,
                            "NORMAL": 1,
                            "POSITION": 0,
                            "TEXCOORD_0": 3
                        }
                    }
                }
            }
        ]
    },
    {
        "name": "Body",
        "primitives": [
            {
                "material": 1,
                "mode": 4,
                "attributes": {
                    "COLOR_0": 8,
                    "NORMAL": 7,
                    "POSITION": 6,
                    "TEXCOORD_0": 9
                },
                "indices": 5,
                "extensions": {
                    "KHR_draco_mesh_compression": {
                        "bufferView": 1,
                        "attributes": {
                            "COLOR_0": 2,
                            "NORMAL": 1,
                            "POSITION": 0,
                            "TEXCOORD_0": 3
                        }
                    }
                }
            }
        ]
    }
],

---

错误：

这是我在尝试加载模型时使用上述修改后的 GLTF 时遇到的错误：

{"message":"Cannot read property 'getMaterialType' of undefined","name":"TypeError"} 

标签： javascriptjsonthree.jstexturesgltf

Answer 1

glTF-Sample-Models 存储库中有一些很好的示例。这是使用两种不同 PBR 工作流程的相同模型：

• 规格/光泽 PBR 材料
• 金属/粗糙的PBR材料

您上面的示例 JSON 使用的是金属/粗糙，因此您必须通过将金属和粗糙度因子替换为等效的规格/光泽属性来将其“转换”为规格/光泽。

我建议查看规范以获取更多信息：

• glTF 规范
• 规格/光泽扩展

您可能还会发现在可以导入和导出 glTF 的 Substance Painter 或 Blender 等工具中更容易做到这一点。