How to use VirtualJoystickCamera with the rest of the app?

Questions
1

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?

2

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.

2 Likes
3

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 :slight_smile:

4

hey @nogalo, any news about your code?

5

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.

6

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

7

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

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

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

Hope someday engine.enterFullscreen() can deal with the VirtualJoystick smoothly. :sleeping_bed:t2:

1 Like
8

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

9

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.