Mouse Manipulation with Bounding Box Gizmo

Questions
1

Using the Bounding Box Gizmo, while dragging one of the corner boxes, if I move my mouse outside the HTML canvas, and then move it back into the HTML canvas, the mouse pointer gets out of sync with the bog dragging. How do I prevent this?

The issue has to do with the BabylonJS in an iframe, clicking down within the iframe to start a drag action and then releasing outside of the iframe, the pointer up never gets to the iframe BabylonJS code.
See this for an example:

https://polite-sea-04066681e.2.azurestaticapps.net/

2

I have no idea but maybe @PolygonalSun can help here

1 Like
3

Hey @Michael_Scherotter1,
I think I’ll need a bit more info. For example, what browser and version of Babylon.js are you using? Furthermore, when you say the pointer gets out of sync, what do you mean? Like do you mean that the mesh doesn’t quite return to the same size when you return to the original point or that bounding box manipulation stops when the cursor exits the canvas area? Also, would you be able to provide a playground where you can reliably repro this? Any additional context would be greatly appreciated.

4

The issue has to do with the BabylonJS in an iframe, clicking down within the iframe to start a drag action and then releasing outside of the iframe, the pointer up never gets to the iframe BabylonJS code.
See this for an example:

https://polite-sea-04066681e.2.azurestaticapps.net/

5

Can you share the code of your page? I tried embedding a playground iframe with the gizmo and it worked fine, so there might be some configuration difference :thinking:

6

The code is on the page here:
https://polite-sea-04066681e.2.azurestaticapps.net/pointer.html

This issue seems to be for a similar case: Cursor locks to rotating the camera on mouse up outside of iframe - #18 by PolygonalSun

            const canvas = document.getElementById("renderCanvas"); // Get the canvas element
            const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
            const createScene = function () {
            // Creates a basic Babylon Scene object
            const scene = new BABYLON.Scene(engine);
            // Creates and positions a free camera
            const camera = new BABYLON.FreeCamera("camera1", 
                new BABYLON.Vector3(0, 5, -10), scene);
            // Targets the camera to scene origin
            camera.setTarget(BABYLON.Vector3.Zero());
            // This attaches the camera to the canvas
            camera.attachControl(canvas, true);
            // Creates a light, aiming 0,1,0 - to the sky
            const light = new BABYLON.HemisphericLight("light", 
                new BABYLON.Vector3(0, 1, 0), scene);
            // Dim the light a small amount - 0 to 1
            light.intensity = 0.7;
            // Built-in 'sphere' shape.
            const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", 
                {diameter: 2, segments: 32}, scene);
            // Move the sphere upward 1/2 its height
            sphere.position.y = 1;
            // Built-in 'ground' shape.
            const ground = BABYLON.MeshBuilder.CreateGround("ground", 
                {width: 6, height: 6}, scene);

            const box= BABYLON.BoundingBoxGizmo.MakeNotPickableAndWrapInBoundingBox(sphere);
            const layer = new BABYLON.UtilityLayerRenderer(scene);
            
            const gizmo = new BABYLON.BoundingBoxGizmo();
            gizmo.attachedMesh = sphere;
            return scene;
        };
        
        const scene = createScene(); //Call the createScene function
        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
7

Let me tag @PolygonalSun so he can take another look

8

Yeah, I can take another look

1 Like
9

So with this issue, I’m not sure if there’s anything that we can do inside of Babylon.js because the pointerup/out/leave events get suppressed when dragging outside of the iframe. One thing that you could try would be to “forward” the event to the canvas.

// Try putting this in a script in the index
// Get iframe
const iframe = document.getElementById("renderFrame");

// Take the event and wrap it in a new event to avoid the "already dispatched" error
window.onpointerup = (evt) => {
    const canvas = iframe.contentDocument.getElementById("renderCanvas");
    const pointer = new PointerEvent("pointerup", evt)
    canvas.dispatchEvent(pointer);
};

There might be some additional logic missing but that’s the gist of it. There might be a better way to communicate across the iframe but I think forwarding is the way to go (or at least a way to go).

3 Likes