Not able to zoom/dezoom the Viewer on iOS

Grasshopper ShapeDiver
1

Hello,

we have been implementing a furniture configurator using the Viewer v3 and are facing some issues with the Viewer itself on mobile/ipad.
We are not able to zoom/dezoom with the “normal” pinch gesture.
We are able to turn the object but with a lot of inertia. Not super user friendly.

Any idea on how to improve all of this?

Thanks!

2

Are you experiencing this only in your configurator or also in the ShapeDiver platform for your model? Could you share either a link to the configurator (if it only happens there) or to the model (if it also happens on the platform) to help us evaluate the issue?

In general, note that there are camera settings you can play with to change zooming and rotating settings: https://help.shapediver.com/doc/camera-settings

3

Hello,

we can’t provide a link to our configurator for now as it’s still on development so we have no “public” access to the platform.
We are not facing the same issue on your website when visualizing the model.

Here is how we init the Viewer


async initViewer(canvas: HTMLCanvasElement) {

var viewport: null | IViewportApi = null

var session: null | ISessionApi = null

var camera: null | IPerspectiveCameraApi = null

​

let shapediverUrl = useProjectStore().project.item.attributes.furnitures?.data[0].attributes.base_model.data.attributes.shapediverUrl

let shapediverToken = useProjectStore().project.item.attributes.furnitures?.data[0].attributes.base_model.data.attributes.shapediverToken

​

if (!shapediverUrl || !shapediverToken) return

​

viewport = await createViewport({

canvas: canvas,

branding: {

logo: "https://the-wooder.com/cdn/shop/files/logo-thewooders_bbba41bb-5289-48ca-8932-6b3aa49d71b5.svg?v=1695221243&width=500",

backgroundColor: "#FFFFFF",

spinnerPositioning: SPINNER_POSITIONING.BOTTOM_LEFT

}

})

​

session = await createSession({

ticket: shapediverToken,

modelViewUrl: shapediverUrl

})

​

camera = viewport.createPerspectiveCamera();

viewport.assignCamera(camera.id);

viewport.update();

​

this.canvas = canvas

​

return { viewport, session, camera }

},

ANything wrong in our code ?
Thanks!

4

Hello @Alan11,

from your code everything looks good. This could be related to the CSS properties that are set on the parent nodes of the canvas. Without an example, it is very hard to say what the issue is.

Cheers, Michael

5

Here is an access to our configurator
https://configurator.the-wooder.com/?email=billi.alan%2B2%40gmail.com&password=7373809320259

Please select “Mes meubles” and click on the first furniture.
Once it opens try to zoom/dezoom with an iPad.
The iOS browser will take over and show you your other tabs instead of zooming/dezooming within the Viewer.
Thanks

6

Hello @Alan11,

thank you for the link.

Yes, this is default behavior by iOS devices, many developers have issues with it.

In our case, adding CSS to the body of the html file does the trick. This may depend on your setup though.

overscroll-behavior: none; touch-action: pan-y;

Cheers, Michael

7

Hello,

we’ve managed to fix this by adding
touch-action:none;
to the canvas element.

Thanks!

1 Like