Javascript Three.js-在比例变化时将画布纹理正确映射到网格

我正在从事Fabric.js+Three.js项目的3D盒子设计

此处的示例代码：

因此，正面纹理是从织物画布加载的，但是，3D网格中显示的画布2d形状的大小不正确，特别是在网格的上/下翻转中，它会被拉伸/压缩，并且当将网格比例更改为不相等的值（如20、20、10）或设置动画时，它会变得更加明显（打开/关闭盒子）

我确实尝试更改织物画布尺寸以反映网格的宽度/高度值，但显然这还不够，我在这里遗漏了一些关键内容，并且我找不到任何相关参考

我在这里看到了一个示例

：https://jsfiddle.net/prisoner849/rr1bsfsj/

，它无法解决我的问题

那么，在更改网格大小（x、y、z）时，如何告知网格正确映射画布纹理或者，换句话说，如何根据X、Y、Z值将画布的正确宽度/高度分配到网格的正确表面？我需要在3D框模型的中间、顶部翻转和底部翻转部分中具有相同大小的织物形状。

任何帮助都是非常感谢的