From dd18fdce3dcb6f34d4dd583982333aa21047cd79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Wed, 1 Oct 2025 17:22:04 +0200 Subject: [PATCH] Skeleton side panel and toolbar --- index.html | 4 +++- js/main.js | 19 ++++++++++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 1210e52..846a524 100644 --- a/index.html +++ b/index.html @@ -51,7 +51,9 @@ -
+
+ Settings +
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));