3D Models not loading on Mapbox using Three.js

Question

My problem is I can't load any.gltf file, only a standard one. Please read further to understand in detail. I have the following map on my application, that has that 3D model pointed by the red arrow:

The model is a GLFT file from here . The code I have is provided by Mapbox itself on their documents, here .

Here it is how I have it:

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');
});

As you can see, I have the model link on the loader.load() function. It works perfectly for THAT model. Yet, when I try other models, locally and instead of the link, I have something like ('./models/file.gltf) it doesn't work. I can't understand why, and can't seem to make it work.

Answer 1

Not sure what was the issue in your code, probably it was related to the relative path to the files.

I have created a 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 and adding some cool features like selecting, rotating, dragging, bounding box and adding tooltips.

Answer 2

On my GLTF loader, when I use that link from the mapbox docs, it loads the object, perfectly:

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;

Yet, it doesn't work when I trade that link for the original repo link like this:

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

It doesn't crash the app, it simply doesn't load and I get this error:

It's the same when I download all the files into a folder and I use the path like ./folder/34M_17.gltf , it also doesn't load and shows the same error. And that's what's weird, working one way, and not the other...