diff --git a/js/main.js b/js/main.js
index 3ec9b9b..abcea8d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,6 @@
+import Map from "./map.js";
/*
- Main js entry for template ATON web-app
+ Main js entry for ATON web-app
===============================================*/
// Realize our app
@@ -11,10 +12,13 @@ const material = {
};
APP.showEdges = function(object) {
+ const edgeMaterial = new THREE.MeshBasicMaterial({color: "#333"});
if (object.isMesh) {
- let edges = new THREE.EdgesGeometry(child.geometry, 45);
+ let edges = new THREE.EdgesGeometry(object.geometry, 45);
let line = new THREE.LineSegments(edges, edgeMaterial);
- child.add(line);
+ object.add(line);
+
+ console.log(object);
}
}
@@ -25,10 +29,24 @@ APP.toggleSettingsPanel = function(id) {
const btn = document.querySelector(`#${id}`);
btn.addEventListener('click', () => {
- ATON.UI.showSidePanel({header: 'Settings'});
+ 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"]);
@@ -44,13 +62,19 @@ APP.setup = ()=>{
// 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));
diff --git a/js/map.js b/js/map.js
new file mode 100644
index 0000000..837c793
--- /dev/null
+++ b/js/map.js
@@ -0,0 +1,24 @@
+// Global Leaflet
+const Map = {};
+
+Map.init = function(mapContainerId) {
+ let baseMap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxNativeZoom : 15,
+ maxZoom: 15,
+ attribution: '©
OpenStreetMap contributors'
+ });
+
+ // Mappa centrata su Roma...
+ let map = L.map(mapContainerId, {
+ //attributionControl: false,
+ minZoom: 5,
+ }).setView([41.9028, 12.4964], 6);
+
+ baseMap.addTo(map);
+
+ L.marker([45.4363, 12.3352]).addTo(map)
+ .bindPopup('Teatro San Salvador, Venezia')
+ .openPopup();
+}
+
+export default Map;
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..97407e0
--- /dev/null
+++ b/package.json
@@ -0,0 +1,11 @@
+{
+ "name": "scaenae",
+ "version": "1.0.0",
+ "description": "SCAENAE web app",
+ "main": "main.js",
+ "author": "Nicolò P.
",
+ "license": "MIT",
+ "dependencies": {
+ "leaflet": "^1.9.4"
+ }
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..9b202fc
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+leaflet@^1.9.4:
+ version "1.9.4"
+ resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
+ integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==