Is it possible to use MapBox inside babylonJS engine?

Hello everyone

I want to use the MapBox as a ground and put my babylonjs model on it, I want to know is it possible to do it?

Yep :slight_smile:

You should set your own mapbox key line 4.

3 Likes

Thank you so much :pray:t2: :pray:t2: :pray:t2:

hey @sharp
is it possible to ask you a question.

why the model keep moving with the camera moving?

I’m not sure to understand your question :p…Is there a bug ?

You should have the same result as in the mapbox documentation : Add a 3D model | Mapbox GL JS | Mapbox

1 Like

I don’t is it a bug or not, but when I zoom out or moving on the map the model move with camera and changed its location.

What browser are you using ? On mobile or Windows ? Can you try with a different browser ?

i used Google Chrome and Firefox but I have the same problem. and it is mac os operation system.

Do you see the bug on the jsfiddle or in your own HTML ? I can’t reproduce on my macbook air OS X El Capitan 10.11.6 :frowning: What is your OS version ?

1 Like

I tried the other version of your model and it was ok. i mean this version : https://jsfiddle.net/fabsharp/cn2f7x1s/1/

Thank you so much :pray:t2: :pray:t2:. and I have another question is it possible to change the model with one simple cube? or I should just use the gltf model.

because I changed the gltf model with a simple cube and I couldn’t see the model on the map.
this is my code : https://jsfiddle.net/arashb12/9vm1sbyp/4/

This version should not works better than the other one, can you please answer my questions about your OS please ? Are you sure the older jsfiddle version doesn’t work ?

You forgot to create a scene, have a look to the errors in the console

sorry I forgot. my os is Catalina v.10.15.7.

Thank you so much. it works : https://jsfiddle.net/arashb12/9vm1sbyp/5/

:pray:t2: :pray:t2: :pray:t2: :pray:t2:

sorry for my questions.

I put a cube on location, and I want to know is it possible to switch the camera on the model and rotate over the model? I mean it can be rotate over the model like in babylonjs?

You have to use the mapbox camera API not the Babylon Camera, in this case we only used the BJS camera to make the rendering.

because I need to rotate over the model and also I have some GUI BUTTON but with the mapbox camera I couldn’t push the button and also rotate over my model.

is it possible to toggle between mapbox and babylonjs camera?

my model is under the ground and I should go below the map to see the model

Nope

Babylon GUI ? It won’t works.


Making babylon and mapbox works together is very challenging, i’m working on a full implementation but it’s not yet ready.

thanks a lot for answering to my question. :pray:t2: :pray:t2:

Use babylon only to render the geometry + materials + lights, everything else should be done with mapbox-gl-js.

the problem is dynamic map tiled, Here is my PG: Babylon.js Playground
I try to use it but I can just use one tile, but I need world map and then zoom in to the details like mapbox maps, is it possible to help me how can I do it?