为什么我在通过Blender从GLTFLoader导入的Mesh.tansMaterial的Three.js网格的边缘上看到这些线？

Question

我正在创建一个小部件，该小部件将根据用户的输入从较小的“模块”中动态生成Three.js中的建筑物。向我提供了构建“模块”-它们是在Blender中制成的，并随2.8版的GLTF导出器一起导出。我需要说的是，我是Three.js和基于物理的渲染的新手。

在Blender上渲染时，相邻模块看起来就像是一个具有无缝纹理的网格（这就是建模者设计它们的外观）：

Render from Blender

但是在Three.js中，我在每个模块（其本身是Mesh的{​​{1}}或Group）边框上看到这些黑线，并且失去了无缝性（请忽略照明，我现在真的不专注于它）：

Three.js

这些是Blender的GLTF导出器设置：

Blender GLTF exporter setting

带有纹理的模型可以毫无问题地通过Mesh导入three。每个GLTFLoader的输出MeshStandardMaterial使用Mesh，map和normalMap。

我尝试过：

• 每种组合中的不同纹理格式（PNG / JPG）和大小（2048²，1024²，512²）
• 不同的灯光（来自下面代码片段中列出的灯光）
• 列出的每种材质的所有放大和缩小滤镜here-它们似乎有一定作用，但深色边框永远不会消失
• 在每种组合中打开和关闭材料的roughnessmap和normalMap

似乎唯一可行的方法是关闭所有3种roughnessmap类型并使用纯色，这表明问题在某种程度上与纹理渲染有关，而不是几何形状或网格间距，但也意味着完全放弃模型纹理：

Plain coloring

场景设置：

map

Three.js版本this.scene = new Three.Scene(); this.camera = new Three.PerspectiveCamera(75, this._aspectRatio, 0.1, 50); this.ambientLight = new Three.AmbientLight('white', 0.5); this.directionalLight = new Three.DirectionalLight('white', 1.5); this.directionalLight.position.set(-20, 20, 20); this.directionalLight.target.position.set(0, 0, 0); （来自NPM）。

我很惊讶这些边界是如此清晰可见。我原本希望看到一些模糊的边界，但不是那样。

您是否知道是什么导致了这种影响？也许我需要为材质/纹理使用某种着色器？

任何帮助将不胜感激。