Delayed instantiation of Threebox prevents selection of 3D objects

[leeprobert]

I have a React NextJS project that works fine on localHost. But when I publish it the 3D objects on my map can not be selected. The cursor is the open hand and all I am able to do is pan, rotate and zoom the Mapbox map.

I have been able to emulate the live experience by delaying the instantiation of the Threebox custom layer. This suggests it is because the 3D object has not loaded quickly enough.

Here is the code where I delay after the map style has loaded:

mapRef.current.on('style.load', () => {
            // set a delay of 1 second here
            setTimeout(() => {
                setMapLoaded(true);
            }, 3000);
        });

this sets state to do the rest. Here is the useEffect for mapLoaded:

useEffect(() => {
        if (mapLoaded) {
            mapRef.current.addLayer({
                id: 'custom-3d-models-layer',
                type: 'custom',
                renderingMode: '3d',
                onAdd: function (map, mbxContext) {
                    console.log('Layer added. Context = ', mbxContext);
                    window.tb = new Threebox(
                        map,
                        mbxContext,
                        {
                            enableSelectingObjects: true,
                            enableDraggingObjects: true,
                            enableRotatingObjects: true,
                            defaultLights: true,
                            sky: true,
                            terrain: true,
                        }
                    );
                    console.log(window.tb);
                    const scale = 1;
                    const buildingsModelOptions = {
                        obj: 'models/buildings.glb',
                        type: 'glb',
                        // scale: { x: scale, y: scale, z: scale },
                        units: 'meters',
                        anchor: 'center',
                        // rotation: { x: 0, y: 0, z: 45 },
                        name: 'buildings',
                    };

                    window.tb.loadObj(buildingsModelOptions, (model) => {
                        var building = model.setCoords(originWithAltitude);
                        building.addEventListener('SelectedChange', onSelectedChange, false);
                        building.addEventListener('ObjectDragged', onDraggedObject, false);
                        building.addEventListener('ObjectMouseOver', onObjectMouseOver, false);
                        building.addEventListener('ObjectMouseOut', onObjectMouseOut, false);
                        window.tb.add(building);
                        window.tb.rotationStep = 1;
                        window.tb.enableSelectingObjects = true;
                        window.tb.enableDraggingObjects = true;
                        window.tb.enableRotatingObjects = true;
                        window.tb.update();
                    });
                },

                render: function () {
                    window.tb.update();
                }
            });
        }
    }, [mapLoaded]);

I even tried to set the enableSelectingObjects property after the 3D model had loaded. And also trying an update. Again, this all works fine locally.