How to let 2d gui block operation of 3d gui

Questions
12

Ok, I found a way.

UtilityLayerRenderer has a pickingEnabled property that enables/disables event handling. Also, it is calling the Scene.isPointerCaptured to know if the event has already been handled or not.

By combining those info, we can do:

It overrides scene.isPointerCaptured:

    const saveIsPointerCaptures = scene.isPointerCaptured.bind(scene);

    let enable3DEvents = true;

    scene.isPointerCaptured = (pointerId) => {
        manager.utilityLayer.pickingEnabled = enable3DEvents;
        return saveIsPointerCaptures(pointerId);
    };

So we can use the onPointerEnterObservable / onPointerOutObservable observers of a Control2D to block 3D event handling:

    const block3DEvents = (ctrl2d) => {
        ctrl2d.onPointerEnterObservable.add(() => {
            enable3DEvents = false;
        });
        ctrl2d.onPointerOutObservable.add(() => {
            enable3DEvents = true;
        });
    };
3 Likes