# BABYLON.GUI pointerLock cursor

**URL:** <https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621>\
**Category:** Feature requests\
**Tags:** gui\
**Created:** [January 10, 2022, 10:12pm UTC](https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621 "2022-01-10T22:12:39Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Armasyll](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/armasyll/32/21110_2.png) [@Armasyll](https://forum.babylonjs.com/u/Armasyll)\
**Post date:** [January 10, 2022, 10:12pm UTC](https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621/1 "2022-01-10T22:12:39Z")

</div>

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.

> **[Babylon.js Playground](https://playground.babylonjs.com/#H1SWVS%2327)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 13, 2022, 10:11pm UTC](https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621/2 "2022-01-13T22:11:07Z")

</div>

cc @DarraghBurke

---

<div class="post-metadata">

**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\
**Post date:** [January 13, 2022, 11:41pm UTC](https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621/3 "2022-01-13T23:41:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Armasyll](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/armasyll/32/21110_2.png) [@Armasyll](https://forum.babylonjs.com/u/Armasyll)\
**Post date:** [January 14, 2022, 8:50am UTC](https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621/4 "2022-01-14T08:50:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\
**Post date:** [January 18, 2022, 6:04pm UTC](https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621/5 "2022-01-18T18:04:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Armasyll](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/armasyll/32/21110_2.png) [@Armasyll](https://forum.babylonjs.com/u/Armasyll)\
**Post date:** [January 19, 2022, 7:52am UTC](https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621/6 "2022-01-19T07:52:37Z")

</div>

Yes, without the pointer being released

---

<div class="post-metadata">

**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\
**Post date:** [January 19, 2022, 5:28pm UTC](https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621/7 "2022-01-19T17:28:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [January 19, 2022, 8:11pm UTC](https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621/8 "2022-01-19T20:11:46Z")

</div>

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:

```auto
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)](https://playground.babylonjs.com/#H1SWVS#29). Lemme know if this was what you were thinking.

---

<div class="post-metadata">

**Author:** ![IncCorp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inccorp/32/23146_2.png) [@IncCorp](https://forum.babylonjs.com/u/IncCorp)\
**Post date:** [March 30, 2022, 6:59am UTC](https://forum.babylonjs.com/t/babylon-gui-pointerlock-cursor/26621/9 "2022-03-30T06:59:47Z")

</div>

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