How to create a click-only canvas? (disable movement, keep "pull down to refresh")

Questions
1

I am trying to render a scene on a mobile-oriented website, with the following features:

  • Keep the “pull down to refresh”-functionality on mobile, so that when the user pulls down on the canvas, the page refreshes as it does on every mobile browser.

  • Still have the (scene-embedded) buttons working when touched.

I googled this but could not find anything that worked. Any help?

2

if you do not need it, you might try to not attach the camera ?

you could also call in scene.detachControl() to detach any listener in the scene.

Then you could reattach only the part you need with scene.attachControl where the signature is as follow: attachControl(attachUp = true, attachDown = true, attachMove = true)

so you could try scene.attachControl(true, true, false) ?

3

Not attaching the camera seems to keep the objects from displaying. Adding scene.detachControl() does disable camera movement, but it does not allow for the pull-to-refresh functionality on mobile browsers.

EDIT: Pull-to-refresh does work on a regular canvas, so it should somehow be possible

4

I am pretty sure @RaananW will no a trick for this one :slight_smile:

5

Found it! The missing piece was switching the [touch-action=“none”] attribute to [touch-action=“pan-y”] in combination with the detach/attach control functions mentioned in the first reply.

[touch-action=“none”] tells the browser to “Ignore all touch inputs on the canvas”, indicating they’ll be handled by underlying code. [touch-action=“pan-y”] tells the browser to “do its thing” when there’s y-axis scrolling happening on the page, in this case it would do the “pull-to-refresh” thing.

Thanks!

1 Like