Can i modify default material of glTF in model-viewer?

[justinduynguyen]

I've been tried to get special effects with custom shaders but after material updated then it fallbacks to default material.
My use-case :

• Load 3d assets with gltfLoader in threejs.
• Create new material with custom shader to assign to returned object from gltfLoader.
• Use gltfExporter convert to gltf object then create url from blob file.
• User modelViewElement.src = url to load new object.

my code in below:

 LoadGLTF("Assets/Models/ring_webgi.glb",(object) =>
        {
            console.log(object)
            object.traverse(item =>
            {
                if (item.type == "Mesh")
                {
                    switch (item.name)
                    {
                        case "diamonds":
                        case "diamonds001":
                        case "diamonds002":
                        case "diamonds003":
                        case "diamonds005":
                        case "diamonds004":
                            {
                                (item as Mesh).material = customMaterial;
                                console.log((item as Mesh).material);
                                texture.mapping = EquirectangularReflectionMapping;
                                ((item as Mesh).material as MeshPhysicalMaterial).envMap = texture;

                            }
                            break;
                        case "diamonds006":
                        case "diamonds007":
                        case "diamonds008":
                        case "diamonds009":
                        case "diamonds0010":
                        case "diamonds0011":
                            {
                                (item as Mesh).material = customMaterial;
                                texture.mapping = EquirectangularReflectionMapping;
                                ((item as Mesh).material as MeshPhysicalMaterial).envMap = texture;

                            }
                            break;
                    }
                }
            });
            let exporter = new GLTFExporter();
            exporter.parse(object,(data) =>
            {
                var encoded = Buffer.from(JSON.stringify(data));
                const blob = new Blob([encoded],{ type: 'application/json' });
                const url = URL.createObjectURL(blob);
                console.log(url);
                this._modelViewer.src = url;
                this._modelViewer.addEventListener("load",(e) =>
                {
                    console.log(this._modelViewer.model.materials);
                    URL.revokeObjectURL(url);
                })
            },(error) =>
            {
                console.log("Error export gltf:",error);
            });
        });

Thank for your helps.

[elalish]

glTF does not define custom shaders, so this approach is impossible. You should be able to get good diamond rendering using the officially ratified glTF ior and volume extensions instead.