使用Three.js未在Mapbox上加载三维模型

Question

我的问题是，我不能加载任何.gltf文件，只有一个标准文件。请进一步阅读以了解详细情况。我的应用程序上有一张地图，上面有红色箭头指向的三维模型：

​

​

该模型是来自这里的GLFT文件。我所拥有的代码是由Mapbox本身在他们的文档这里上提供的。

我就是这样得到它的：

var modelOrigin = [-8.629134, 41.157902];
    var modelAltitude = 0;
    var modelRotate = [Math.PI / 2, 0, 0];
    
    var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin,modelAltitude);

    var modelTransform = {translateX: modelAsMercatorCoordinate.x,translateY: modelAsMercatorCoordinate.y,translateZ: modelAsMercatorCoordinate.z,rotateX: modelRotate[0],rotateY: modelRotate[1],rotateZ: modelRotate[2],scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()};

    var THREE = window.THREE;
    var customLayer = {
      id: '3d-model',
      type: 'custom',
      renderingMode: '3d',
      onAdd: function (map, gl) {
      this.camera = new THREE.Camera();
      this.scene = new THREE.Scene();
       
      // create two three.js lights to illuminate the model
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(0, -70, 100).normalize();
      this.scene.add(directionalLight);
       
      var directionalLight2 = new THREE.DirectionalLight(0xffffff);
      directionalLight2.position.set(0, 70, 100).normalize();
      this.scene.add(directionalLight2);
       
      // use the three.js GLTF loader to add the 3D model to the three.js scene
      var loader = new THREE.GLTFLoader();
      loader.load('https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf',function (gltf) {
        this.scene.add(gltf.scene);
      }.bind(this));
      this.map = map;
       
      this.renderer = new THREE.WebGLRenderer({
        canvas: map.getCanvas(),
        context: gl,
        antialias: true
      });
       
      this.renderer.autoClear = false;
      },
      render: function (gl, matrix) {
      var rotationX = new THREE.Matrix4().makeRotationAxis(
      new THREE.Vector3(1, 0, 0),
      modelTransform.rotateX
      );
      var rotationY = new THREE.Matrix4().makeRotationAxis(
      new THREE.Vector3(0, 1, 0),
      modelTransform.rotateY
      );
      var rotationZ = new THREE.Matrix4().makeRotationAxis(
      new THREE.Vector3(0, 0, 1),
      modelTransform.rotateZ
      );
       
      var m = new THREE.Matrix4().fromArray(matrix);
      var l = new THREE.Matrix4().makeTranslation(
        modelTransform.translateX,
        modelTransform.translateY,
        modelTransform.translateZ).scale(
          new THREE.Vector3(
          modelTransform.scale,
          -modelTransform.scale,
          modelTransform.scale)).multiply(rotationX).multiply(rotationY).multiply(rotationZ);
       
      this.camera.projectionMatrix = m.multiply(l);
      this.renderer.state.reset();
      this.renderer.render(this.scene, this.camera);
      this.map.triggerRepaint();
      }
    };
map.on('load', async () => {
      map.addLayer(customLayer, 'waterway-label');
});

如您所见，我在loader.load()函数上有模型链接。它非常适合那个模型。然而，当我尝试其他模型时，在本地，而不是链接，我有类似('./models/file.gltf)的东西，它不工作。我不明白为什么，而且似乎也不能让它发挥作用。

Answer 1

不确定代码中的问题是什么，可能与文件的相对路径有关。

我已经创建了一个在你的回购中为你做公关，其中包含一个基本的节点项目，其中包含两个示例。第一个例子是如何使用Mapbox中的标准代码加载您的3D模型。第二个例子是使用三盒进行同样的操作，并添加一些很酷的特性，如选择、旋转、拖动、包围框和添加工具提示。

​

​

Answer 2

在我的GLTF加载程序上，当我使用mapbox文档中的链接时，它完美地加载了对象：

var loader = new THREE.GLTFLoader();
        loader.load('https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf',function (gltf) {
          this.scene.add(gltf.scene);
        }.bind(this));
        this.map = map;

然而，当我用这个链接交换原始回购链接时，它就不起作用了：

https://github.com/jscastro76/threebox/blob/master/examples/models/radar/34M_17.gltf

它没有崩溃应用程序，它只是没有加载，我得到了这个错误：

​

当我将所有文件下载到一个文件夹中，并且使用像./folder/34M_17.gltf这样的路径时，情况是一样的，它也不会加载并且显示相同的错误。奇怪的是，一种工作方式，而不是另一种方式.