Three.js：球体几何体GLSL着色异常问题求助

我在实现基于包围盒3D坐标分配颜色的GLSL着色器时遇到问题，目前无法修复：

问题出在雄蕊部分，具体表现为：垂直轴上颜色从白色生硬切换为浅蓝色，俯视角度观察时颜色过渡正常，但侧视时呈现异常效果（如图）：

雄蕊端盖已与管几何体合并，着色器基于整个合并对象的3D空间计算，但颜色过渡无法平滑消除突变分界线，法线对此无效。

我怀疑问题出在球体几何体的处理代码中：

const stamenEndCap = new THREE.SphereGeometry( sinCurveScale/120, 20, 20 );
// stamenEndCap.scale(1,1.5,1)
stamenEndCap.scale(4,1,1) //find a way to rotate geometry relative to the sin curve at the end 

stamenEndCap.toNonIndexed();
stamenEndCap.computeBoundingSphere();
stamenEndCap.computeBoundingBox();
stamenEndCap.normalizeNormals();
stamenEndCap.computeTangents();
console.log(stamenEndCap.attributes.position.array)


for (var i=0; i<stamenEndCap.attributes.position.array.length; i=i+3){
  stamenEndCap.attributes.position.array[i]=stamenEndCap.attributes.position.array[i]+((centerEnd.x)) //offset
  stamenEndCap.attributes.position.array[i+1]=stamenEndCap.attributes.position.array[i+1]+((centerEnd.y))
  stamenEndCap.attributes.position.array[i+2]=stamenEndCap.attributes.position.array[i+2]+((centerEnd.z)) //height?

}

stamenEndCap.computeVertexNormals();


// let positionVector = new THREE.Vector3(spherePoint.x,spherePoint.y,spherePoint.z)

// console.log(positionVector)

stamenEndCap.attributes.position.needsUpdate = true;

console.log(stamenEndCap.attributes.position.array)

let merge = THREE.BufferGeometryUtils.mergeBufferGeometries([geometry2,stamenEndCap])

merge.attributes.position.needsUpdate = true;

合并后的几何体命名为merge（后重命名为stamenGeom），其包围盒被用于顶点着色器和片元着色器中。

恳请提供建议或解决方案。

内容的提问来源于stack exchange，提问作者R-yurew