10 Jan 2020

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

 

 

Related Article

Posted By

Michael Beale

Michael Beale

Michael Beale is a senior software engineer at Autodesk, where he has been a globe-trotting technical advocate for Forge. Michael focuses on connecting Autodesk cloud data and Autodesk Forge APIs to the browser. He’s also contributed to Autodesk Homestyler, the Forge Large Model Viewer (LMV), Autodesk Prooflab, Stereo-Panorama service with webVR and recently 3D formats, such as glTF and 3D-Tiles-Next. Twitter:...