Adding Additional Models

---

Summary

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

Concepts

• Creating model thumbnail UI elements
• 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. The idea is that we will create a file input element and listen for the onchange call when it is clicked. This will recognize a new file has been uploaded. We will then create the necessary thumbnail element, check if there is a model thumbnail image present, and set it in the thumbnail if found. We will then make the thumbnail clickable, and when clicked, it will call the modelLoad function we wrote earlier on each of our viewers.

This last section is being provided as a reference. In this section we will do the following:

• Create a file input element
• Add an onChange event handler to listen for a file selection
• Create a thumbnail element to represent the new file
• Check if these is a model thumbnail image present
• Add an onClick event handle to the thumbnail
• Load the model that the thumbnail represents

document.getElementById("open-model-button").onclick = () => {
    // Proxy to override the default behavior of file input type
    document.getElementById('file-input').click();
};
document.getElementById("file-input").onchange = (e) => {
    // Once a file has been selected by the user, use the file information to 
    // gather the associated relevant data like thumbnails
    let fileChoice = e.target.value;
    let fileName = fileChoice.replace(/^.*[\\\/]/, '');
    let modelThumbnail = document.createElement('a');
    let modelName = fileName.split(".", 1)[0];
    modelThumbnail.id = modelName;
    modelThumbnail.href = "";
    modelThumbnail.className = "model-thumb";
    modelThumbnail.setAttribute("model", modelName);
    let imgPath = "/data/thumbnails/" + modelName + ".png";
    // Check to see if the selected model has a corresponding thumbnail made
    fetch(imgPath)
        .then((resp) => {
        if (resp.ok) {
            let modelImg = document.createElement('img');
            modelImg.src = imgPath;
            modelThumbnail.appendChild(modelImg);
        }
        else {
            modelThumbnail.innerHTML = modelName;
            console.log("No Image for this Model was found.");
        }
    });
    document.getElementById("models-scroller").appendChild(modelThumbnail);
    // 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);
            });
        };
    }
    ;
};

top_level:1 tutorials:1