Vertical "touch"-rotation is not working properly

[zntr1]

Hey guys,

so when you load a website containing the model-viewer editor (with a touch-device) and try to rotate it vertically using a touch-gesture, the editor doesn't register the touch at all. You first need to "horizontal"-swipe the model, hold and then rotate vertically.

Is this a bug or any fix on how to stop this behaviour? It is confusing for users.

Thanks in advance

[elalish]

That sounds like a bug that would be pretty easy to fix. We haven't really tested the editor much on touch-devices, but we probably should. Out of curiosity, where are you embedding our editor? It's great to hear people are using it more widely.

[zntr1]

We are currently experimenting with online 3D-Model viewing libraries (babylonjs, threejs, model-viewer etc.) and so far model-viewer is working great for us. Just testing out and trying to figure out the limits the libraries have. And that bug is something that occured to me while testing around. Keep up the great work ;)

[elalish]

Thanks! For the editor, I agree it's weird behavior, but for an element on a mobile page it's our default in order to not swallow page scrolls. You can adjust the behavior using the touch-action attribute: https://modelviewer.dev/docs/#entrydocs-stagingandcameras-attributes-touch-action

[zntr1]

Great, I will give it a try and report back.

[chikazin]

Thanks! For the editor, I agree it's weird behavior, but for an element on a mobile page it's our default in order to not swallow page scrolls. You can adjust the behavior using the touch-action attribute: https://modelviewer.dev/docs/#entrydocs-stagingandcameras-attributes-touch-action

Thanks! It solves the problem nicely. Just add the attribute touch-action="none" in <model-viewer>👍