11. Adding Additional Models

Summary

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

Concepts


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:

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