HOOPS Communicator Documentation

11. 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);
            });
        };
    }
    ;
};