Skeleton side panel and toolbar

js/main.js

@@ -10,7 +10,7 @@ const material = {
     emissive: true,
 };
 
-function showEdges (object) {
+APP.showEdges = function(object) {
     if (object.isMesh) {
         let edges = new THREE.EdgesGeometry(child.geometry, 45);
         let line = new THREE.LineSegments(edges, edgeMaterial);
@@ -18,6 +18,17 @@ function showEdges (object) {
     }
 }
 
+/**
+ * @param {String} id - The settings button id
+ */
+APP.toggleSettingsPanel = function(id) {
+    const btn = document.querySelector(`#${id}`);
+
+    btn.addEventListener('click', () => {
+        ATON.UI.showSidePanel({header: 'Settings'});
+    })
+}
+
 // You can require here flares (plugins) if needed by the app
 //APP.requireFlares(["myFlare","anotherFlare"]);
 
@@ -28,6 +39,12 @@ APP.setup = ()=>{
 	// Realize base ATON and add base UI events
     ATON.realize();
     ATON.UI.addBasicEvents();
+    ATON.UI.init();
+    ATON.UI.setSidePanelLeft();
+
+    // Open settings side panel when clicking on btn
+    APP.toggleSettingsPanel('settings');
+
     // All assets for this app are stored here
     ATON.setPathCollection('./assets/');
     ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));