请教如何通过react-three实现纹理围绕圆柱体三圈平铺?

Question

最近做项目, 绕不过一个问题:无法实现在生成的圆柱上进行对一张高宽为4710*1000px的图片环绕圆柱三圈的需求,需求内容大概下图所示(产品经理给的参考):

1. 4710*1000px 环绕柱体三圈.
2. 对柱体覆盖纹理(图片的透明部分)后的部分进行可自定义颜色.
   

我自己也写了一个demo:跳转codesandbox.io预览
实际得到的结果他给我的纹理图重复压缩了n次,而不是进行平铺,且我自定义的主题颜色后被纹理图覆盖掉了, 无法二次进行颜色自定义
还望有玩过three的大神出出招,具体的改进方案, 感谢!