Javascript 使用Mapbox GL和THREE.js破坏纹理

我一直在使用Mapbox GL示例作为模板，将3D对象添加到我的Mapbox地图中。它可以工作，但有时会出现纹理问题

我正在加载一个OBJ文件并将其添加到场景中。以下是模型在a中的外观：

下面是渲染该场景的代码的摘要版本（有关详细信息，请参见）：

异步函数addOBJ（路径，mtlPath）{ const loader=new OBJLoader2（）； const matLoader=new MTLLoader（）； 加载（mtlPath，mtlParseResult=>{ const materials=MtlObjBridge.addMaterialsFromMtlLoader（mtlParseResult）； 装载机。添加物料（物料）； loader.load（路径，组=>{ 场景。添加（组）； }); }); } 函数init（）{ 摄像机=新的三透视摄像机（70，窗内宽/窗内高，0.001，1000）； 摄像机。位置。设置（86100，-5）； 场景=新的三个。场景（）； renderer=new THREE.WebGLRenderer（{antialas:true}）； renderer.setSize（window.innerWidth、window.innerHeight）； document.body.appendChild（renderer.doElement）； addOBJ（“思洛存储器p2.obj”、“思洛存储器p2.mtl”）； } 当我尝试在Mapbox贴图中添加相同的模型时，纹理会出现奇怪的结果：

在我的THREE.js+Mapbox场景中发生了什么？看起来纹理已变成“噪波”

完整来源可用，但要点如下：

function getSpriteMatrix(coord, sceneCenter) {
  const rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), 90 * Math.PI / 180);
  const s = sceneCenter.meterInMercatorCoordinateUnits();
  return new THREE.Matrix4()
    .makeTranslation(coord.x - sceneCenter.x, coord.y - sceneCenter.y, coord.z - sceneCenter.z)
    .scale(new THREE.Vector3(s, -s, s))
    .multiply(rotationX);
}

class SpriteCustomLayer {
  type = 'custom';
  renderingMode = '3d';

  constructor(id) {
    this.id = id;
    this.model = loadObj('silo_p2.obj', 'silo_p2.mtl');
  }

  async onAdd(map, gl) {
    this.camera = new THREE.Camera();

    const centerLngLat = map.getCenter();
    this.center = MercatorCoordinate.fromLngLat(centerLngLat, 0);
    const {x, y, z} = this.center;
    this.cameraTransform = new THREE.Matrix4().makeTranslation(x, y, z);

    this.map = map;
    this.scene = this.makeScene();

    // use the Mapbox GL JS map canvas for three.js
    this.renderer = new THREE.WebGLRenderer({
      canvas: map.getCanvas(),
      context: gl,
      antialias: true,
    });

    // From https://threejs.org/docs/#examples/en/loaders/GLTFLoader
    this.renderer.gammaOutput = true;
    this.renderer.gammaFactor = 2.2;

    this.renderer.autoClear = false;

    this.addModel();
  }

  makeScene() {
    const scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight( 0xffffff, 0.25 ));
    for (const y of [-70, 70]) {
      const directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(0, y, 100).normalize();
      scene.add(directionalLight);
    }
    return scene;
  }

  async addModel() {
    const model = await this.model;
    flipSides(model);

    const scene = model.clone();
    const matrix = getSpriteMatrix(
      MercatorCoordinate.fromLngLat([-74.0445, 40.6892], 0),
      this.center,
    );
    scene.applyMatrix(matrix);
    this.scene.add(scene);
  }

  render(gl, matrix) {
    this.camera.projectionMatrix = new THREE.Matrix4()
      .fromArray(matrix)
      .multiply(this.cameraTransform);
    this.renderer.state.reset();
    this.renderer.render(this.scene, this.camera);
    this.map.triggerRepaint();
  }
}

map.on('load', () => {
  const layer = new SpriteCustomLayer('statue');
  map.addLayer(layer);
});

---

如何使纹理在“贴图盒”视图中显示在该对象上？我正在使用THREE.js r109和Mapbox GL js v1.4.0。由于这些模型来自何处，我不能选择使用不同的格式（如GLTF）。

当我打开链接到的plain THREE.js场景时，纹理看起来也非常嘈杂。我还可以看到你在漫反射和凹凸通道上都有相同的纹理，试着去掉凹凸贴图，看看你得到了什么结果。或者只是降低凹凸系数。你是我的英雄@2pha，这是凹凸地图！我注释掉了

.mtl

文件中的

map\u Bump

行，一切看起来都很好。很高兴我能帮忙：）