How can threejs layers and mapboxgl layers have the correct layering relationship?

[xiaxiangfeng]

mapbox-gl-js version: ^2.15.0

Question

I added two layers using threejs in mapboxgl. The expected rendering order of the layers is layerA - background - layerB, but the actual order is background - layerA - layerB.

code

layers: [
          {
            id: "background",
            name: "背景",
            category: "背景",
            type: "background",
            paint: {
              "background-color": "rgba(9, 26, 56, 0.71)",
            },
          },
        ],

map.on("style.load", function () {
      // instantiate threebox
      window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
        defaultLights: true,
        enableSelectingObjects: true,
      });

      map.addLayer(
        {
          id: "layerA",
          type: "custom",
          renderingMode: "3d",
          onAdd: function (map, mbxContext) {
            //instantiate a red sphere and position it at the origin lnglat
            var sphere = tb
              .sphere({ color: "red", material: "MeshToonMaterial" })
              .setCoords(origin);
            // add sphere to the scene
            tb.add(sphere);
          },
          render: function (gl, matrix) {
            tb.update();
          },
        },
        "background"
      );

      map.addLayer({
        id: "layerB",
        type: "custom",
        renderingMode: "3d",
        onAdd: function (map, mbxContext) {
          //instantiate a red sphere and position it at the origin lnglat
          var sphere = tb
            .sphere({ color: "red", material: "MeshToonMaterial" })
            .setCoords([-122.434, 37.7453, 1]);

          // add sphere to the scene
          tb.add(sphere);
        },
        render: function (gl, matrix) {
          tb.update();
        },
      });
    });

mapboxgl order

rendered results

[wcwcwcwc]

All custom layers are rendered in a translucent queue, which is why your threejs layers are rendered last

[xiaxiangfeng]

All custom layers are rendered in a translucent queue, which is why your threejs layers are rendered last

Can there be a normal order