Forge Viewer as Extension for another viewer

Question

We have a two forge viewers in one div. We has initialize those viewers same time and showing different models. Is it possible to initialize Autodesk Forge viewer as extension for another viewer and show in that viewers different models?

Answer 1

There is no official extension for showing one Forge Viewer inside another, but implementing this is possible. You could reuse one of the UI components of the viewer (for example, DockingPanel , also explained in this tutorial ), and host the second viewer in it.

Here's how such an extension might look like:

class MyExtension extends Autodesk.Viewing.Extension {
    constructor(viewer, options) {
        super(viewer, options);
        this._group = null;
        this._button = null;
        this._panel = null;
    }

    load() {
        return true;
    }

    unload() {
        return true;
    }

    onToolbarCreated() {
        this._group = new Autodesk.Viewing.UI.ControlGroup('allMyAwesomeExtensionsToolbar');
        this._button = new Autodesk.Viewing.UI.Button('MyExtensionButton');
        this._button.setToolTip('My Extension Button');
        this._group.addControl(this._button);
        this._panel = new MyPanel(this.viewer, this.viewer.container, 'MyPanel', 'My Panel Title');
        this._button.onClick = (ev) => {
            this._panel.setVisible(true);
        };
        this.viewer.toolbar.addControl(this._group);
    }
}

class MyPanel extends Autodesk.Viewing.UI.DockingPanel {
    constructor(viewer, container, id, title, options) {
        super(container, id, title, options);
        this.viewer = viewer;
        this.secondViewer = null;
        this.container.style.width = '640px';
        this.container.style.height = '480px';
        this.container.style.left = '1em';
        this.container.style.top = '1em';
    }

    setVisible(show) {
        super.setVisible(show);
        if (show && !this.secondViewer) {
            this.secondViewer = new Autodesk.Viewing.GuiViewer3D(this.container);
            this.secondViewer.start();
            Autodesk.Viewing.Document.load(
                'urn:<your model urn>',
                this.onDocumentLoadSuccess.bind(this),
                this.onDocumentLoadFailure.bind(this)
            );
        }
    }

    onDocumentLoadSuccess(doc) {
        const viewables = doc.getRoot().getDefaultGeometry();
        this.secondViewer.loadDocumentNode(doc, viewables);
    }

    onDocumentLoadFailure(viewerErrorCode) {
        console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
    }
}

Autodesk.Viewing.theExtensionManager.registerExtension('MyExtension', MyExtension);