直接更新Shape几何体的position属性导致Mesh纹理损坏，该如何修复？

问题原因 #

仅更新几何体的顶点位置属性position，未同步更新控制纹理映射的uv属性，导致纹理采样坐标与新的顶点位置不匹配，最终出现纹理错位、拉伸等异常显示效果。

解决方案 #

方案1：同步更新uv属性 #

每次计算新的顶点position数组时，按照相同的顶点映射规则同步计算对应顶点的uv坐标数组，再更新几何体的uv属性即可：

// 计算新的uv数组后执行
this.geometry.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));

方案2：基于新的几何体包围盒重算全局uv #

如果不需要自定义纹理映射规则，可在更新position后，基于几何体新的包围盒自动生成匹配的uv坐标：

1. 调用geometry.computeBoundingBox()获取更新后的几何体边界
2. 遍历所有顶点，按顶点在包围盒中的相对位置计算uv：u = (x - minX) / (maxX - minX)、v = (y - minY) / (maxY - minY)
3. 把计算得到的uv数组更新到几何体的uv属性中

方案3：拆分几何体实现 #

将墙面和窗户拆分为两个独立的几何体，墙面使用单独的平面几何体，窗户作为另一层平面几何体放置在墙面前方。修改窗户位置时直接调整窗户Mesh的position属性即可，不需要修改几何体顶点数据，从根源避免uv不同步的问题，可维护性和性能表现更好。

优化建议 #

如果需要频繁更新顶点位置，不需要每次新建BufferAttribute实例，直接修改原有属性的数组后标记更新即可，性能表现更优：

const positionAttr = this.geometry.getAttribute('position');
positionAttr.array = positions;
positionAttr.needsUpdate = true;

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