[add-3d-model-babylon.html] set rootMesh.position.y = -35 3D model disappears

[Lorenzoarc]

Hi guys,

maplibre.js version v4.5.2 broswer : edge or chrome

I started with the example maplibre-gl-js/test/examples /add-3d-model-babylon.html, I modified the line 131 of the code adding rootMesh.position.y = -35 and this is the result: https://github.com/user-attachments/assets/08607d37-3242-47d8-ab58-92b6500a64b3

The 3d model of the satellite dish goes beyond the map plane and it's not visible from some perspective as you can see from the video. I have tryed to add at line 206 this line of code:

map.on('load', function () {
    // Iterate over all the layers and remove the background layers
    map.getStyle().layers.forEach(function (layer) {
            console.log(layer.id)
           map.removeLayer(layer.id);
        });
    });

The idea with the code above is cutting all the layers including the map for solving the visualization of the negative y portion of the model, but the problem persist.

My final goal would be to display excavations on the map, so using transparency on the map layer for making visible the part of the excavations which are in the underground.

I don't know if it is a bug or not, but if there is a way to display model also under the map would be awesome.

Any suggestions? Thank you for the help

Best regards

[HarelM]

Please provide a jsbin/codepen/stackbliz and better explain the expected vs actual. There's a template to opening an issue for a good reason...

[Lorenzoarc]

Sorry, I hope this time the issue is more clear

maplibre.js version v4.5.2 broswer** : edge or chrome

I started with the example maplibre-gl-js/test/examples /add-3d-model-babylon.html, I modified the line 131 of the code adding rootMesh.position.y = -35 and this is the result: https://github.com/user-attachments/assets/08607d37-3242-47d8-ab58-92b6500a64b3

The 3d model of the satellite dish goes beyond the map plane and it's not visible from some perspective as you can see from the video. I have tryed to add at line 206 this line of code:

map.on('load', function () {
    // Iterate over all the layers and remove the background layers
    map.getStyle().layers.forEach(function (layer) {
            console.log(layer.id)
           map.removeLayer(layer.id);
        });
    });

The idea with the code above is cutting all the layers including the map for solving the visualization of the negative y portion of the model, but the problem persist.

My final goal would be to display excavations on the map, so using transparency on the map layer for making visible the part of the excavations which are in the underground.

I don't know if it is a bug or not, but if there is a way to display model also under the map would be awesome.

Any suggestions? Thank you for the help

Best regards

[HarelM]

I think you'll need to tweak the farZ plane. The current map cuts the 3D scene just behind the map so stuff like what you are trying to do are not supported. You'll need to dig into the code to solve this basically. Look at the following code: https://github.com/maplibre/maplibre-gl-js/blob/f8e9c78f563153711650fc3bafbd9951540483e5/src/geo/transform.ts#L890C15-L890C39

[Lorenzoarc]

Thank you for the answer, I have successfully solved my problem. Could it be possible to make the farZ parameter adjustable outside the library?

Thank you for the amazing project, Best regards,

[HarelM]

It's calculated constantly basically, so I'm not sure what would be a good solution to this. You are welcome to propose a design that would solve your case, and hopefully others.

[Lorenzoarc]

Sorry for the late response @HarelM , but the problem it is not trivial because I can tweak the farZ but the problem of exploring the underground still, because the position of the camera is locked for y positive, so it's not possible to move it inside the excavation.

Instead I have explored another solution or move the map tile layer up to 0 adjusting the trasform.elevation properties accordingly to the depth of the excavation. Obviously this solution imply that i have all the tiles move higher and the visualization is different respect to the levels of zoom of before.

So I have some questions about this new solution: 1) I would ask if it possible to set the elevation of the map tile layer from outside the library?? 2) From your perspective what are the issues that this modification arises ?

This is an example that i want to obtain: https://github.com/user-attachments/assets/a862b85a-854a-4cea-af4a-0b054dcc06ee

Thank you for the help

[HarelM]

There are talks about similar things I think related to aviation and looking upwards etc here:

• https://github.com/maplibre/maplibre-gl-js/issues/4717

Feel free to see if both describe the same problem and think about a solution together. I don't think I have a good idea how to achieve what the video is showing, but it should be possible, I hope.