@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.