如何调整ThreeJS自定义shader中菲涅尔效应的衰减速率

AI 小北

2026-10-3

ThreeJS 菲涅尔边缘收窄调整方案

你之前修改基础数值只能改变整体亮度，想要控制衰减速率需要对菲涅尔计算结果做幂次运算：幂值越高，菲涅尔衰减越快，效果就会越集中在模型边缘区域。

完整修改后代码

var material = THREE.extendMaterial(THREE.MeshStandardMaterial, {
  // Will be prepended to vertex and fragment code
  header: 'varying vec3 vNN; varying vec3 vEye;',
  // 新增菲涅尔强度系数uniform
  fragmentHeader: 'uniform vec3 fresnelColor; uniform float fresnelPower;',

  vertex: {
    '#include <fog_vertex>': `
      mat4 LM = modelMatrix;
      LM[2][3] = 0.0;
      LM[3][0] = 0.0;
      LM[3][1] = 0.0;
      LM[3][2] = 0.0;

      vec4 GN = LM * vec4(objectNormal.xyz, 1.0);
      vNN = normalize(GN.xyz);
      vEye = normalize(GN.xyz-cameraPosition);`
  },
  fragment: {
    'gl_FragColor = vec4( outgoingLight, diffuseColor.a );' : 
    // 对原有菲涅尔计算结果做幂运算，控制衰减速率
    `gl_FragColor.rgb +=  pow( ( 1.0 - -min(dot(vEye, normalize(vNN) ), 0.0) ), fresnelPower ) * fresnelColor;`
  },
  uniforms: {
    diffuse: new THREE.Color( 'black' ),
    fresnelColor: new THREE.Color( 'blue' ),
    // 可调整的幂值，数值越大边缘越窄
    fresnelPower: { value: 10 }
  }
});