使用 Three.js 无法在 Mapbox 上加载 3D 模型

Question

我的问题是我无法加载任何 .gltf 文件，只能加载标准文件。请进一步阅读以详细了解。我的应用程序中有以下地图，其中有红色箭头指向的 3D 模型：

该模型是来自 here 的 GLFT 文件。我的代码由 Mapbox 自己在他们的文档中提供，here.

我是这样的：

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() 函数上使用了模型 link。它非常适合那个模型。然而，当我在本地而不是 link 尝试其他模型时，我有类似 ('./models/file.gltf) 的东西不起作用。我不明白为什么，而且似乎无法让它发挥作用。

Answer 1

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

我创建了一个 PR for you in your repo, with a basic node project with 2 examples. The first example is how to load your 3D model using the standard code from Mapbox. The second example is to do the same using threebox 并添加了一些很酷的功能，例如选择、旋转、拖动、边界框和添加工具提示。

Answer 2

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

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;

然而，当我用 link 交易原始回购 link 时，它不起作用：

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

它不会使应用程序崩溃，只是不会加载，我收到此错误：

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

使用 Three.js 无法在 Mapbox 上加载 3D 模型

3D Models not loading on Mapbox using Three.js

javascript

3d

three.js

mapbox

mapbox-gl-js