Three.js 材质着色器在两种颜色之间平滑渐变

我在threeJS中的自定义材质着色器中使用了以下着色器，并将其应用于变形球。每个变形球（本例中为2个）的位置将传递给数组

allPos

，并将其与顶点法线的距离进行比较，以找到最近的位置。其索引用于指定颜色

blobColor

，然后将其传递给片段着色器

顶点着色器

uniform vec3 colChoice[2];
varying vec3 vNormal;
varying vec3 blobColor;
varying vec3 otherColor;
uniform vec3 allPos[2];
varying float mixScale;

void main() {
   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
   vNormal = normalize( normalMatrix * normal );
   float prevdist = 1000000000000000000000000000000.0;

   for(int i=0;i<2;i++){
      float distV = distance(allPos[i],normal.xyz);
      if(distV<prevdist){
         prevdist = distV;
         mixScale = distV;
         blobColor = colChoice[i];
         otherColor = colChoice[i-1];
      }
   }
   gl_Position = projectionMatrix * mvPosition;
}

"varying vec3 blobColor;",
"varying vec3 otherColor;",
"varying vec3 vNormal;",
"varying float mixScale;",

void main() {
    finalColor = (0.45*vNormal) + mix(otherColor,blobColor,mixScale);
    gl_FragColor = vec4( finalColor, 1.0 );
}

这给了我类似的东西：

这是一个有点粗糙的现在，我想申请之间的点梯度

---

这两种颜色。有什么建议吗？

很难说出你想要的行为是什么。你说有点粗糙是什么意思？如果需要渐变，只需将

mixScale

的值从0-1逐渐更改即可。该问题与以下问题无关：。我将努力在那里发展