How to make for each model a separate window?

I want my models to be loaded into two separate display areas, but I doubt the correctness of my chosen path. I think that I need to create my own separate "viewerDiv" for each model and load it there using the method "new Autodesk.Viewing.Private.GuiViewer3D (viewerDiv, {});". Is there another way to achieve this? However, on the implementation of this idea, I came to sweat a lot and there is no result so far, because I cannot change the grind of the necessary block, because it is located in the file at viewer3D.min.js. I tried to download this file and change the desired property locally, but it turned out that this file works in conjunction with other files that I also need to download. Unfortunately I could not download these files.

Solution

Do NOT download the Viewer library or modify its code since that's against the user license and technically challenging to localize the library in its entirety with all its dynamic dependencies and resources - always reference the library at its CDN address.

See this live sample for multiple Viewer instances cohabiting together - simply initialize your Viewer instances separately to their corresponding containers and adjust the size of your canvases by its class name adsk-viewing-viewer

<style>
.adsk-viewing-viewer{width:50%!important}
</style>
<script>
var viewer1 = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv1);
var viewer2 = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv2);
...
</script>

Alternatively since Viewer 6+ the library offers a built in Split Screen extension using sub canvases for multiple models:

var options = {  viewports: [
            modelId => modelId == 1,
            modelId => modelId == 2, 
            modelId => modelId == 3,  
            modelId => modelId == 4]
     };
viewer.start();
viewer.loadExtension('Autodesk.SplitScreen', options).then(()=>{
    viewer.loadModel(svf1);
    viewer.loadModel(svf2);
    ...
})