Better iPad navigation for Forge Viewer

This is a quick blog post on improving the navigation experience, when you are browser models on your iPad.

On an iPad, you use pinch / zoom, pan and rotate gestures using two fingers.  It's very intuitive.  However, if you've ever tried panning around a google maps terrain, you'd notice that the default navigation in ForgeViewer gets a little quirky.  That's because the pivot point behavior is designed for a mouse and desktop, not for an iPad.

A quick fix to this problem is to set the pivot point to the center of the iPad screen, whenever you lift your fingers off the iPad screen.

Try the demo on your iPhone/iPad, by snapping a phone of this QRCode:

Source Code: https://github.com/wallabyway/forge-pinch-zoom

Click here for a Demo: https://wallabyway.github.io/forge-pinch-zoom

Here's the code:

let viewer = null;


function onGestureEnd() {
    var hitTest = viewer.clientToWorld(window.innerWidth/2, window.innerHeight/2, true);
    viewer.navigation.setPivotPoint(hitTest.point);
}

function loadModel(urn) {

    const options = {
        env: 'AutodeskProduction',
        accessToken: _adsk.token.access_token,
    };

    Autodesk.Viewing.Initializer(options, () => {

        const div = document.getElementById('forgeViewer');
        viewer = new Autodesk.Viewing.Private.GuiViewer3D(div);
        viewer.start();
        Autodesk.Viewing.Document.load(`urn:${urn}`, (doc) => {
            var viewables = doc.getRoot().getDefaultGeometry();
            viewer.loadDocumentNode(doc, viewables).then( onLoadFinished );
        });
    });

    function onLoadFinished() {
        document.addEventListener('touchend', onGestureEnd);
    }
}

ps. Looking at Apple's 'GestureEvent', this would be the logical choice to use instead of the hammer.js library.  Then find the Android polypill as appropriate.

You can follow me on twitter here:  @micbeale