将纹理应用于 threejs 模型时出现奇怪的线条 ("seams")

Strange lines ("seams") appearing when applying texture to threejs model

我正在渲染从 .ctm 文件导入到 threejs v71 中的模型。然后我使用带有贴图的 MeshBasicMaterial 添加纹理。

原始模型是在Agisoft Photoscan 中制作的,导出为.obj,然后使用官方的OpenCTM 查看程序转换为OpenCTM 格式。 .ctm 模型本身是 here.

它看起来是正确的,除了当我加载 .ctm 时奇怪的 "seams" 出现在纹理上。 .obj 在 three.js 中加载良好,没有接缝。这些是什么,我该如何摆脱它们?

截图如下:

这些 "seams" 不存在于纹理文件中:

更新:我注意到在 ctm 查看器中查看 .ctm 时接缝也可见,所以这可能是 OpenCtm 转换问题而不是 threejs 加载问题。

我的 Agisoft Photoscan model/texture 遇到了同样的问题,所以我在 Photoshop 中打开纹理,发现它在所有纹理块之间都有透明度。我使用内容感知填充填充所有空白,并将纹理保存为没有图层的 .tif。这为我解决了问题。

或者您可以直接从纹理图像文件中删除 alpha-channel(或在导出时使用 JPG 格式)。

令我懊恼的是,这似乎是 OpenCTM 中的 longstanding bug

其他答案不能重现问题中描述的情况。

编辑: 我现在完全理解这个问题并找到了解决方法。问题是大多数程序(Photoscan、Blender)都有 "per-loop" 个顶点而不是实际的 "per-vertex" 个纹理。这只是意味着当一个顶点被两个多边形共享时,该顶点可以有多个 UV 坐标。 CTM 每个顶点只能有一个 UV 坐标,这就是导致纹理接缝问题的原因。

我在搅拌机中的解决方法是:

  • 来自岛屿的接缝
  • Select 接缝上的一条边,select 相似 --> 接缝。现在所有接缝都应该 selected
  • 网格 --> 边 --> 边分割
  • 导出为.obj,使用ctmviewer.exe导入导出为.ctm。

仔细看还是可以看到接缝,但不再有明显的五彩带。