Adding additional models

Summary

In this chapter, we will provide code for you to load and add additional models to your scene.

Concepts

• Inserting models into the scene

---

This last section of code has quite little to do with HOOPS Communicator, so we will not delve too deeply, but it is provided for reference. Below the “Main Viewer” is the “Model Browser” section of thumbnails. Review index.html for implementation details. When a thumbnail is clicked a load model event will be triggered for that model. We will add functionality to our main class to initialize these onclick events.

Add the following code to the end of the setEventListeners() member function of main:

// Now update the event callbacks for the thumbnails
const thumbnailElements = document.getElementsByClassName("model-thumb");
for (let thumbnail of thumbnailElements) {
        let thumbnailElement = thumbnail;
        thumbnailElement.onclick = (e) => {
                e.preventDefault();
                let elem = e.currentTarget;
                let modelToLoad = elem.getAttribute("model");
                // Load the model into the scene when clicked
                this._viewerList.map((viewer) => {
                        this.loadModel(modelToLoad, viewer);
                });
        };
};

Test the new functionality by clicking “Auto-Arrange” then clicking the thumbnail in the “Model Browser” section. A new “microengine” model will be loaded into the application!