色差问题—视频纹理颜色空间

回顾上节课内容，你可以对比观察下，threejs中视频纹理的颜色与mp4原视频是否有颜色差异。

光照原因排除

一般来说受光照影响的材质，颜色明暗差异，一般与光照强度或分布有关。

代码中适用的是基础网格材质MeshBasicMaterial，这种材质不受光照影响，意味着与光照强度或分布无关。

const material = new THREE.MeshBasicMaterial({
    map:texture,
});

WebGL渲染器outputColorSpace属性

查看文档，你可以看到，threejs WebGL渲染器输出outputColorSpace属性的值是THREE.SRGBColorSpace。

renderer.outputColorSpace = THREE.SRGBColorSpace;

不同版本threejs也有差异，具体以你使用的文档版本为准。

// 旧版本：已经舍弃
renderer.outputEncoding = THREE.sRGBEncoding;

纹理Texture的颜色空间属性.colorSpace

如果单独外部加载图片或视频纹理，为了避免颜色有偏差，纹理对象颜色空间属性.colorSpace和webgl渲染器保持一致。

texture.colorSpace = THREE.SRGBColorSpace;

注意！！！，主要有时候threejs会有变化，不同版本colorSpace属性名字或值有差异，具体以你使用版本的文档为准。

texture.encoding = THREE.sRGBEncoding;//旧版本