diff --git a/js/main.js b/js/main.js
index 02adf74..3ec9b9b 100644
--- a/js/main.js
+++ b/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));