########################
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``:

.. code-block:: js

	// 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!
