Skeleton side panel and toolbar

This commit is contained in:
Nicolò P 2025-10-01 17:22:04 +02:00
parent ae85cf281c
commit dd18fdce3d
2 changed files with 21 additions and 2 deletions

View File

@ -51,7 +51,9 @@
</head> </head>
<body> <body>
<div id="toolbar" class="aton-toolbar-top"></div> <div id="toolbar" class="aton-toolbar-top">
<a class="btn aton-btn" id="settings">Settings</a>
</div>
<div class="aton-poweredby" > <div class="aton-poweredby" >
<a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a> <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>

View File

@ -10,7 +10,7 @@ const material = {
emissive: true, emissive: true,
}; };
function showEdges (object) { APP.showEdges = function(object) {
if (object.isMesh) { if (object.isMesh) {
let edges = new THREE.EdgesGeometry(child.geometry, 45); let edges = new THREE.EdgesGeometry(child.geometry, 45);
let line = new THREE.LineSegments(edges, edgeMaterial); 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 // You can require here flares (plugins) if needed by the app
//APP.requireFlares(["myFlare","anotherFlare"]); //APP.requireFlares(["myFlare","anotherFlare"]);
@ -28,6 +39,12 @@ APP.setup = ()=>{
// Realize base ATON and add base UI events // Realize base ATON and add base UI events
ATON.realize(); ATON.realize();
ATON.UI.addBasicEvents(); 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 // All assets for this app are stored here
ATON.setPathCollection('./assets/'); ATON.setPathCollection('./assets/');
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7)); ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));