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.

What’s the error you’re getting in the console? 404? Is your gltf model using any kind of compression? Has your gltf model an associated .bin file or textures? — jscastro
– jscastro, Commented Jan 2, 2021 at 23:56
I'm not getting ANY error. I can use the 3D model from that link, works perfectly, when I change to any other link, or local path like ``` ./models/building.gltf```, it just doesn't show up on the map. Everything works, but the model doesn't show on the map. — TiagoRibeiro
– TiagoRibeiro, Commented Jan 2, 2021 at 23:59
If you are using .gltf models, normally they have an associated .bin file referenced in the code of the .gltf file. Indeed the model from Mapbox has a .bin file in the same folder, you can check it out. Those .bin file must be normally in the same folder as the .gltf — jscastro
– jscastro, Commented Jan 3, 2021 at 0:02
When I click the link, it instantly downloads the gltf, but I didn't see a .bin file. Even so, when I tried to download a building model, it came with a .bin file along with the .gltf. I placed the .bin and .gltf on the folder and called it like "./model/building.gltf", and it still didn't show up. Where is the .bin you say on the mapbox 3D model? — TiagoRibeiro
– TiagoRibeiro, Commented Jan 3, 2021 at 0:05
I could suggest you to use threebox an specific 3D plug-in for Mapbox where you’ll find dozens of examples with different models and a lot of extended functionality — jscastro
– jscastro, Commented Jan 3, 2021 at 0:05

jscastro · Accepted Answer · 2021-01-03 09:57:24Z

2

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.

answered Jan 3, 2021 at 9:57

jscastro

3,8301 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

TiagoRibeiro Over a year ago

Hi again, buddy I don't know what might be wrong, not only I can't see the 3D models in your provided html files in my repo, but I can't load them on my project using the same diorama. I noticed you have a .sln, being a visual studio project, and Im using visual code, can that be it? I'm a newbie so I can't quite pin the issue.. This might be farfetched but is there any way we can make some sort of discord/microsoft teams call so I can share the screen? Might be easier and faster (this is due today at 23:59, that's why I ask )

TiagoRibeiro Over a year ago

Now I've tried the treebox way and I'm getting ReferenceError: tb is not defined even tho I import Threebox from the scripts folder and all, I'm just doing desperate tries of trial n error atm

jscastro Over a year ago

Let's go step by step, the node project should work on its own. You should be able to open the .njsproj in VS code without any issue and just run it, or in the worst case, you can even create a node project yourself in VS code from scratch and just add the files I dropped in your repo

TiagoRibeiro Over a year ago

When I try to use the custom layer function on my project, I use import Threebox from "../../scripts/threebox.min.js"; because I copied that file, aswell as the .css. I feel that the threebox method would work, but I'm getting ReferenceError: tb is not defined when I do the window.tb (...)

TiagoRibeiro Over a year ago

Ok this should be more clear: codepen.io/TiagoRibeiro94/pen/VwKXyee?editors=0010 , you you check there I have the component with the Threebox createCustomLayer method at line 56. I'm getting that error on that window.tb . What can that be about? I think after solving that, should be working

|

TiagoRibeiro · Accepted Answer · 2021-01-03 17:30:57Z

1

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...

answered Jan 3, 2021 at 17:30

TiagoRibeiro

3161 gold badge7 silver badges24 bronze badges

1 Comment

jscastro Over a year ago

Tiago, there are some misunderstandings on this. You're trying to download from your local app, a resource which is in a github repo not a website, but even if so, you would get a CORS error because a website needs to be CORS-enabled. The reason the resource from Mapbox url works is because first is a website, second is CORS enabled. If you have the code of the app you're trying to build in a repo it'll be easier to help you. Just download all the resources in the radar folder that I provided you, and copy them in your local folder for models. Then change the url and check the console>network

Collectives™ on Stack Overflow

3D Models not loading on Mapbox using Three.js

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related