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

Nobody has claimed this yet.

**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

Start with the map.addLayer calls in the issue, especially the custom layer render callbacks and the "background" before-ID. Read the custom-layer ordering behavior and compare it with the Threebox update path. Done means establishing whether the requested layerA-background-layerB relationship is supported and documenting or reproducing the correct behavior.

Written by the indexing model from the issue text.