THREE.js纹理拼贴不一致

Question

我正在开发一个项目，我们有一个应用了材质的3D模型，然后将材质平铺在对象的表面上，这一切都正常。但是，我目前正在制作一个故事，为应用添加材料的平面预览。为此，我创建了一个场景，添加了一个“PlaneGeometry”，使用平面和从3D模型中检索到的材质创建网格。

然而，不是像3D模型那样平铺，我得到了奇怪的平铺，其中瓷砖似乎以不一致的尺寸重复。

以下是几个例子。

这是应用于3D模型的材料，一切看起来都很好。 （红线指向图块边缘）

然而，这是应用于飞机的相同材料。如果你仔细观察，你会注意到它在图像上划过的线条，并且还要注意线条之间的间距如何变化，间歇性地从薄瓷砖切换到厚瓷砖。这发生在两个轴上。 （红线指向图块边缘）

现在要进一步复杂化，从我们的材料库中应用不同的材料会导致不同的平铺，在这种情况下，它会更加明显。

再次在3D模型上它很好（红线指向瓷砖边缘）

但是在飞机上有很多平铺问题，这里的线条正在考虑材料的细节，使它看起来很糟糕。 （红线指向图块边缘）

这是原始纹理文件

这是我创建渲染器并使用材质创建平面的代码。

private addPlane(): void {
    let planeGeo: THREE.PlaneGeometry = new THREE.PlaneGeometry(10, 10);
    let plane: THREE.Mesh = new THREE.Mesh(planeGeo, this.viewService.getMeshesByPart(this.part)[0].material);
    plane.scale.set(10, 10, 10);
    this.scene.add(plane);
  }

  private createRenderer(): void {
    let container: any = document.querySelector('.properties-panel-canvas-container');
    if (!this.renderer) {
      this.renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: false,
        premultipliedAlpha: false,
        preserveDrawingBuffer: true
      });
      this.renderer.setClearColor(0x000000, 0);
      this.renderer.setSize(167, 167);
      this.renderer.domElement.id = 'properties-panel-canvas';
      container.appendChild(this.renderer.domElement);
    }
  }