A-Frame THREE.TextureLoader loading texture whice is looking whitewashed

Question

I am updating an a-image scr using THREE.TextureLoader

let loader = new THREE.TextureLoader()
const imgload = loader.load(
            './test.png',
              function ( texture ) {
                      firstFrameImage.getObject3D('mesh').material.map = texture
                      firstFrameImage.getObject3D('mesh').material.needsUpdate = true
              },
            
              // onProgress callback currently not supported
              undefined,
            
              // onError callback
              function ( err ) {
                console.error( 'An error happened.' );
              }
            )

Its updating the texture but its making the texture whitewashed. Can any one help?

Original image: original

Updated texture coming as: after update

Answer 1

Try to fix this by doing this:

texture.encoding = THREE.sRGBEncoding;

Color deviations like this mostly occur because of wrong color space definitions.