Three.js GLTF material updates doesn't retain colour

Question

I have a GLTF object setup in my scene and when I first load the model, the associated texture renders with it really nicely (texture is first defined in the GLTF json):

Now I want to be able to update the GLTF material texture. I'm doing that by:

this.gltf.scene.traverse(
  (child) => {
    if (child.name == 'defaultMaterial') {
      this.rootMaterial = child.material;
      child.material.map = texture;
      child.material.map.needsUpdate = true;
    }
  }
);

When the material updates however it looks faded and incorrectly lit:

I'm wondering if the method I'm using to override the material isn't updating properly OR perhaps the material, as it's defined in the gltf JSON structure, is missing settings since the texture is overwritten. In that case I'm not sure how to JUST modify the image or to replicate the parameters in the Mesh.

I don't know enough about GLTF or modelling so I can get to the bottom of it.

Attached is the definition for the model in case it makes the situation clearer:

{
  "accessors": [
    {
      "bufferView": 2,
      "componentType": 5126,
      "count": 2469,
      "max": [
        0.40150400996208191,
        1,
        0.40150400996208191
      ],
      "min": [
        -0.40150400996208191,
        -1,
        -0.40150400996208191
      ],
      "type": "VEC3"
    },
    {
      "bufferView": 2,
      "byteOffset": 29628,
      "componentType": 5126,
      "count": 2469,
      "max": [
        1,
        1,
        1
      ],
      "min": [
        -1,
        -1,
        -1
      ],
      "type": "VEC3"
    },
    {
      "bufferView": 3,
      "componentType": 5126,
      "count": 2469,
      "max": [
        1,
        0.9930080771446228,
        0.99999946355819702,
        1
      ],
      "min": [
        -0.99999970197677612,
        -0.99982893466949463,
        -1,
        -1
      ],
      "type": "VEC4"
    },
    {
      "bufferView": 1,
      "componentType": 5126,
      "count": 2469,
      "max": [
        0.99194198846817017,
        0.99000000953674316
      ],
      "min": [
        0.0099999997764825821,
        0.0099999997764825821
      ],
      "type": "VEC2"
    },
    {
      "bufferView": 0,
      "componentType": 5125,
      "count": 12984,
      "max": [
        2468
      ],
      "min": [
        0
      ],
      "type": "SCALAR"
    }
  ],
  "asset": {
    "extras": {
      "author": "jmvfx (https://sketchfab.com/jmvfx)",
      "license": "SKETCHFAB Standard (https://sketchfab.com/licenses)",
      "source": "https://sketchfab.com/models/aff40b3b41e84de5a4d92d5fd1995b8d",
      "title": "Dark Angels - Monster Never Die?"
    },
    "generator": "Sketchfab-3.31.2",
    "version": "2.0"
  },
  "bufferViews": [
    {
      "buffer": 0,
      "byteLength": 51936,
      "byteOffset": 0,
      "name": "floatBufferViews",
      "target": 34963
    },
    {
      "buffer": 0,
      "byteLength": 19752,
      "byteOffset": 51936,
      "byteStride": 8,
      "name": "floatBufferViews",
      "target": 34962
    },
    {
      "buffer": 0,
      "byteLength": 59256,
      "byteOffset": 71688,
      "byteStride": 12,
      "name": "floatBufferViews",
      "target": 34962
    },
    {
      "buffer": 0,
      "byteLength": 39504,
      "byteOffset": 130944,
      "byteStride": 16,
      "name": "floatBufferViews",
      "target": 34962
    }
  ],
  "buffers": [
    {
      "byteLength": 170448,
      "uri": "scene.bin"
    }
  ],
  "images": [
    {
      "uri": "textures/initialShadingGroup_metallicRoughness.png"
    },
    {
      "uri": "textures/initialShadingGroup_normal.png"
    },
    {
      "uri": "textures/standard.jpg"
    }
  ],
  "materials": [
    {
      "doubleSided": true,
      "emissiveFactor": [
        0,
        0,
        0
      ],
      "name": "initialShadingGroup",
      "normalTexture": {
        "index": 1,
        "scale": 1,
        "texCoord": 0
      },
      "occlusionTexture": {
        "index": 0,
        "strength": 1,
        "texCoord": 0
      },
      "pbrMetallicRoughness": {
        "baseColorFactor": [
          1,
          1,
          1,
          1
        ],
        "baseColorTexture": {
          "index": 2,
          "texCoord": 0
        },
        "metallicFactor": 1,
        "metallicRoughnessTexture": {
          "index": 0,
          "texCoord": 0
        },
        "roughnessFactor": 1
      }
    }
  ],
  "meshes": [
    {
      "name": "defaultMaterial",
      "primitives": [
        {
          "attributes": {
            "NORMAL": 1,
            "POSITION": 0,
            "TANGENT": 2,
            "TEXCOORD_0": 3
          },
          "indices": 4,
          "material": 0,
          "mode": 4
        }
      ]
    }
  ],
  "nodes": [
    {
      "children": [
        1
      ],
      "name": "RootNode (gltf orientation matrix)",
      "rotation": [
        -0.70710678118654746,
        -0,
        -0,
        0.70710678118654757
      ]
    },
    {
      "children": [
        2
      ],
      "name": "RootNode (model correction matrix)"
    },
    {
      "children": [
        3
      ],
      "matrix": [
        1,
        0,
        0,
        0,
        0,
        -4.3711390063094768e-08,
        0.999999999999999,
        0,
        0,
        -0.999999999999999,
        -4.3711390063094768e-08,
        0,
        0,
        0,
        0,
        1
      ],
      "name": "Collada visual scene group"
    },
    {
      "children": [
        4
      ],
      "name": "g"
    },
    {
      "mesh": 0,
      "name": "defaultMaterial"
    }
  ],
  "samplers": [
    {
      "magFilter": 9729,
      "minFilter": 9987,
      "wrapS": 10497,
      "wrapT": 10497
    }
  ],
  "scene": 0,
  "scenes": [
    {
      "name": "OSG_Scene",
      "nodes": [
        0
      ]
    }
  ],
  "textures": [
    {
      "sampler": 0,
      "source": 0
    },
    {
      "sampler": 0,
      "source": 1
    },
    {
      "sampler": 0,
      "source": 2
    }
  ]
}

Any experienced eyes on this would be very helpful.

Answer 1

From the section on Textures in the GLTFLoader docs, you'll want to configure the renderer and the new texture for best results:

renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;

// If texture is used for color information, set colorspace.
texture.encoding = THREE.sRGBEncoding;

// UVs use the convention that (0, 0) corresponds to the upper left corner of a texture.
texture.flipY = false;