Using multiple views

HOOPS Web Viewer 2024.6.0 and above supports multiple views on a single Web Viewer canvas. Common use cases include front, side, and top views, although you are able to set whatever camera your application requires. The number of views is only limited by the capability of the execution environment.

These views can have their own camera, draw mode, lights, and more. In fact, anything that is modified using a call on the View class will be unique to that view. All these views share a single Model (as well as several other viewer concepts), so any change to the model will be reflected in all views. For example, if you’re viewing a model with two views and move a part, it will move in all views.

There is a new type of key, the ViewKey which is an identifier unique to a view. The initial view has a key of 0. You’re able to add and delete views as needed using functions added to the WebViewer class. When creating a new view, you need only supply a HTMLElement or a string containing the ID of the HTMLElement to set up a new 3D view. Each view is only drawn when it needs to be, so if you’re rotating a camera in one view, the other views will not be drawn.

Once you have created your new view, it will have its own operator stack which allows you to customize interaction.

Important

A user can only create additional views after the ModelStructureReady callback has been triggered. Additionally, the initial view cannot be deleted.

Let’s imagine we have a page with two HTMLElement containers with IDs of “viewer1” and “viewer2”. To create a new view, simply call WebViewer.AddView with the ID of the container:

<div id="viewer1" class="hwv-view">Initial view</div>
<div id="viewer2" class="hwv-view">New view</div>

<script type="module">
import * as Communicator from "./hoops-web-viewer.mjs";

// initial view
const hwv = new Communicator.WebViewer({
        container: "viewer1",
        enginePath: ".",
        endpointUri: "my_model.scs"
});
hwv.start();

hwv.setCallbacks({
        modelStructureReady: () => {
                // new view
                hwv.addView({
                        container: "viewer2"
                });
        }
});
</script>

The class="hwv-view" is not mandatory - you can use your own styling and layout. In the screenshot below, notice the multiple cameras provide different views, but a selection in one view also selects the same geometry in the second view.

../../../_images/multiple-view.png

To remove a view, use WebViewer.removeView.

A more complete example which shows views being created in response to events can be found at HC_INSTALL_DIR/web_viewer/examples/multi_view.html and its related script HC_INSTALL_DIR/web_viewer/examples/scripts/examples/multi_view.js. This example uses classes to encapsulate the variables and logic, which is recommended for production applications.

Limitations

  • Cutting planes work, but if there are several views, capping will only be drawn in one of them after a cutting plane drag. An update to a view will be drawn with capping intact.

  • Some effects such as simple shadow and bloom might behave poorly on certain systems if your canvases are of different sizes.

  • Certain selections such as sphere or convex polyhedron selections will operate on the visibility state of the default view.