Model Disappears When Rotating or Zooming the Map

[zrnwsy]

mapbox-gl-js version: v3.9.1
Google Chrome: 131.0.6778.205

When I rotate or zoom the map, the model disappears. How can I set it so that the model remains visible on the map and is not affected by map rotation or zooming?

`

<title>model layer</title>

<link href="https://api.mapbox.com/mapbox-gl-js/v3.9.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.1/mapbox-gl.js"></script>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }


</style>

<script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoiam9lY3VzZGluIiwiYSI6IjFmMzMzODhmYTQ4ZWM4MmYwZGVlZDMwMTJmMDIyZWQwIn0.8taIUk7YHSD1srUfcacXBA';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        center: [-0.16087414372315173, 51.50894821463396,], // starting position [lng, lat]
        zoom: 17, // starting zoom
        pitch: 40,
    });



    map.on('style.load', () => {
        map.addSource('models-source', {
            'type': 'geojson',
            'data': {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "id": "1",
                        "properties": {
                            'model-scale': [5, 5, 5],
                            'model-uri': "https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf"
                        },
                        "geometry": {
                            "coordinates": [
                                -0.1635306585709202,
                                51.50830029367606
                            ],
                            "type": "Point"
                        }
                    },
                    {
                        "type": "Feature",
                        "id": "2",
                        "properties": {
                            'model-scale': [1.5, 1.5, 1.5],
                            'model-uri': "https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf"
                        },
                        "geometry": {
                            "coordinates": [
                                -0.162242727126511,
                                51.50979725189052
                            ],
                            "type": "Point"
                        }
                    },
                    {
                        "type": "Feature",
                        "id": "3",
                        "properties": {
                            'model-scale': [1, 1, 1],
                            'model-uri': "https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf"
                        },
                        "geometry": {
                            "coordinates": [
                                -0.1598530711940782,
                                51.50896668760069
                            ],
                            "type": "Point"
                        }
                    },
                    {
                        "type": "Feature",
                        "id": "4",
                        "properties": {
                            'model-scale': [0.9, 0.9, 0.9],
                            'model-uri': "https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf"
                        },
                        "geometry": {
                            "coordinates": [
                                -0.15994617467165995,
                                51.50802021216103
                            ],
                            "type": "Point"
                        }
                    }
                ]
            }
        })

        map.addLayer(
            {
                'id': 'models-layer',
                'type': 'model',
                "source": "models-source",
                "slot": "middle", // "top",
                layout: {
                    // 'model-id': "https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf",
                    'model-id': ['get', 'model-uri'],
                    // 'symbol-z-elevate': true
                },
                paint: {
                    // 'model-opacity': 1,
                    // 'model-rotation': [0.0, 0.0, 0.0],
                    'model-translation': [0, 0, 22],
                    'model-scale': ['get', 'model-scale'],
                    // 'model-scale': 2,
                    // 'model-color-mix-intensity': 0,
                    'model-cast-shadows': true,
                    // 'model-emissive-strength': 0.8

                }
            }
        )

        map.addLayer(
            {
                'id': 'circle-layer',
                'type': 'circle',
                'source': 'models-source',
                'slot': 'top',
                'paint': {
                    'circle-radius': 10
                }
            }
        )


    })

</script>

`

[geografa]

Similar issue here. Model (GLB) disappears at a higher zoom level and when rotated:

GL JS 3.9.3
Version 132.0.6834.83 (Official Build) (arm64)

[jtorresfabra]

Thnaks @zrnwsy and @geografa. The issue is known when using the same model and we are working on a fix.

Model (GLB) disappears at a higher zoom level and when rotated:

Is this a single model? Can you post a fiddle with the issue please?

Thanks a lot

[geografa]

@jtorresfabra If you mean a single model (one GLB) then yes. Here's a JSBin:

https://jsbin.com/xojatugezu/edit?html,output

[jtorresfabra]

Hey @geografa,

Thanks for the example. I think your case is a different one and not related with the issue above. In your case the model is displaced from the center of the local axis. Then when you place the object the point used is the one referencing the center, so when this goes out of the screen the model is culled. I would recommend to set the center of the model to the center of the local axis to avoid your model getting culled.

[geografa]

@jtorresfabra yes! Thank you. That makes sense. Are there thresholds for how large or small the models may be or a minimum distance from the center axis?

[jtorresfabra]

@geografa The idea would be that the center point stays in the same tile as the maximum zoom tileID you are allowing.