three.js场景在移动设备上显示异色、波纹、画面模糊问题

针对移动端出现的画面模糊、轻微偏色、波纹三类异常，可按照以下步骤逐一排查修复：

1. 修复画面模糊问题 #

模糊大多为设备像素比未适配导致，桌面端默认像素比多为1，移动端高刷屏像素比普遍更高，未适配时画布会被强制拉伸导致模糊：

• 初始化渲染器时主动匹配设备像素比，同时设置上限避免性能损耗：

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

• 确认页面视口配置正确，禁止页面缩放导致画布拉伸：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 修复偏色问题 #

偏色多为色彩空间配置不统一导致，移动端广色域屏幕对色彩空间适配要求更高：

• 统一设置渲染器输出色彩空间为SRGB：

renderer.outputColorSpace = THREE.SRGBColorSpace

• 所有加载的颜色纹理同步设置色彩空间：

texture.colorSpace = THREE.SRGBColorSpace

• 如果使用了后期处理 pipeline，确保最后一个处理节点的输出色彩空间为SRGB。

3. 修复波纹（摩尔纹）问题 #

波纹多为抗锯齿未开启、纹理采样配置不合理导致：

• 初始化渲染器时开启硬件抗锯齿：

const renderer = new THREE.WebGLRenderer({ antialias: true })

• 为纹理开启mipmap优化采样效果，注意非2的幂尺寸纹理无法自动生成mipmap，需要提前调整纹理尺寸：

texture.generateMipmaps = true
texture.minFilter = THREE.LinearMipmapLinearFilter
texture.magFilter = THREE.LinearFilter

内容的提问来源于stack exchange，提问作者Алексей