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