Loading additional models

This last section of code has 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. 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.

The following code is near the end of the init member function of Application.ts:

const thumbnailElements = document.getElementsByClassName("model-thumb");
for (let thumbnail of thumbnailElements) {
    let thumbnailElement = thumbnail as HTMLElement;
    thumbnailElement.onclick = (e) => {
        e.preventDefault();
        let elem = e.currentTarget! as HTMLElement;
        let modelToLoad = elem.getAttribute("model");
        // Load the model into the scene when clicked
        this.loadModel(modelToLoad!);
    };
}