# How to use VirtualJoystickCamera with the rest of the app?

**URL:** <https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354>\
**Category:** Questions\
**Tags:** input\
**Created:** [November 16, 2021, 8:38pm UTC](https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354 "2021-11-16T20:38:01Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![brunobg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brunobg/32/5523_2.png) [@brunobg](https://forum.babylonjs.com/u/brunobg)\
**Post date:** [November 16, 2021, 8:38pm UTC](https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354/1 "2021-11-16T20:38:01Z")

</div>

`VirtualJoystickCamera` opens a global canvas on the `<body>` element. This is a bit weird, since it pretty much locks the DOM. You can’t get a click on a button to go fullscreen, and if you somehow go fullscreen first, `VirtualJoystickCamera` will only work if you requested fullscreen on `body`. You can’t escape it after it’s created – there’s no way to interact with the DOM anymore.

Am I missing something here? Is it perhaps sort of abandoned for a better interaction camera in mobiles?

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [November 16, 2021, 9:04pm UTC](https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354/2 "2021-11-16T21:04:29Z")

</div>

Hi.

Yeah, that’s a known problem. Maybe you can play with z-index? To be honest I am not if it will work. I worked on a workaround some time ago, using BABYLON GUI. I have a project that requires similar work so I will be redesigning that system (in the next 2-3 days should be done). So if you can wait, I could share that with you. In the meantime you can look into my older system on this thread.

> [@GUI does not work with Joystick! And alternative to joystick!](https://forum.babylonjs.com/t/gui-does-not-work-with-joystick-and-alternative-to-joystick/2032/14):
>
> And yes. You have to take into account the position of pucks when you use those left and top properties on the container. I updated the code so you can easier do that. [https://www.babylonjs-playground.com/#C6V6UY#5](https://www.babylonjs-playground.com/#C6V6UY#5) You can see a variables on lines 49 and 50. Which are controlling those left and top properties and updates the position of the pucks and containers symmetrically on both joysticks. And if the screen size changes it works properly.

---

<div class="post-metadata">

**Author:** ![brunobg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brunobg/32/5523_2.png) [@brunobg](https://forum.babylonjs.com/u/brunobg)\
**Post date:** [November 16, 2021, 9:12pm UTC](https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354/3 "2021-11-16T21:12:35Z")

</div>

> So if you can wait, I could share that with you. In the meantime you can look into my older system on this thread.

That’d be great, I can wait and would be happy to test it or help if you need anything. Thanks 🙂

---

<div class="post-metadata">

**Author:** ![brunobg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brunobg/32/5523_2.png) [@brunobg](https://forum.babylonjs.com/u/brunobg)\
**Post date:** [November 25, 2021, 4:46pm UTC](https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354/4 "2021-11-25T16:46:00Z")

</div>

hey @nogalo, any news about your code?

---

<div class="post-metadata">

**Author:** ![nogalo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nogalo/32/120_2.png) [@nogalo](https://forum.babylonjs.com/u/nogalo)\
**Post date:** [November 26, 2021, 9:33am UTC](https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354/5 "2021-11-26T09:33:14Z")

</div>

Sorry man, not yet, I am moving to different country at the moment, so I barely have any time. As soon as I get something i will let you know. Until than, if it is urgent for you, I really recommend to look into the thread I’ve posted above. Pretty much it will be the same thing, I will just refactor some stuff for easier control, and I’ve used some private variables of Babylon engine, which is not recommended to do, so I want to rework the logic to avoid that. But it will work on the same principles.

---

<div class="post-metadata">

**Author:** ![brunobg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brunobg/32/5523_2.png) [@brunobg](https://forum.babylonjs.com/u/brunobg)\
**Post date:** [December 13, 2021, 10:50pm UTC](https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354/6 "2021-12-13T22:50:01Z")

</div>

For those running into this thread in the future, this is how I fixed it, essentially reimplementing the joystick code. Not clean, but straightforward and works well. [lajevr/Underwaterb.vue at 35409ac40287b02c01bc0a6dc32c1ca185fa0a22 · Corollarium/lajevr · GitHub](https://github.com/Corollarium/lajevr/blob/35409ac40287b02c01bc0a6dc32c1ca185fa0a22/components/Underwaterb.vue#L411)

---

<div class="post-metadata">

**Author:** ![Treedbox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/treedbox/32/20615_2.png) [@Treedbox](https://forum.babylonjs.com/u/Treedbox)\
**Post date:** [May 14, 2022, 8:45pm UTC](https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354/7 "2022-05-14T20:45:59Z")

</div>

Its a tricky situation, if we call: `engine.enterFullscreen()`, the VirtualJoystick in FullScreen won’t work anymore.  
We need to call:

```auto
// force fullscreen on click
if (!document.fullscreenElement) {
	document.body.requestFullscreen();
}

```

For the VirtualJoystick, we can do it on `joystick.pressed`:

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

Hope someday `engine.enterFullscreen()` can deal with the VirtualJoystick smoothly. 🛌🏻

---

<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:** [May 16, 2022, 1:25pm UTC](https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354/8 "2022-05-16T13:25:40Z")

</div>

cc @RaananW as he is a css genius but not sure there is anything easy

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 16, 2022, 2:37pm UTC](https://forum.babylonjs.com/t/how-to-use-virtualjoystickcamera-with-the-rest-of-the-app/25354/9 "2022-05-16T14:37:31Z")

</div>

Yeah, that’s a trciky one!!

The more I think about it the more I think that we should add some form of an override for the element that is being full-screened. As you say - we maximize the canvas and not body (or any other element), but if HTML is being added to the page and you want it included when in full screen, engine.enterFullscreen() won’t work correctly.

So my take on this - we should allow overriding the element on which the virtual joystick is created and we should allow overriding the element that goes fullscreen in engine. We probably need an issue for that on github.