nicolo/scaenae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Map / scene transition logic + config

Browse Source
This commit is contained in:
Nicolò P 2025-10-06 16:15:37 +02:00
parent 051a32195e
commit 8b01e7943a
5 changed files with 153 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
config.js Normal file
View File

@ -0,0 +1,25 @@
const theater1Popup = `
<div class="text-center">
<h1 class="fs-4">Teatro San Salvador, Venezia</h1>
<button type="button" class="btn btn-outline-dark" id="salvador">Apri scena 3D</button>
</div>
`;
export const config = {
markers : [
{
id : "salvador",
label : "Teatro San Salvador, Venezia",
popup: theater1Popup,
coords: [45.4363, 12.3352],
model: "teatro_san_salvador_20250926.gltf",
pano: "defsky-grass.jpg",
}
],
map : {
center: [41.9028, 12.4964],
initialZoom : 6,
minZoom : 5,
maxZoom : 15
}
}

24
index.html
View File

@ -54,17 +54,19 @@
</head> </head>
<body style="height: 100vh;"> <body style="height: 100vh;">
<div class="map d-none" id="map" style="height: 100%;"></div> <div class="map" id="map" style="height: 100%;"></div>
<div id="toolbar" class="aton-toolbar-top"> <div class="d-none" id="scene">
<a class="btn aton-btn fs-5" id="back" title="Torna alla mappa"> <div id="toolbar" class="aton-toolbar-top">
<i class="bi bi-map-fill"></i> <a class="btn aton-btn fs-5" id="back" title="Torna alla mappa">
</a> <i class="bi bi-map-fill"></i>
<a class="btn aton-btn fs-5" id="settings" title="Impostazioni"> </a>
<i class="bi bi-gear-fill"></i> <a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
</a> <i class="bi bi-gear-fill"></i>
</div> </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>
</div>
</div> </div>
</body> </body>

82
js/main.js
View File

