three.js中粒子系统的粒子数量为何会影响最终显示颜色？

你遇到的多粒子场景下边缘变黄的现象和HSL颜色模式本身无关，通常是以下几个原因导致：

• 粒子混合模式配置错误
  如果你的粒子材质开启了加法混合AdditiveBlending，多个半透明粒子重叠区域的RGB通道值会累加，超过1之后就会出现色相偏移，单个粒子显示为正常红色，叠加后会先偏黄、累加程度更高的区域会偏白。你可以临时将材质的blending属性改为NormalBlending测试，如果颜色恢复正常即可确认是叠加导致的问题。
• 自定义着色器逻辑错误
  如果你是通过自定义着色器实现火焰效果，需要检查两个点：一是片元着色器中是否错误将粒子颜色和背景/其他粒子颜色做了额外累加；二是HSL转RGB的逻辑是否存在边界漏洞，比如色相值溢出未做取模处理、饱和度/明度参数受到粒子总数相关的全局变量影响。
• 颜色空间配置不匹配
  检查渲染器的outputColorSpace属性是否设置为SRGBColorSpace，如果生成的粒子颜色是线性空间格式、未做sRGB转换直接输出，叠加后颜色偏移效果会被放大。

你设置的HSL参数new THREE.Vector3(0.02, 1, 0.5)本身是符合取值规范的，对应色相确实是红色区间，你可以通过new THREE.Color().setHSL(0.02,1,0.5).getHexString()打印验证基础颜色是否符合预期。

内容的提问来源于stack exchange，提问作者sisi