BABYLON.GUI pointerLock cursor

Feature requests
1

A cursor inside the scene, that’s locked to the canvas, that can interact with the GUI like the mouse pointer.
While attempting to implement one myself, I’ve run into the issue of the pointer picking its cursor. And I’m sure someone can do it much better.

2

cc @DarraghBurke

3

Hi, I’m not 100% sure the desired behavior is. Is the purple cursor meant to follow the mouse position? Or is it supposed to be control by some other input system, like the keyboard?

If you don’t want the cursor to be pickable, you can disable isPointerBlocker.

2 Likes
4

Pointer that can be used to manage the camera, and the gui, without having to exit pointer lock. Thank you for that tip :V

5

So you want it to simultaneously affect the GUI and the camera? Well, uncommenting the line:

camera.attachControl(canvas, true);

should achieve that. Are you wanting it to switch between GUI and camera?

6

Yes, without the pointer being released

7

Ah, I see. @PolygonalSun is this something we could support in the new input system?

8

For something like this, I could potentially see a change to the FreeCamera directly but I could also see the desired behavior being accomplished like this:

var is CamMoveable = false;
var createScene = function () {
    ...
    // For any move event where there's a button pressed (drag behavior), enable camera controls
    scene.onPointerObservable.add((eventData) => {
        if (engine.isPointerLock && eventData.event.buttons > 0) {
            if (!isCamMoveable) {
                camera.attachControl(true);
                isCamMoveable = true;
            }
        }
    }, BABYLON.PointerEventTypes.POINTERMOVE);

    // If cam controls are enabled after drag is done, disabled them
    scene.onPointerObservable.add((eventData) => {
        if (isCamMoveable) {
            isCamMoveable = false;
            camera.detachControl();
        }
    }, BABYLON.PointerEventTypes.POINTERUP);
    ...
}

Basically, you would just attach the camera controls when needed and disable them when you were done. Here’s a modified version of your PR: internal pointer | Babylon.js Playground (babylonjs.com). Lemme know if this was what you were thinking.

9

Are u trying to implement something like the one inside my website link?