如何在带自定义边框的BoxGeometry网格上实现红绿渐变效果？

我有两个Three.js实现的盒子效果：

• 基于BoxGeometry创建的盒子，通过自定义Shader利用UV边缘实现了黑色边框样式
• 手动构建顶点的BufferGeometry盒子，使用MeshStandardMaterial实现了红-黄-绿的垂直渐变效果

我需要达成的目标：保留BoxGeometry盒子的黑色边框样式，同时让它具备红-黄-绿的渐变效果

当前遇到的具体问题：

1. 尝试用vUv.y实现渐变时，盒子顶面的渐变无法和其他面对齐
2. 不清楚如何在自定义Shader中实现红-黄-绿这种多色渐变
3. 已经实现了符合预期的BoxGeometry颜色渐变效果，现在需要将该渐变逻辑与现有边框Shader结合生效

效果参考 #

现有效果对比 #

目标效果参考 #

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