Best practice - embedded models in mobile

Has anyone used babylonjs for embedding 3d models in webpages? How did you handle it in mobile? Sorry that this is not really about BJS itself. But if you allow the normal camera controls, you can’t scroll the page anymore because the canvas uses it as a camera rotation. In pages that are 100% a canvas this is not an issue, but when the model is shown embedded in the middle of a larger page it breaks scrolling.

Any good UX practice to handle this? How did you handle it?

Did you look into the babylonjs viewer ??? it might totally help in your case:

Yes, but it also does scroll hijacking.

In babylon maybe you could wait for a click on the canvas before calling attachEvents on the camera ?

1 Like

Yes, a click to attach and to detach the camera could work. I was wondering if there was some UX guideline about this, but I couldn’t find any. I’ll let the post open for a little while to see if there is a better idea, if not I’ll take your solution. Thanks @sebavan.

Adding @PatrickRyan who might have way better design ideas :slight_smile:

@brunobg, the user interaction around cameras in a canvas and the navigation of the parent DOM is always challenging, especially with mobile. Basically it’s a question of which has focus because both need to convert input into action, whether than is scrolling the page or rotating a camera.

However the click to give focus on an element in a canvas isn’t very helpful with touch interaction as the user may try to tap/swipe and not see any reaction then when they try to scroll, if they tap within the canvas again, it can seem like the page is broken because tap/swipe now rotates the camera instead of scrolling the page.

I can see two basic paths to correct this, unless you are ok with the tapping on the canvas to focus and then off again to get scroll control, but there seem to be a lot of edge cases that could make that UX poor. Those are:

  • UI element for camera control. This could be a button that acts as a joystick to rotate the camera with basic camera controls detached from the scene. This won’t break the UX around scroll, and give you 100% control over when the camera needs to rotate. However, you need to design a button into your UI and then attach camera control on click and detach camera control on release. Not ideal, but one path.
  • Separate gesture for canvas camera control. You could leverage a different gesture for the canvas camera control like two-finger swipe versus just swipe. Pinch does become a bit more tricky, but it can be done. The biggest problem with this is discoverability which means you need to build in a first-run experience or add in UI around how to manipulate the camera. And this method could collide with gestures at the OS level depending on the device.

Neither of these are trade-off free. I might go with the UI joystick option if you know mobile is going to be a big consumer of your content because it has the best affordance for touch gestures. The click for focus can work as well, but is better if you can combine hover to let your user know what will happen which isn’t available with touch gestures. I hope something here helps, but this is a big problem for integration of 3D canvas in an HTML page on mobile.

1 Like

Thanks @PatrickRyan for the detailed and thoughtful answer. It should go into the docs :slight_smile:

I never seen the joystick solution in the wild. If you know of a good implementation that you can post here I’d like to see.

1 Like