如何在Three.js中为圆环材质添加条形纹理并修正UV映射？

一、3D软件手动调整UV（以Blender为例） #

• 进入编辑模式，全选圆环所有面
• 打开UV编辑器，按U键选择「重置UV」清除默认映射
• 再次按U键选择「柱形投影」，投影轴选圆环的中心轴（比如创建时的Z轴）
• 此时UV会展开成矩形：横向对应圆环的圆周环绕方向，纵向对应圆环的截面径向
• 选中UV的纵向边，缩放调整比例，让条形纹理的宽度匹配圆环截面的尺寸，避免拉伸变形
• 最后在纹理设置里，只开启U方向（横向）的平铺，V方向（纵向）设为「clamp」或关闭平铺

二、Shader程序化UV调整（适合Unity/Unreal等实时渲染场景） #

如果不想手动改UV，直接在Shader里重新计算采样坐标：

1. 获取圆环表面点的世界空间位置，转换为极坐标：

   // 假设圆环中心在原点，绕Y轴旋转，内半径为innerR，截面半径为sectionR
   float angle = atan2(pos.x, pos.z); // 圆周方向角度
   float radial = length(pos.xz) - innerR; // 截面径向距离
   

2. 将角度映射为U坐标，支持平铺：

   float u = angle / (2 * PI); // 转换为0-1范围
   u *= tileNum; // tileNum是你想要的条形重复次数
   

3. 将径向距离映射为V坐标，避免拉伸：

   float v = radial / sectionR; // 转换为0-1范围
   

4. 用float2(u, v)作为纹理的采样坐标即可

三、核心逻辑 #

默认UV把圆环的两个参数（环旋转角、截面旋转角）直接对应纹理UV，导致截面方向的纹理被强制拉伸。正确的映射要让条形纹理的延伸方向和圆环圆周方向对齐，截面方向只匹配纹理的宽度，这样条形会自然环绕圆环，不会出现扭曲错位。

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