- 
+
diff --git a/js/main.js b/js/main.js
index abcea8d..e0e8d90 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,4 +1,5 @@
import Map from "./map.js";
+import Scene from "./scene.js";
/*
Main js entry for ATON web-app
@@ -6,91 +7,14 @@ import Map from "./map.js";
// Realize our app
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: ' 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
//APP.requireFlares(["myFlare","anotherFlare"]);
// APP.setup() is required for web-app initialization
// You can place here UI setup (HTML), events handling, etc.
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');
- 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");
- });
+ Map.init('map');
+ Scene.toggleScene('back');
};
/* If you plan to use an update routine (executed continuously), you can place its logic here.
diff --git a/js/map.js b/js/map.js
index 837c793..bb5a8c4 100644
--- a/js/map.js
+++ b/js/map.js
@@ -1,24 +1,36 @@
-// Global Leaflet
+// Global Leaflet and ATON
+
+import {config} from '../config.js';
+import Scene from './scene.js';
+
const Map = {};
Map.init = function(mapContainerId) {
let baseMap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
- maxNativeZoom : 15,
- maxZoom: 15,
+ maxNativeZoom : config.map.maxZoom,
+ maxZoom: config.map.maxZoom,
attribution: '© OpenStreetMap contributors'
});
// Mappa centrata su Roma...
let map = L.map(mapContainerId, {
//attributionControl: false,
- minZoom: 5,
- }).setView([41.9028, 12.4964], 6);
+ minZoom: config.map.minZoom
+ }).setView(config.map.center, config.map.initialZoom);
baseMap.addTo(map);
- L.marker([45.4363, 12.3352]).addTo(map)
- .bindPopup('Teatro San Salvador, Venezia')
- .openPopup();
+ config.markers.forEach(marker => {
+ L.marker(marker.coords).addTo(map)
+ .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;
\ No newline at end of file
diff --git a/js/scene.js b/js/scene.js
new file mode 100644
index 0000000..619502e
--- /dev/null
+++ b/js/scene.js
@@ -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: ' 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;
\ No newline at end of file
+
+
+
+