threejs中，使用GUI控制纹理的颜色空间为什么不能生效？

Question

//创建纹理加载器
let textureLoader = new THREE.TextureLoader()
//加载纹理
let texture = textureLoader.load('./textures/parvers/worn_patterned_pavers_diff_4k.jpg')
// let texture = textureLoader.load('./textures/covers/Sewer-0793.jpg')

//设置sRGB纹理的颜色空间
texture.colorSpace = THREE.SRGBColorSpace

gui.add(texture, 'colorSpace', {
  sRGB: THREE.SRGBColorSpace,
  Linear: THREE.LinearSRGBColorSpace
}).onChange((val) => {
  console.log('change',val)
  console.log(texture)
  console.log(texture.colorSpace)
  texture.needsUpdate = true
})

输出的内容显示，texture对象的colorSpace已经改变了，但是页面没有重新渲染。

即便在使用后，texture.needsUpdate = true 后，仍然没有效果。

值得注意的是，当我不设置texture的颜色空间，即texture.colorSpace = THREE.LinearSRBColorSpace 或者 THREE.NoColorSpace的时候，可以实现页面从linear-srgb到srgb的转换，但是不能实现srgb到linear-srgb的转换。

这是什么情况导致的？该如何实现GUI控制纹理的颜色空间的转变？

补充1：

根据官方文档，只要改变颜色空间，就需要将材质的needsUpdate设置为true就可以重新编译了，但是，即使我在onchange中的回调函数中加上material.needsUpdate = true也并没有什么改变

Answer 1

gui.add(params, 'colorSpace', {
  sRGB: 'sRGB',
  Linear: 'Linear'
}).onChange((val) => {
  texture.dispose(); // 释放旧纹理
  texture = textureLoader.load('./textures/your_texture.jpg', function(t) {
    if (val === 'sRGB') {
      t.encoding = THREE.sRGBEncoding;
    } else {
      t.encoding = THREE.LinearEncoding;
    }
  });
  material.map = texture; // 更新材质的纹理
  material.needsUpdate = true; // 标记材质需要更新
});