13 Feb 2018

Multimodel Search support in Forge Viewer v4.0

multi-model search

With the release of version 4.0 of the Forge Viewer, you can now use the 'model browser' to search

across multiple models.

This is a quick demo, showing how to load two models, 'hand-saw' and a 'building-1st-floor'.  

Here's the loading source code:

            var urnHandsaw = "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnJwYXJ0eTEvSGFuZF9Sb3V0ZXIuZjNk";
            var urnLevel1 = "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnJwYXJ0eTEvRG9nX0hvdXNlXzIwMTZfQ2xhc3NpZmllZF9XaXRoTWF0ZXJpYWxUZXh0dXJlLmR3Zg";

            function onLoadSuccessInit() {
                var viewables = viewerApp.bubble.search({ 'type': 'geometry' });
                if (viewables.length < 1) return;
                viewerApp.selectItem(viewables[0].data);
            }

            function onLoadSuccess(doc) {
                var viewables = viewerApp.bubble.search({ 'type': 'geometry' });
                const path = doc.getViewablePath(viewables[0].data);
                console.log(viewables);
                const posOptions = { 
                    placementTransform: (new THREE.Matrix4()).setPosition({x:1,y:100,z:1}).scale({x:2,y:2,z:2}) 
                };
                var viewables = viewerApp.bubble.search({ 'type': 'geometry' });
                let viewer = viewerApp.getCurrentViewer();
                viewer.loadModel(path, posOptions);
            };

            function onInitialized() {
                viewerApp = new Autodesk.Viewing.ViewingApplication('forgeViewer');
                viewerApp.registerViewer( viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D );   
                viewerApp.loadDocument( "urn:"+urnHandsaw, onLoadSuccessInit);
                window.setTimeout(e => 
                    viewerApp.loadDocument( "urn:"+urnLevel1, onLoadSuccess), 3000);

            };
            options = getViewingOptions();
            Autodesk.Viewing.Initializer( options, onInitialized);
        }

When loading, I set the transform matrix to both scale down the size of the building and shift it above the handsaw (as seen in the code below) - just to highlight these are two completely different models.

const posOptions = { 
   placementTransform: (new THREE.Matrix4()).setPosition({x:1,y:100,z:1}).scale({x:2,y:2,z:
};
viewer.loadModel(path, posOptions);

Now, with the scene in place, click on the model-browser and type in the new search box ‘bas’, you will now see search results for both models:

"basic wall" from the building, and "BasePlate1" from the HandSaw design.   

You can see that in the animated gif above.

Similarly, you can set visibility, highlights and ghosting across multiple models, correctly.
Before, only the results from the first model would work.  

There are still some quirks with ground reflection and shadows.

You can find the source code here: 

and demo here

Remember to follow @micbeale on Twitter.

..Feel free to add any issues you find to my Github issues repo.

Related Article