@ -1,4 +1,5 @@
import Map from "./map.js"; import Map from "./map.js";
import Scene from "./scene.js";
/* /*
Main js entry for ATON web-app Main js entry for ATON web-app
@ -6,91 +7,14 @@ import Map from "./map.js";
// Realize our app // Realize our app
let APP = ATON.App.realize(); let APP = ATON.App.realize();
const material = {
color: "#e6f2ff",
emissive: true,
};
APP.showEdges = function(object) {
const edgeMaterial = new THREE.MeshBasicMaterial({color: "#333"});
if (object.isMesh) {
let edges = new THREE.EdgesGeometry(object.geometry, 45);
let line = new THREE.LineSegments(edges, edgeMaterial);
object.add(line);
console.log(object);
}
}
/**
* @param {String} id - The settings button id
*/
APP.toggleSettingsPanel = function(id) {
const btn = document.querySelector(`#${id}`);
btn.addEventListener('click', () => {
ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
})
}
/**
* @param {String} id - The back-to-map button id
*/
APP.toggleScene = function(id) {
const btn = document.querySelector(`#${id}`);
const scene = document.querySelector('canvas');
btn.addEventListener('click', () => {
scene.classList.toggle('d-none');
document.querySelector('#map').classList.toggle('d-none');
Map.init('map');
});
}
// 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"]);
// APP.setup() is required for web-app initialization // APP.setup() is required for web-app initialization
// You can place here UI setup (HTML), events handling, etc. // You can place here UI setup (HTML), events handling, etc.
APP.setup = ()=>{ APP.setup = ()=>{
Map.init('map');
// Realize base ATON and add base UI events Scene.toggleScene('back');
ATON.realize();
ATON.UI.addBasicEvents();
ATON.UI.init();
ATON.UI.setSidePanelLeft();
// Open settings side panel when clicking on btn
APP.toggleSettingsPanel('settings');
APP.toggleScene('back');
// All assets for this app are stored here
ATON.setPathCollection('./assets/');
// Light direction should be dynamic / user-defined
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
const rootUI = ATON.getRootUI();
rootUI.traverse(object => APP.showEdges(object));
// Load 3D model
let mainNode = ATON.createSceneNode("teatro").load("teatro_san_salvador_20250926.gltf");
// Panorama should be configurable and / or user-defined
const pano = "defsky-grass.jpg";
ATON.setMainPanorama(pano);
mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
mainNode.setRotation(0, 1.5, 0)
//showEdges(mainNode.children[0]);
mainNode.attachToRoot();
ATON.toggleShadows(true);
ATON.setExposure(1.3);
// If our app required ore or more flares (plugins), we can also wait for them to be ready for specific setups
ATON.on("AllFlaresReady",()=>{
// Do stuff
console.log("All flares ready");
});
}; };
/* If you plan to use an update routine (executed continuously), you can place its logic here. /* If you plan to use an update routine (executed continuously), you can place its logic here.

28
js/map.js
View File

@ -1,24 +1,36 @@
// Global Leaflet // Global Leaflet and ATON
import {config} from '../config.js';
import Scene from './scene.js';
const Map = {}; const Map = {};
Map.init = function(mapContainerId) { Map.init = function(mapContainerId) {
let baseMap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { let baseMap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxNativeZoom : 15, maxNativeZoom : config.map.maxZoom,
maxZoom: 15, maxZoom: config.map.maxZoom,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}); });
// Mappa centrata su Roma... // Mappa centrata su Roma...
let map = L.map(mapContainerId, { let map = L.map(mapContainerId, {
//attributionControl: false, //attributionControl: false,
minZoom: 5, minZoom: config.map.minZoom
}).setView([41.9028, 12.4964], 6); }).setView(config.map.center, config.map.initialZoom);
baseMap.addTo(map); baseMap.addTo(map);
L.marker([45.4363, 12.3352]).addTo(map) config.markers.forEach(marker => {
.bindPopup('Teatro San Salvador, Venezia') L.marker(marker.coords).addTo(map)
.openPopup(); .bindPopup(marker.popup)
.openPopup();
let btn = document.querySelector(`#${marker.id}`);
btn.addEventListener('click', () => {
Scene.openScene(marker);
map.getContainer().classList.toggle('d-none');
});
});
} }
export default Map; export default Map;

92
js/scene.js Normal file
View File

@ -0,0 +1,92 @@
// Global ATON
const material = {
color: "#e6f2ff",
emissive: true,
};
const Scene = {};
/**
* @todo Experimental...
* @param {THREE.Object3D} object - A THREE Object3D instance
*/
Scene.showEdges = function(object) {
const edgeMaterial = new THREE.MeshBasicMaterial({color: "#333"});
if (object.isMesh) {
let edges = new THREE.EdgesGeometry(object.geometry, 45);
let line = new THREE.LineSegments(edges, edgeMaterial);
object.add(line);
console.log(object);
}
/*
const rootUI = ATON.getRootUI();
rootUI.traverse(object => APP.showEdges(object));
*/
}
/**
* @param {String} id - The settings button id
*/
Scene.toggleSettingsPanel = function(id) {
const btn = document.querySelector(`#${id}`);
btn.addEventListener('click', () => {
ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
})
}
Scene.init = function() {
console.log("I'm initializing, baby!")
ATON.realize();
ATON.UI.addBasicEvents();
ATON.UI.init();
ATON.UI.setSidePanelLeft();
// All assets for this app are stored here
ATON.setPathCollection('./assets/');
// Light direction should be dynamic / user-defined
ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
ATON.toggleShadows(true);
ATON.setExposure(1.3);
// Open settings side panel when clicking on btn
Scene.toggleSettingsPanel('settings');
}
/**
* @param {String} id - The back-to-map button id
*/
Scene.toggleScene = function(id) {
const btn = document.querySelector(`#${id}`);
const scene = document.querySelector('#scene');
btn.addEventListener('click', () => {
scene.classList.toggle('d-none');
document.querySelector('#map').classList.toggle('d-none');
});
}
/**
* @todo This shoudn't be here...
* @param {Object} marker - The marker object from config
*/
Scene.openScene = function(marker) {
let canvas = document.querySelector('canvas');
let scene = document.querySelector('#scene');
if (canvas === null) {
Scene.init();
}
scene.classList.toggle('d-none');
console.log(marker.model);
// Load 3D model
let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
// Panorama should be configurable and / or user-defined
ATON.setMainPanorama(marker.pano);
mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
mainNode.setRotation(0, 1.5, 0)
//showEdges(mainNode.children[0]);
mainNode.attachToRoot();
}
export default Scene;