Three.js加载GLTF模型的效果优化

加上后处理器后场景背景变黑问题

首先需要了解色彩空间的概念：

色彩空间的概念

我理解的加上后处理器后场景背景变黑、场景变暗的原因就是，
因为gltf加载默认是sRGB，three.js输出的颜色空间是srgb。

	//旧
	renderer.outputEncoding = THREE.sRGBEncoding;
	//新
    renderer.outputColorSpace = 'srgb'

但是使用了后期处理之后，上述设置失效，three.js输出的颜色空间变成了linear。场景背景颜色本来是灰色的话看起来就像变成了黑色。

    renderer.outputColorSpace = 'srgb-linear'

因此展示到屏幕时需要通过gamma校正，将linear转换回sRGB空间，也就是进行gamma校正，threejs中可通过设置gammaOutput和gammaFactor，进行gamma校正
ThreeJS 不可忽略的事情 -
Gamma色彩空间

需要注意的是gammaOutput和gammaFactory已被弃用：

为什么 WebGLRenderer（开发分支）中的 gammaFactor
已被弃用

最新的解决方法为：

	// 创建伽马校正通道
      const gammaPass = new ShaderPass(GammaCorrectionShader);
      composer.addPass(gammaPass);

Three.js加载模型的颜色还原建模软件

想要Three.js加载模型的颜色还原建模软件的效果，可以考虑设置Three.js的输出色彩空间为linear，

    renderer.outputColorSpace = 'srgb-linear'

后处理器中：

	  const composer = new EffectComposer(this.renderer)
      composer.renderer.outputColorSpace = 'srgb-linear'
      composer.renderTarget1.texture.colorSpace = 'srgb-linear'
      composer.renderTarget2.texture.colorSpace = 'srgb-linear'

此时不需要加上伽马校正

	// const gammaPass = new ShaderPass(GammaCorrectionShader);
    // composer.addPass(gammaPass);