Three.js滚动着色器问题：白色背景下模型不可见及改色求助

一、白色背景下模型消失的修复 #

• 问题原因：当前使用THREE.AdditiveBlending（ additive混合模式），该模式会将物体颜色与背景色相加。白色背景RGB值为(1,1,1)，相加后物体颜色被完全覆盖，导致不可见。
• 解决方法：将混合模式替换为默认的THREE.NormalBlending，如果需要半透明效果，可开启transparent参数：

  this.material = new THREE.ShaderMaterial({
    wireframe: true,
    blending: THREE.NormalBlending, // 替换混合模式
    transparent: true, // 按需开启半透明
    vertexShader,
    fragmentShader,
    uniforms: { /* 原有uniform参数 */ }
  })
  

二、将模型改为绿色的实现 #

1. 调整uniform变量 #

将原有的uDeepPurple替换为通用颜色变量uColor，直接传入绿色值（可使用THREE.Color或归一化RGB值）：

uniforms: {
  uFrequency: { value: this.settings.uFrequency.start },
  uAmplitude: { value: this.settings.uAmplitude.start },
  uDensity: { value: this.settings.uDensity.start },
  uStrength: { value: this.settings.uStrength.start },
  uColor: { value: new THREE.Color(0x00ff00) }, // 设置纯绿色
  uOpacity: { value: this.settings.uOpacity.start }
}

2. 修改片元着色器逻辑 #

找到片元着色器中颜色输出的代码，将原uDeepPurple相关逻辑替换为uColor：

// 片元着色器中声明uniform
uniform vec3 uColor;
uniform float uOpacity;

void main() {
  // 直接输出绿色
  gl_FragColor = vec4(uColor, uOpacity);
  
  // 若需保留原有混合逻辑，可基于绿色调整
  // vec3 mixedColor = mix(vec3(0.0, 0.3, 0.0), uColor, 0.7);
  // gl_FragColor = vec4(mixedColor, uOpacity);
}

三、完整修改后的代码示例 #

this.geometry = new THREE.IcosahedronGeometry(1, 64)

this.material = new THREE.ShaderMaterial({
  wireframe: true,
  blending: THREE.NormalBlending,
  transparent: true,
  vertexShader,
  fragmentShader,
  uniforms: {
    uFrequency: { value: this.settings.uFrequency.start },
    uAmplitude: { value: this.settings.uAmplitude.start },
    uDensity: { value: this.settings.uDensity.start },
    uStrength: { value: this.settings.uStrength.start },
    uColor: { value: new THREE.Color(0x00cc66) },
    uOpacity: { value: this.settings.uOpacity.start }
  }
})

this.mesh = new THREE.Mesh(this.geometry, this.material)

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