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>
<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" >
<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,
};
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));