WIP: first reworking based on requirements

NOTE: node loading logic not working yet!

.gitignore

@@ -7,3 +7,4 @@
 *.obj
 
 vendor/
+.vscode

config.js

@@ -1,3 +1,5 @@
+const BASE_URI = "/a/scaenae";
+
 const theater1Popup = `
     <div class="text-center">
         <h1 class="fs-4">Teatro San Salvador, Venezia</h1>
@@ -12,42 +14,151 @@ const theater2Popup = `
     </div>
 `;
 
-const audioBtn1 = `
-    <button type="button" class="text-left btn aton-btn fs-6 mx-2" data-bs-toggle="modal" data-bs-target="#audio1">
-        <i class="bi bi-play-btn me-2"></i> Esempio audio (<em>Che fiero costume</em>)
-    </button>
-`;
-
 export const config = {
     scene : {
         initialExposure: 0.7,
-        autoLP: true,
+        autoLP: false,
     },
     menu : {
-        audioBtn1
+        //audioBtn1
     },
     markers : [
         {
             id : "salvador",
             label : "Teatro San Salvador, Venezia",
+            uri : `${BASE_URI}/scenes/salvador/`,
             popup: theater1Popup,
             coords: [45.4363, 12.3352],
+            nodes: [
+                {
+                    label: 'Teatro',
                     model: "teatro_san_salvador_20250926.gltf",
-            pano: "pano/defsky-grass.jpg",
+                    isMain: true,
+                },
+            ],
+            pano: `pano/defsky-grass.jpg`,
         },
         {
             id : "ssgp",
             label : "Teatro Santi Giovanni e Paolo, Venezia",
+            uri : `${BASE_URI}/scenes/ssgp/`,
             popup: theater2Popup,
             coords: [45.4401, 12.3408],
-            model: "SSGP.glb",
+            nodes: {
-            pano: "pano/defsky-grass.jpg",
+                groups: [
+                    {
+                        label: 'Teatro',
+                        layers: [
+                            {
+                                label: 'Struttura complessiva',
+                                model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
+                                //isMain: true,
+                            },
+                            {
+                                label: 'Involucro',
+                                model: 'models/ssgp/Teatro_SSGP_Layer_Struttura_parete_di_fondo.glb',
+                                isMain: true,
+                                opacity: 0.2,
+                            },
+                        ]
+                    },
+                    {
+                        label: 'Sala / Auditorium',
+                        layers: [
+                            {
+                                label: 'Peplano / Platea',
+                                model: 'models/ssgp/Teatro_SSGP_Platea_peplano.glb',
+                            },
+                            {
+                                label: 'Ordine 1',
+                                model: 'models/ssgp/Teatro_SSGP_Ordine1.glb',
+                            },
+                            {
+                                label: 'Ordine 2',
+                                model: 'models/ssgp/Teatro_SSGP_Ordine2.glb',
+                            },
+                            {
+                                label: 'Ordine 3',
+                                model: 'models/ssgp/Teatro_SSGP_Ordine3.glb',
+                            },
+                            {
+                                label: 'Ordine 4',
+                                model: 'models/ssgp/Teatro_SSGP_Ordine4.glb',
+                            },
+                            {
+                                label: 'Ordine 5',
+                                model: 'models/ssgp/Teatro_SSGP_Ordine5.glb',
+                            },
+                            {
+                                label: 'Parapetto',
+                                model: 'models/ssgp/Teatro_SSGP_parapetto_scala_piani.glb',
+                            },
+                            {
+                                label: 'Percorsi pubblico',
+                                model: 'models/ssgp/Teatro_SSGP_Percorsi_scale_corridoi.glb',
+                            },
+                        ]
+                    },
+                    {
+                        label: 'Scena',
+                        layers: [
+                            {
+                                label: 'Palcoscenico',
+                                model: 'models/ssgp/Teatro_SSGP_Palcoscenico.glb',
+                            },
+                            {
+                                label: 'Boccascena / Proscenio',
+                                model: 'models/ssgp/Teatro_SSGP_Boccascena.glb',
+                            },
+                            {
+                                label: 'Quinte architettoniche fisse',
+                                model: 'models/ssgp/Teatro_SSGP_Layer_quinte_architettoniche_fisse.glb',
+                            },
+                            {
+                                label: 'Quinte architettoniche mobili',
+                                model: 'models/ssgp/Teatro_SSGP_Layer_quinte_architettoniche_mobili.glb',
+                            },
+                        ]
+                    },
+                    {
+                        label: 'Spazi tecnici',
+                        layers: [
+                            {
+                                label: 'Spazio tecnico superiore',
+                                model: 'models/ssgp/Teatro_SSGP_Layer_Spazio_tecnico_sup_soffitta.glb',
+                            },
+                            {
+                                label: 'Graticcia',
+                                model: 'models/ssgp/Teatro_SSGP_Graticcia.glb',
+                            },
+                            {
+                                label: 'Ballatoio',
+                                model: 'models/ssgp/Teatro_SSGP_Ballatoio.glb',
+                            },
+                            {
+                                label: 'Spazio tecnico inferiore',
+                                model: 'models/ssgp/Teatro_SSGP_Spazio_tecnico_inf.glb',
+                            },
+                        ]
+                    },
+                    {
+                        label: 'Orchestra',
+                        layers: [
+                            {
+                                label: 'Fossa orchestra',
+                                model: 'models/ssgp/Teatro_SSGP_Fossa_orchestra.glb',
+                            },
+                        ]
+                    }
+                ],
+            },
+            pano: `pano/gradient.jpg`,
         }
     ],
     map : {
-        center: [43.570833, 12.140278],
+        center: [45.30833, 12.240278],
-        initialZoom : 8,
+        initialZoom : 12,
         minZoom : 6,
-        maxZoom : 16
+        maxZoom : 18
     }
 }

css/app.css

@@ -0,0 +1,26 @@
+body {
+    height: 100vh;
+}
+.c-hand {
+    cursor: pointer;
+}
+input[type="checkbox"] {
+    cursor: pointer;
+}
+#clipper-bar .btn {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 80%;
+}
+#map {
+    height: 100%;
+}
+#clipX {
+    background-image: url('/a/scaenae/assets/icons/section_x.png');
+}
+#clipY {
+    background-image: url('/a/scaenae/assets/icons/section_y.png');
+}
+#clipZ {
+    background-image: url('/a/scaenae/assets/icons/section_z.png');
+}

index.html

@@ -27,10 +27,10 @@
 	<link rel="manifest" href="app.webmanifest">
 
 	<!-- Web-app ID -->
-	<meta name="aton:appid" content="app_template">
+	<meta name="aton:appid" content="scaenae">
 
 	<meta name="title" content="SCAENE">
-	<meta name="description" content="__APPDESC__">
+	<meta name="description" content="Web App 3D per il progetto PRINN 'SCAENAE'">
 
     <!-- Add meta theme-color -->
     <meta name="theme-color" content="#000000" />
@@ -39,6 +39,7 @@
     <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
     <link rel="stylesheet" type="text/css" href="/res/css/main.css">
+    <link rel="stylesheet" type="text/css" href="./css/app.css">
     <link rel="stylesheet" href="./vendor/leaflet/dist/leaflet.css">
 
     <!-- Vendors -->
@@ -51,97 +52,8 @@
 
 	<!-- Main js entry -->
 	<script type="module" src="js/main.js"></script>
-
-    <style>
-        body {
-            height: 100vh;
-        }
-        .c-hand {
-            cursor: pointer;
-        }
-        input[type="checkbox"] {
-            cursor: pointer;
-        }
-        #clipper-bar .btn {
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: 80%;
-        }
-        #clipX {
-            background-image: url('assets/icons/section_x.png');
-        }
-        #clipY {
-            background-image: url('assets/icons/section_y.png');
-        }
-        #clipZ {
-            background-image: url('assets/icons/section_z.png');
-        }
-    </style>
 </head>
 
 <body data-bs-theme="light">
-    <div class="map" id="map" style="height: 100%;"></div>
+    <div class="map" id="map"></div>
-    <div class="d-none" id="scene">
-        <div id="toolbar" class="aton-toolbar-top w-100">
-            <a class="btn aton-btn fs-5" id="back" title="Torna alla mappa">
-                <i class="bi bi-map-fill"></i>
-            </a>
-            <a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
-                <i class="bi bi-gear-fill"></i>
-            </a>
-            <a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
-                <i class="bi bi-scissors"></i>
-            </a>
-            <div class="d-none w-25
-                position-absolute
-                top-0 start-50
-                translate-middle bg-light
-                px-4 pt-2 pb-2 bg-opacity-50
-                rounded-bottom-3
-                mt-4 text-dark text-center"
-            id="clipper-bar">
-                <span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
-                <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" title="Sezione X"></button>
-                <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY" title="Sezione Y"></button>
-                <button class="btn aton-btn d-inline px-4 py-4" id="clipZ" title="Sezione Z"></button>
-            </div>
-            <a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
-                <i class="bi bi-list"></i>
-            </a>
-        </div>
-
-
-        <!-- TODO CSS-only popover -->
-        <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
-
-        <div class="aton-poweredby" >
-            <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
-        </div>
-    </div>
-
-    <!-- Info / media modal -->
-    <div class="modal fade" id="audio1" tabindex="-1" aria-labelledby="audio1" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-        <div class="modal-header">
-            <h1 class="modal-title fs-4 text-center" id="exampleModalLabel">Che fiero costume</h1>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-            <h2 class="fs-5 font-bold text-center">Informazioni</h2>
-            <p class="mt-2">
-                L'aria "Che fiero costume" bla bla...
-            </p>
-            <p>
-                Lorem ipsum dolor...
-            </p>
-            <h2 class="fs-5 mt-4 text-center font-bold">Ascolta</h2>
-            <audio class="w-100 p-2 mt-1" src="./assets/bt_TracciaAudio_ Che fiero costume.mp3" controls></audio>
-        </div>
-        <div class="modal-footer">
-            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Chiudi</button>
-        </div>
-        </div>
-    </div>
-    </div>
 </body>

js/main.js

@@ -1,5 +1,4 @@
 import Map from "./map.js";
-import Scene from "./scene.js";
 /*
 	Main js entry for ATON web-app
 
@@ -7,31 +6,10 @@ import Scene from "./scene.js";
 // Realize our app
 let APP = ATON.App.realize();
 
-APP.UI = {};
-
-/**
- * 
- * @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
- */
-APP.UI.pauseAudio = function(triggerSelector) {
-    // What if more than one audio element is playing?
-    const audio = document.querySelector('audio');
-    document.querySelectorAll(triggerSelector).forEach(el => {
-        el.addEventListener('click', () => audio.pause());
-    });
-    document.querySelector('.modal').addEventListener('blur', () => {
-        audio.pause();
-    });
-}
-
-
 // APP.setup() is required for web-app initialization
 // You can place here UI setup (HTML), events handling, etc.
 APP.setup = ()=>{
     Map.init('map');
-    Scene.toggleScene('back');
-    APP.UI.pauseAudio('[data-bs-dismiss="modal"');
-    //APP.UI.showClipper('#clipper');
 };
 
 /* If you plan to use an update routine (executed continuously), you can place its logic here.

js/map.js

@@ -1,8 +1,7 @@
 // Global Leaflet and ATON
 
 import {config} from '../config.js';
-import Scene from './scene.js';
+import AppState from './state.js';
-import { AppState } from './state.js';
 
 const Map = {};
 
@@ -29,7 +28,7 @@ Map.init = function(mapContainerId) {
         const popup = this.domParser.parseFromString(marker.popup, 'text/html')
             .querySelector('div');
         popup.querySelector('button').onclick = () => {
-            Scene.openScene(marker);
+            this.goToScene(marker.uri);
             map.getContainer().classList.toggle('d-none');
         };
 
@@ -41,4 +40,12 @@ Map.init = function(mapContainerId) {
     AppState.map = map;
 }
 
+/**
+ * 
+ * @param {String} uri The scene's absolute URI (from config)
+ */
+Map.goToScene = function (uri) {
+    location.href = uri;
+}
+
 export default Map;

js/scene.js

@@ -1,103 +1,12 @@
 // Global ATON
 
-import { AppState, getSceneStatus, setSceneStatus, getCurrentScene, setCurrentScene } from "./state.js";
+import AppState from "./state.js";
 import { config } from "../config.js";
-
+import UI from "./ui.js";
-const material = {
-    color: "#fff",
-    //color: "#e6f2ff",
-    emissive: true,
-};
 
 const Scene = {};
 
-Scene.UI = {};
+Scene.UI = UI;
-
-Scene.UI.domParser = new DOMParser;
-
-/**
- * Resets the UI state (essentially hides the clipper toolbar if visible...)
- * @todo Other elements to reset?? Restore inital lighting conditions and viewpoint...
- */
-Scene.UI.reset = function() {
-    document.querySelector('#clipper-bar')?.classList.add('d-none');
-    document.querySelector('#clipper')?.classList.remove('border', 'border-2', 'border-white');
-}
-/**
- * @todo Get clipping button from state? Review logic!! 
- * @param {String} triggerSelector 
- * @param {String} targetSelector The selector for the target toolbar to be displayed
- */
-Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
-    const trigger = document.querySelector(triggerSelector);
-    const toolbar = document.querySelector(targetSelector);
-
-    if (!AppState.clipping.listenerAdded) {
-        trigger.addEventListener(
-            'click',
-            () => {
-                console.log('Clipping enabled?', AppState.clipping.enabled);
-
-                toolbar.classList.toggle('d-none');
-                const aoCurrentState = AppState.ambientOcclusion;
-                if (!AppState.clipping.enabled) {
-                    AppState.clipping.enabled = true;
-                    Scene.toggleAmbientOcclusion(false);
-
-                    const btns = toolbar.querySelectorAll('button');
-                    btns.forEach(btn => {
-                        btn.classList.remove('border', 'border-2', 'border-warning');
-                    });
-
-                    trigger.className += ' border border-2 border-white';
-                    toolbar.addEventListener('click', event => {
-                        console.log('Clipping target:', event.target);
-                        if (event.target.id === 'clipX') {
-                                // Clip along X...
-                                Scene.addClippingPlane('x', -1);
-                                // Export to function...
-                                event.target.classList.add('border', 'border-2', 'border-warning');
-                                btns.forEach(btn => {
-                                    if (btn.id !== event.target.id) {
-                                        btn.classList.remove('border', 'border-2', 'border-warning');
-                                    }
-                                });
-                        }
-                        else if (event.target.id === 'clipY') {
-                                // Clip along Y...
-                                Scene.addClippingPlane('y', -1);
-                                event.target.classList.add('border', 'border-2', 'border-warning');
-                                btns.forEach(btn => {
-                                    if (btn.id !== event.target.id) {
-                                        btn.classList.remove('border', 'border-2', 'border-warning');
-                                    }
-                                })
-                        }
-                        else if (event.target.id === 'clipZ') {
-                                // Clip along Z...
-                                Scene.addClippingPlane('z', 1);
-                                event.target.classList.add('border', 'border-2', 'border-warning');
-                                btns.forEach(btn => {
-                                    if (btn.id !== event.target.id) {
-                                        btn.classList.remove('border', 'border-2', 'border-warning');
-                                    }
-                                })
-                        }
-                    });
-                } else {
-                    AppState.clipping.enabled = false;
-                    ATON.disableClipPlanes();
-                    AppState.root.remove(AppState.clipping.helper);
-                    AppState.clipping.helper = null;
-                    let noBorder = trigger.className.replace(/ border.*$/g, '');
-                    trigger.className = noBorder;
-                    Scene.toggleAmbientOcclusion(aoCurrentState);
-                }
-            }
-        );
-        AppState.clipping.listenerAdded = true;
-    }
-}
 
 /**
  * @todo Experimental...
@@ -123,6 +32,7 @@ Scene.showEdges = function(object) {
  * and return it along with its center and size (bad?).
  * It only uses meshes to prevent "empty" nodes in the scene
  * from being included in the calculation.
+ * @todo Use ATON.Node.getBound()? [bounding sphere]
  */
 Scene.getRootBoundingBox = function() {
     const meshes = [];
@@ -145,20 +55,58 @@ Scene.getRootBoundingBox = function() {
 
 /**
  * 
- * @param {THREE.Vector3} rootBBoxSize - The size of the bounding box for the root object
+ * @param {THREE.Sphere} boundingSphere - The bounding sphere for the main node
  * @returns {THREE.Mesh}
  */
-Scene.createClippingPlaneMesh = function(rootBBoxSize) {
+Scene.createClippingPlaneMesh = function (boundingSphere) {
-    const averageDim = (Number(rootBBoxSize.x) + Number(rootBBoxSize.y) + Number(rootBBoxSize.z)) / 3;
+    const planeSize = boundingSphere.radius * 1.5;
-    const planeSize = averageDim * 1.2;
     const mesh = new THREE.Mesh(
         new THREE.PlaneGeometry(planeSize, planeSize),
-        new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.1, side: THREE.DoubleSide, transparent: true })
+        new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.05, side: THREE.DoubleSide, transparent: true })
     );
 
     return mesh;
 }
 
+/**
+ * 
+ * @param {THREE.Mesh} planeMesh 
+ * @param {THREE.ArrowHelper} arrowHelper 
+ * @param {String} axis 
+ */
+Scene.dragClipper = function(planeMesh, axis) {
+    const controls = new THREE.DragControls(
+        [planeMesh],
+        ATON.Nav._camera,
+        ATON._renderer.domElement,
+    ); 
+
+    const startPosition = new THREE.Vector3();
+    // Only move along the selected axis (exlude the others)
+    const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);
+
+    if (AppState.clipping.enabled && AppState.clipping.vector) {
+        controls.addEventListener('dragstart', function (event) {
+            startPosition.copy(event.object.position);
+            ATON.Nav.setUserControl(false);
+        });
+
+        controls.addEventListener('drag', function(event) {
+            const point = event.object.position;
+            Scene.updateClipper(AppState.clipping.vector, point);
+            for (const a of excludedAxes) {
+                event.object.position[a] = startPosition[a];
+            }
+        });
+
+        controls.addEventListener('dragend', function (event) {
+            ATON.Nav.setUserControl(true);
+        });
+
+        AppState.clipping.controls = controls;
+    }
+}
+
 /**
  * @param {String} axis - The axis along which the plane's normal should be directed,
  *                        one of 'x', 'y', 'z'
@@ -166,11 +114,9 @@ Scene.createClippingPlaneMesh = function(rootBBoxSize) {
  */
 Scene.addClippingPlane = function(axis, orientation = -1) {
     axis = axis.toLowerCase();
-    const bboxData = AppState.clipping.rootBoundingBox ?? this.getRootBoundingBox();
+    const bound = AppState.clipping.boundingSphere;
 
-    if (!bboxData) return;
+    if (!bound) return;
-
-    const defaultPoint = bboxData.center.clone();
 
     const vector = [
         axis === 'x' ? orientation : 0,
@@ -178,46 +124,51 @@ Scene.addClippingPlane = function(axis, orientation = -1) {
         axis === 'z' ? orientation : 0,
     ];
 
+    AppState.clipping.vector = vector;
+
     // First, add a default clipping plane
     // at a default point (calculated...)
-    Scene.activateClipper(vector, defaultPoint);
+    const defaultPoint = bound.center.clone();
-    console.log(vector, defaultPoint);
+    Scene.activateClipper(vector, axis, defaultPoint);
-
-    window.addEventListener('mousedown', event => {
-        // Activate clipping when left-clicking on the scene
-        if (AppState.clipping.enabled && event.buttons === 1) {
-            Scene.activateClipper(vector);
-        }
-    });
 }
 
 /**
  * @todo WIP!
  * Activate clipping plane
  * @param {Number[]} vector - The vector array to direct the plane
+ * @param {String} axis - The x,y,z axis
+ * @param {?THREE.Vector3} point - The queried scene point
  */
-Scene.activateClipper = function(vector, point = null) {
+Scene.activateClipper = function(vector, axis, point = null) {
-    point ??= ATON.getSceneQueriedPoint();
+    ATON.enableClipPlanes();
-    const bboxData = AppState.clipping.rootBoundingBox ?? this.getRootBoundingBox();
+    Scene.updateClipper(vector, point);
+    Scene.dragClipper(AppState.clipping.helper, axis);
+}
 
-    if (point) {
+/**
-        console.log('Queried point:', point);
+ * 
-
+ * @param {THREE.Vector3} vector 
-        // First remove any existing clipping planes
+ * @param {THREE.Vector3} point 
-        ATON.disableClipPlanes();
+ */
-        // Normal of the clipping plane along the Y axis facing down
+Scene.updateClipper = function(vector, point) {
+    // Useless guard...
+    if (vector) {
+        // Normal of the clipping plane along the axis facing down
         const normal = new THREE.Vector3(...vector).normalize();
-        //const constant = -normal.dot(point);
+        const plane = AppState.clipping.plane ?? ATON.addClipPlane(normal, point);
-        const plane = ATON.addClipPlane(normal, point);
         // Add a visible plane helper for the clipping plane
-        const visiblePlane = Scene.createClippingPlaneMesh(bboxData.size);
+        const visiblePlane = AppState.clipping.helper ?? Scene.createClippingPlaneMesh(AppState.clipping.boundingSphere);
-        visiblePlane.position.copy(point);
+
-        visiblePlane.lookAt(point.clone().add(normal));
+        if (!AppState.clipping.helper) {
-        // Remove any already visbile helper plane
-        if (AppState.clipping.helper !== null) AppState.root.remove(AppState.clipping.helper);
             AppState.root.add(visiblePlane);
             AppState.clipping.helper = visiblePlane;
-        console.log("I'm clipping, baby!");
+        } 
+
+        visiblePlane.position.copy(point);
+        visiblePlane.lookAt(point.clone().add(normal));
+
+        plane.setFromNormalAndCoplanarPoint(normal, point);
+        AppState.clipping.plane = plane;
     }
 }
 
@@ -238,232 +189,95 @@ Scene.toggleAmbientOcclusion = function(isEnabled) {
     console.log('Ambient occlusion', isEnabled ? 'ON' : 'OFF');
 }
 
-/**
- * 
- * @param {String} direction - The axis direction, one of 'x','y','z'
- * @param {String} label - The slider label
- * @param {Number[]} range - The slider's range
- * @param {Number} step - The slider's step
- */
-Scene.createLightSlider = function(direction, label, range, step) {
-    const currentVal = ATON.getMainLightDirection()[direction];
-    const lightSlider = ATON.UI.createSlider({
-        range,
-        label,
-        value: Number.parseFloat(currentVal).toPrecision(1),
-        oninput: val => {
-            const lightDir = ATON.getMainLightDirection();
-            // Keep existing direction values for the other axes
-            lightDir[direction] = Number.parseFloat(val);
-            this.changeLightDirection(lightDir);
-        },
-    });
-
-    lightSlider.classList.add('ms-4');
-    lightSlider.querySelector('input').step = step;
-
-    return lightSlider;
-}
-
-/**
- * Right-side main menu panel
- * @param {String} triggerId - The menu button id
- */
-Scene.toggleContentMenu = function(triggerId) {
-    const btn = document.querySelector(`#${triggerId}`);
-    const audio1 = this.UI.domParser.parseFromString(config.menu.audioBtn1, 'text/html')
-        .querySelector('button');
-
-    btn.addEventListener('click', () => {
-        ATON.UI.setSidePanelRight();
-        ATON.UI.showSidePanel({header: '<i class="bi bi-music-note-list me-1"></i> Contenuti'});
-        ATON.UI.elSidePanel.appendChild(audio1);
-    });
-}
-
-/**
- * A left side settings panel
- * @param {String} triggerId - The settings button id
- */
-Scene.toggleSettingsPanel = function(triggerId) {
-    const btn = document.querySelector(`#${triggerId}`);
-    const lightHeading = document.createElement('h2');
-    lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
-    lightHeading.innerHTML = '<i class="bi bi-lightbulb me-1"></i> Direzione luce';
-    const envHeading = document.createElement('h2');
-    envHeading.className = 'fs-5 ms-2 mb-3 mt-3';
-    envHeading.innerHTML = '<i class="bi bi-brightness-high me-1"></i> Ambiente';
-
-    btn.addEventListener('click', () => {
-        ATON.UI.setSidePanelLeft();
-        ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
-        ATON.UI.elSidePanel.appendChild(lightHeading);
-
-        const lightSliderX = this.createLightSlider('x', 'Asse X', [-2, 2], 0.1);
-        const lightSliderY = this.createLightSlider('y', 'Asse Y', [-2, 2], 0.1);
-        const lightSliderZ = this.createLightSlider('z', 'Asse Z', [-2, 2], 0.1);
-
-        ATON.UI.elSidePanel.appendChild(lightSliderX);
-        ATON.UI.elSidePanel.appendChild(lightSliderY);
-        ATON.UI.elSidePanel.appendChild(lightSliderZ);
-
-        ATON.UI.elSidePanel.appendChild(envHeading);
-
-        const ambientOcclSwitch = document.createElement('div');
-        ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
-        ambientOcclSwitch.innerHTML = `
-            <input class="form-check-input" type="checkbox" role="switch" id="aoSwitch" title="Abilita / disabilita ambient occlusion">
-            <label class="form-check-label" for="aoSwitch"><em>Ambient occlusion</em> <i class="bi bi-info-circle ms-2 c-hand"></i></label>
-        `;
-
-        const shadowsSwitch = document.createElement('div');
-        shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
-        shadowsSwitch.innerHTML = `
-            <input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" title="Abilita / disabilita ombre">
-            <label class="form-check-label" for="shadowsSwitch">Ombre <i class="bi bi-info-circle ms-2 c-hand" title=""></i></label>
-        `;
-
-        const lightProbeSwitch = document.createElement('div');
-        lightProbeSwitch.className = 'form-check form-switch ms-4 mt-2';
-        lightProbeSwitch.innerHTML = `
-            <input class="form-check-input" type="checkbox" role="switch" id="lpSwitch" title="Abilita / disabilita mappa HDRi">
-            <label class="form-check-label" for="lpSwitch">Mappa HDRi <em>(light probe)</em> <i class="bi bi-info-circle ms-2 c-hand"></i></label>
-        `;
-
-        shadowsSwitch.querySelector('input[type="checkbox"').checked = AppState.shadows;
-        ambientOcclSwitch.querySelector('input[type="checkbox"').checked = AppState.ambientOcclusion;
-        lightProbeSwitch.querySelector('input[type="checkbox"').checked = AppState.lightProbe;
-
-        ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
-        ATON.UI.elSidePanel.appendChild(shadowsSwitch);
-        ATON.UI.elSidePanel.appendChild(lightProbeSwitch);
-
-        // TODO: move somewhere else...
-        document.querySelector('#aoSwitch').addEventListener(
-            'change',
-            event => {
-                this.toggleAmbientOcclusion(event.target.checked);
-                AppState.ambientOcclusion = event.target.checked;
-            }
-        );
-        document.querySelector('#shadowsSwitch').addEventListener(
-            'change',
-            event => {
-                const checked = event.target.checked;
-                ATON.toggleShadows(checked);
-                AppState.shadows = checked;
-            }
-        );
-        // Not working properly?
-        document.querySelector('#lpSwitch').addEventListener(
-            'change',
-            event => {
-                const checked = event.target.checked;
-                ATON.setAutoLP(checked);
-                //if (!checked) ATON.clearLightProbes();
-                AppState.lightProbe = checked;
-                if (checked) ATON.updateLightProbes();
-                console.log('Light probe: ', checked);
-            }
-        );
-    });
-}
-
 Scene.init = function() {
     ATON.realize();
     ATON.UI.addBasicEvents();
     ATON.UI.init();
     // All assets for this app are stored here
-    ATON.setPathCollection('./assets/');
+    ATON.setPathCollection('/a/scaenae/assets/');
     // Initial light direction
     ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
     ATON.toggleShadows(true);
     ATON.setExposure(config.scene.initialExposure);
     // Open settings side panel when clicking on settings btn
-    Scene.toggleSettingsPanel('settings');
+    Scene.UI.toggleSettingsPanel('settings');
-    Scene.toggleContentMenu('menu');
+    Scene.UI.toggleContentMenu('menu');
 
+    AppState.camera = ATON.Nav._camera;
+    AppState.renderer = ATON._renderer;
+
+    ATON.Nav.setUserControl(true);
 }
 /**
- * @param {String} btnId - The back-to-map button id
+ * Reset clipping state after disabling from UI
+ * @todo DragControls errors!!
  */
-Scene.toggleScene = function(btnId) {
+Scene.resetClipping = function () {
-    const btn = document.querySelector(`#${btnId}`);
-    const scene = document.querySelector('#scene');
-
-    btn.addEventListener('click', () => {
-        const currentScene = getCurrentScene();
-        // Deactivate the current scene before toggling
-        setSceneStatus(currentScene.id, false);
-        scene.classList.toggle('d-none');
-        // Pause rendering the 3D scene to free resources (hopefully)
-        // when browsing the map
-        ATON.renderPause();
-        if (AppState.clipping.enabled) {
-            ATON.disableClipPlanes();
     AppState.clipping.enabled = false;
-            Scene.UI.reset();
+    ATON.disableClipPlanes();
+    AppState.clipping.controls.deactivate();
+    // Manually remove event listeners from DragControls!!
+    AppState.renderer.domElement.removeEventListener( 'pointermove', AppState.clipping.controls.onPointerMove );
+    AppState.renderer.domElement.removeEventListener( 'pointerdown', AppState.clipping.controls.onPointerDown );
+    AppState.renderer.domElement.removeEventListener( 'pointerup', AppState.clipping.controls.onPointerCancel );
+    AppState.renderer.domElement.removeEventListener( 'pointerleave', AppState.clipping.controls.onPointerCancel )
+    AppState.clipping.controls = null;
+    AppState.clipping.helper.removeFromParent();
     AppState.root.remove(AppState.clipping.helper);
     AppState.clipping.helper = null;
-        }
+    AppState.clipping.plane = null;
-        AppState.root.setRotation(AppState.initialRotation ?? new THREE.Vector3(0, 1.5, 0));
+    AppState.clipping.vector = null;
-
+    // Ensure nav controls are reactivated!
-        document.querySelector('#map').classList.toggle('d-none');
+    ATON.Nav.setUserControl(true);
-        AppState.map.invalidateSize();
-    });
 }
 /**
  * @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.UI.toggleClipperBar('#clipper', '#clipper-bar');
 
-    Scene.UI.toggleClipper('#clipper', '#clipper-bar');
+    // Load 3D models and create nodes
+    Scene.loadNodes(marker.nodes);
 
-    scene.classList.toggle('d-none');
-    ATON.renderResume();
-    // TODO: reset scene only if changing to a different model from the map
-    // set scene status to inactive, first get current scene id...
-    let currentScene = getCurrentScene();
-    if (currentScene && currentScene.id !== marker.id) {
-        AppState.root.removeChildren();
-        currentScene.current = false;
-    }
-
-    if (!AppState.scenes.find(s => s.id === marker.id)) {
-        const newScene = {id: marker.id, active: false, current: true};
-        AppState.scenes.push(newScene);
-    }
-
-    if (!getSceneStatus(marker.id)) {
-        // Set scene as active
-        setSceneStatus(marker.id, true);
-        // Load 3D model
-        let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
     ATON.setMainPanorama(marker.pano);
-        //mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
     // TODO: hardcoded...
-        mainNode.setRotation(0, 1.5, 0)
     AppState.initialRotation = new THREE.Vector3(0, 1.5, 0);
-        Scene.showEdges(mainNode);
+    //Scene.showEdges(mainNode);
-
-        mainNode.attachToRoot();
 
     ATON.setAutoLP(config.scene.autoLP);
     AppState.lightProbe = config.scene.autoLP;
     Scene.toggleAmbientOcclusion(true);
     AppState.ambientOcclusion = true;
-
     AppState.root = ATON.getRootScene();
-
-        // TODO: set the scene as current!!
-        setCurrentScene(marker.id);
 }
+
+/**
+ * 
+ * @param {Array} nodes 
+ */
+Scene.loadNodes = function (nodes) {
+    nodes.forEach(n => {
+        let node = ATON.createSceneNode(n.label);
+        node.load(n.model);
+        node.setRotation(0, 1.5, 0);
+
+        // Apply any transparency before attaching to scene
+        if (n.opacity) {
+            node.setMaterial(new THREE.MeshPhongMaterial({transparent: true, opacity: n.opacity, color: '#fff'}));
+        }
+
+        node.attachToRoot();
+
+        if (n.isMain) {
+            AppState.mainNodeId = n.label;
+            // ATON.Node.getBound() returns a THREE.Sphere object
+            AppState.clipping.boundingSphere = node.getBound();
+        }
+
+
+        AppState.nodes.push({id: n.label, active: true});
+    });
 }
 
 export default Scene;

js/state.js

@@ -1,52 +1,70 @@
-export const AppState = {
+/**
+ * @namespace AppState
+ */
+let AppState = {
+    // The Leaflet map object
+    map : null,
     // The root scene object
     root: null,
+    // {id: String, active: Boolean}
+    nodes: [],
+    mainNodeId: null,
+    currentScene: null,
+    sceneHasAudio: false,
+    layersMenuBuilt: false,
     initialRotation: null,
-    scenes : [],
+    camera: null,
+    renderer: null,
     ambientOcclusion : true,
     shadows : true,
     lightProbe : false,
-    map : null,
     clipping : {
         enabled: false,
+        plane : null,
+        controls: null,
+        onDrag: null,
         helper : null,
-        rootBoundingBox: null,
+        arrow : null,
-        listenerAdded: false,
+        boundingSphere: null,
-    }
+        listeners: {
-}
+            button: false,
-
+            plane: false,
-/**
+        },
- * @todo Buggyyyyy!!!!
+        vector: null,
- * @param {String} id 
+    },
- * @returns {Boolean}
- */
-export function getSceneStatus(id) {
-    return AppState.scenes.find(s => s.id === id).active;
-}
-
-/**
- * @todo Buggyyyyy!!!!
- * @param {String} id 
- * @param {Boolean} status 
- * @returns {Boolean}
- */
-export function setSceneStatus(id, status) {
-    AppState.scenes.find(s => s.id === id).active = status;
-}
-
-export function getCurrentScene() {
-    return AppState.scenes.find(s => s.current);
-}
-
     /**
+     * Reset the overall app state
+     * to default values but keep map
      * 
- * @param {String} id The scene's id
+     * @param {L.Map} map - The Leaflet map object
- * @returns 
      */
-export function setCurrentScene(id) {
+    resetSceneState(map) {
-    // First set the correct status for the other scenes
+        AppState = {
-    let otherScenes = AppState.scenes.filter(s => s.id !== id);
+            root: null,
-    otherScenes.forEach(scene => scene.current = false)
+            mainNodeId: null,
-        
+            initialRotation: null,
-    AppState.scenes.find(s => s.id === id).current = true;
+            camera: null,
+            renderer: null,
+            ambientOcclusion : true,
+            shadows : true,
+            lightProbe : false,
+            map,
+            clipping : {
+                enabled: false,
+                plane : null,
+                controls: null,
+                onDrag: null,
+                helper : null,
+                arrow : null,
+                boundingSphere: null,
+                listeners: {
+                    button: false,
+                    plane: false,
+                },
+                vector: null,
             }
+        }
+    }
+}
+
+export default AppState;

js/ui.js

@@ -0,0 +1,269 @@
+import { config } from "../config.js";
+import Scene from "./scene.js";
+import AppState from "./state.js";
+/**
+ * @namespace UI
+ */
+const UI = {};
+
+UI.domParser = new DOMParser;
+
+UI.contentMenuTabs = `
+<!-- Nav tabs -->
+    <ul class="nav nav-pills" id="content-tabs" role="tablist">
+        <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="false">
+                <i class="bi bi-boxes me-1"></i> Elementi 3D
+            </button>
+        </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="true">
+                <i class="bi bi-diagram-3 me-1"></i> Contenuti
+            </button>
+        </li>
+    </ul>
+
+    <!-- Tab panes -->
+    <div class="tab-content">
+        <div class="tab-pane active p-3" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
+        <div class="tab-pane p-3" id="media" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
+    </div>
+`;
+
+UI.audioExample = `
+    <button type="button" id="audio-example" class="text-left btn aton-btn fs-6 mx-2" data-bs-toggle="modal" data-bs-target="#audio1">
+        <i class="bi bi-play-btn me-2"></i> Esempio audio (<em>Che fiero costume</em>)
+    </button>
+`;
+
+/**
+ * 
+ * @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
+ */
+UI.pauseAudio = function(triggerSelector) {
+    // What if more than one audio element is playing?
+    const audio = document.querySelector('audio');
+
+    if (audio) {
+        document.querySelectorAll(triggerSelector).forEach(el => {
+            el.addEventListener('click', () => audio.pause());
+        });
+        document.querySelector('.modal').addEventListener('blur', () => {
+            audio.pause();
+        });
+    }
+}
+/**
+ * Resets the UI state (essentially hides the clipper toolbar if visible...)
+ * @todo Other elements to reset?? Restore inital lighting conditions and viewpoint...
+ */
+UI.reset = function() {
+    document.querySelector('#clipper-bar')?.classList.add('d-none');
+    document.querySelector('#clipper')?.classList.remove('border', 'border-2', 'border-white');
+}
+
+/**
+ * 
+ * @param {HTMLElement} target 
+ * @param {NodeListOf<HTMLButtonElement>} btns 
+ * @param {String} axis - One of 'x', 'y', 'z'
+ */
+UI.showClipping = function(target, btns, axis) {
+    if (axis) {
+        Scene.addClippingPlane(axis, -1);
+        target.classList.add('border', 'border-2', 'border-warning');
+        btns.forEach(btn => {
+            if (btn.id !== target.id) {
+                btn.classList.remove('border', 'border-2', 'border-warning');
+            }
+        });
+    }
+}
+/**
+ * @todo Get clipping button from state? Review logic!! 
+ * @param {String} triggerSelector 
+ * @param {String} targetSelector The selector for the target toolbar to be displayed
+ */
+UI.toggleClipperBar = function(triggerSelector, targetSelector) {
+    const trigger = document.querySelector(triggerSelector);
+    const toolbar = document.querySelector(targetSelector);
+    const btns = toolbar.querySelectorAll('button');
+    const clipTargets = {
+        clipX: {axis: 'x'},
+        clipY: {axis: 'y'},
+        clipZ: {axis: 'z'},
+    };
+
+    if (!AppState.clipping.listeners.button) {
+        trigger.addEventListener(
+            'click',
+            () => {
+                toolbar.classList.toggle('d-none');
+                const aoCurrentState = AppState.ambientOcclusion;
+
+                if (!toolbar.classList.contains('d-none')) {
+                    AppState.clipping.enabled = true;
+                    Scene.toggleAmbientOcclusion(false);
+
+                    btns.forEach(btn => {
+                        btn.classList.remove('border', 'border-2', 'border-warning');
+                    });
+
+                    trigger.className += ' border border-2 border-white';
+                    toolbar.addEventListener('click', event => {
+                        UI.showClipping(event.target, btns, clipTargets[event.target.id]?.axis);
+                    });
+                } else {
+                    Scene.resetClipping();
+                    let noBorder = trigger.className.replace(/ border.*$/g, '');
+                    trigger.className = noBorder;
+                    Scene.toggleAmbientOcclusion(aoCurrentState);
+                }
+            }
+        );
+        AppState.clipping.listeners.button = true;
+    }
+}
+/**
+ * A left side settings panel
+ * @param {String} triggerId - The settings button id
+ */
+UI.toggleSettingsPanel = function(triggerId) {
+    const btn = document.querySelector(`#${triggerId}`);
+    const lightHeading = document.createElement('h2');
+    lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
+    lightHeading.innerHTML = '<i class="bi bi-lightbulb me-1"></i> Direzione luce';
+    const envHeading = document.createElement('h2');
+    envHeading.className = 'fs-5 ms-2 mb-3 mt-3';
+    envHeading.innerHTML = '<i class="bi bi-brightness-high me-1"></i> Ambiente';
+
+    btn.addEventListener('click', () => {
+        ATON.UI.setSidePanelLeft();
+        ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
+        ATON.UI.elSidePanel.appendChild(lightHeading);
+
+        const lightSliderX = this.createLightSlider('x', 'Asse X', [-2, 2], 0.1);
+        const lightSliderY = this.createLightSlider('y', 'Asse Y', [-2, 2], 0.1);
+        const lightSliderZ = this.createLightSlider('z', 'Asse Z', [-2, 2], 0.1);
+
+        ATON.UI.elSidePanel.appendChild(lightSliderX);
+        ATON.UI.elSidePanel.appendChild(lightSliderY);
+        ATON.UI.elSidePanel.appendChild(lightSliderZ);
+
+        ATON.UI.elSidePanel.appendChild(envHeading);
+
+        const ambientOcclSwitch = document.createElement('div');
+        ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
+        ambientOcclSwitch.innerHTML = `
+            <input class="form-check-input" type="checkbox" role="switch" id="aoSwitch" title="Abilita / disabilita ambient occlusion">
+            <label class="form-check-label" for="aoSwitch"><em>Ambient occlusion</em> <i class="bi bi-info-circle ms-2 c-hand"></i></label>
+        `;
+
+        const shadowsSwitch = document.createElement('div');
+        shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
+        shadowsSwitch.innerHTML = `
+            <input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" title="Abilita / disabilita ombre">
+            <label class="form-check-label" for="shadowsSwitch">Ombre <i class="bi bi-info-circle ms-2 c-hand" title=""></i></label>
+        `;
+
+        shadowsSwitch.querySelector('input[type="checkbox"').checked = AppState.shadows;
+        ambientOcclSwitch.querySelector('input[type="checkbox"').checked = AppState.ambientOcclusion;
+
+        ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
+        ATON.UI.elSidePanel.appendChild(shadowsSwitch);
+
+        // TODO: move somewhere else...
+        document.querySelector('#aoSwitch').addEventListener(
+            'change',
+            event => {
+                Scene.toggleAmbientOcclusion(event.target.checked);
+                AppState.ambientOcclusion = event.target.checked;
+            }
+        );
+        document.querySelector('#shadowsSwitch').addEventListener(
+            'change',
+            event => {
+                const checked = event.target.checked;
+                ATON.toggleShadows(checked);
+                AppState.shadows = checked;
+            }
+        );
+    });
+}
+/**
+ * 
+ * @param {String} direction - The axis direction, one of 'x','y','z'
+ * @param {String} label - The slider label
+ * @param {Number[]} range - The slider's range
+ * @param {Number} step - The slider's step
+ */
+UI.createLightSlider = function(direction, label, range, step) {
+    const currentVal = ATON.getMainLightDirection()[direction];
+    const lightSlider = ATON.UI.createSlider({
+        range,
+        label,
+        value: Number.parseFloat(currentVal).toPrecision(1),
+        oninput: val => {
+            const lightDir = ATON.getMainLightDirection();
+            // Keep existing direction values for the other axes
+            lightDir[direction] = Number.parseFloat(val);
+            Scene.changeLightDirection(lightDir);
+        },
+    });
+
+    lightSlider.classList.add('ms-4');
+    lightSlider.querySelector('input').step = step;
+
+    return lightSlider;
+}
+/**
+ * Right-side main menu panel
+ * @param {String} triggerId - The menu button id
+ */
+UI.toggleContentMenu = function(triggerId) {
+    const btn = document.querySelector(`#${triggerId}`);
+
+    btn.addEventListener('click', () => {
+        ATON.UI.setSidePanelRight();
+        ATON.UI.showSidePanel({header: 'Menu'});
+        // Append tabs, then tab panes
+        const tabs = this.domParser.parseFromString(UI.contentMenuTabs, 'text/html');
+        ATON.UI.elSidePanel.appendChild(tabs.querySelector('#content-tabs'));
+        ATON.UI.elSidePanel.appendChild(tabs.querySelector('.tab-content'));
+        this.buildLayersMenu(AppState.nodes, ATON.UI.elSidePanel.querySelector('#layer'));
+    });
+}
+/**
+ * @todo Don't rebuild it every time the side panel is shown...
+ * @param {Array} nodes The scenes nodes (IDs and status)
+ * @param {HTMLElement} sidePanel ATON's side panel element
+ */
+UI.buildLayersMenu = function(nodes, sidePanel) {
+    for(let node of nodes) {
+        const checkboxStr = `
+            <div class="form-check form-switch ms-4 mt-2">
+                <input class="form-check-input" type="checkbox" ${node.active ? 'checked' : ''} role="switch" title="Mostra / nascondi layer">
+                <label class="form-check-label" for="aoSwitch">${node.id}</label>
+            </div>
+        `;
+
+        let element = this.domParser.parseFromString(checkboxStr, 'text/html');
+        element = element.querySelector('div.form-check');
+
+        sidePanel.appendChild(element);
+        // Will this ever work??
+        element.addEventListener('change', event => toggleNode(node.id, event.target.checked));
+    }
+
+    /**
+     * This is terrible...
+     * @param {String} id 
+     * @param {Boolean} status 
+     */
+    const toggleNode = (id, status) => {
+        ATON.getSceneNode(id).toggle(status);
+        AppState.nodes.find(n => n.id === id).active = status;
+    }
+}
+
+export default UI;

package.json

@@ -6,6 +6,7 @@
   "author": "Nicolò P. <nicolo.paraciani@cnr.it>",
   "license": "MIT",
   "dependencies": {
-    "leaflet": "^1.9.4"
+    "leaflet": "^1.9.4",
+    "three": "0.147"
   }
 }

scenes/salvador/index.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" href="../../appicon.png" sizes="512x512" type="image/png">
+
+    <!-- Add iOS meta tags and icons -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="SCAENE">
+    <link rel="apple-touch-icon" href="appicon.png">
+
+    <!-- OpenGraph tags -->
+    <meta property="og:title" content="SCAENE" />
+    <meta property="og:description" content="Web App 3D per il progetto PRIN 'SCAENAE'" />
+    <meta property="og:image" content="../../appicon.png" />
+	<meta property="og:image:secure_url" content="../../appicon.png" />
+	<meta property="og:image:type" content="image/png" />
+	<meta property="og:image:width" content="200" />
+	<meta property="og:image:height" content="200" />
+
+	<!-- Web-app ID -->
+	<meta name="aton:appid" content="app_scaenae">
+
+	<meta name="title" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
+	<meta name="description" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
+
+    <!-- Add meta theme-color -->
+    <meta name="theme-color" content="#000000" />
+
+    <title>SCAENE</title>
+    <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" type="text/css" href="/res/css/main.css">
+    <link rel="stylesheet" type="text/css" href="../../css/app.css">
+
+    <!-- Vendors -->
+    <script type="text/javascript" src="/vendors/vendors.min.js"></script>
+    <script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+    <script type="text/javascript" src="/dist/THREE.bundle.js"></script>
+    <script type="text/javascript" src="../../vendor/three/examples/js/controls/DragControls.js"></script>
+    <script type="text/javascript" src="/dist/ATON.min.js"></script>
+
+	<!-- Main js entry -->
+	<script type="module" src="./index.js"></script>
+</head>
+
+<body data-bs-theme="light">
+    <div id="toolbar" class="aton-toolbar-top w-100">
+        <a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
+            <i class="bi bi-map-fill"></i>
+        </a>
+        <a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
+            <i class="bi bi-gear-fill"></i>
+        </a>
+        <a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
+            <i class="bi bi-scissors"></i>
+        </a>
+        <div class="d-none w-25
+            position-absolute
+            top-0 start-50
+            translate-middle bg-light
+            px-4 pt-2 pb-2 bg-opacity-50
+            rounded-bottom-3
+            mt-4 text-dark text-center"
+        id="clipper-bar">
+            <span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
+            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" title="Sezione X"></button>
+            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY" title="Sezione Y"></button>
+            <button class="btn aton-btn d-inline px-4 py-4" id="clipZ" title="Sezione Z"></button>
+        </div>
+        <a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
+            <i class="bi bi-list"></i>
+        </a>
+    </div>
+
+    <!-- TODO CSS-only popover -->
+    <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
+
+    <div class="aton-poweredby" >
+        <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
+    </div>
+
+    <!-- Info / media modal -->
+    <div class="modal fade" id="audio1" tabindex="-1" aria-labelledby="audio1" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-4 text-center" id="exampleModalLabel">Che fiero costume</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <h2 class="fs-5 font-bold text-center">Informazioni</h2>
+                <p class="mt-2">
+                    L'aria "Che fiero costume" bla bla...
+                </p>
+                <p>
+                    Lorem ipsum dolor...
+                </p>
+                <h2 class="fs-5 mt-4 text-center font-bold">Ascolta</h2>
+                <audio class="w-100 p-2 mt-1" src="/a/scaenae/assets/bt_TracciaAudio_ Che fiero costume.mp3" controls></audio>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Chiudi</button>
+            </div>
+            </div>
+        </div>
+    </div>
+</body>

scenes/salvador/index.js

@@ -0,0 +1,9 @@
+import Scene from "../../js/scene.js";
+import { config } from "../../config.js";
+import AppState from "../../js/state.js";
+
+AppState.currentScene = 'salvador';
+AppState.sceneHasAudio = true;
+
+Scene.openScene(config.markers.find(m => m.id === 'salvador'));
+Scene.UI.pauseAudio('[data-bs-dismiss="modal"]');

scenes/ssgp/index.html

@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" href="../../appicon.png" sizes="512x512" type="image/png">
+
+    <!-- Add iOS meta tags and icons -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="SCAENE">
+    <link rel="apple-touch-icon" href="appicon.png">
+
+    <!-- OpenGraph tags -->
+    <meta property="og:title" content="SCAENE" />
+    <meta property="og:description" content="Web App 3D per il progetto PRIN 'SCAENAE'" />
+    <meta property="og:image" content="../../appicon.png" />
+	<meta property="og:image:secure_url" content="../../appicon.png" />
+	<meta property="og:image:type" content="image/png" />
+	<meta property="og:image:width" content="200" />
+	<meta property="og:image:height" content="200" />
+
+	<!-- Web-app ID -->
+	<meta name="aton:appid" content="app_scaenae">
+
+	<meta name="title" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
+	<meta name="description" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
+
+    <!-- Add meta theme-color -->
+    <meta name="theme-color" content="#000000" />
+
+    <title>SCAENE</title>
+    <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" type="text/css" href="/res/css/main.css">
+    <link rel="stylesheet" type="text/css" href="../../css/app.css">
+
+    <!-- Vendors -->
+    <script type="text/javascript" src="/vendors/vendors.min.js"></script>
+    <script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+    <script type="text/javascript" src="/dist/THREE.bundle.js"></script>
+    <script type="text/javascript" src="../../vendor/three/examples/js/controls/DragControls.js"></script>
+    <script type="text/javascript" src="/dist/ATON.min.js"></script>
+
+	<!-- Main js entry -->
+	<script type="module" src="./index.js"></script>
+</head>
+
+<body data-bs-theme="light">
+    <div id="toolbar" class="aton-toolbar-top w-100">
+        <a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
+            <i class="bi bi-map-fill"></i>
+        </a>
+        <a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
+            <i class="bi bi-gear-fill"></i>
+        </a>
+        <a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
+            <i class="bi bi-scissors"></i>
+        </a>
+        <div class="d-none w-25
+            position-absolute
+            top-0 start-50
+            translate-middle bg-light
+            px-4 pt-2 pb-2 bg-opacity-50
+            rounded-bottom-3
+            mt-4 text-dark text-center"
+        id="clipper-bar">
+            <span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
+            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" title="Sezione X"></button>
+            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY" title="Sezione Y"></button>
+            <button class="btn aton-btn d-inline px-4 py-4" id="clipZ" title="Sezione Z"></button>
+        </div>
+        <a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
+            <i class="bi bi-list"></i>
+        </a>
+    </div>
+
+
+    <!-- TODO CSS-only popover -->
+    <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
+
+    <div class="aton-poweredby" >
+        <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
+    </div>
+</body>

scenes/ssgp/index.js

@@ -0,0 +1,6 @@
+import Scene from "../../js/scene.js";
+import { config } from "../../config.js";
+import AppState from "../../js/state.js";
+
+AppState.currentScene = 'ssgp';
+Scene.openScene(config.markers.find(m => m.id === 'ssgp'));

yarn.lock

@@ -6,3 +6,8 @@ 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==
+
+three@0.147:
+  version "0.147.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.147.0.tgz#1974af9e8e0c1efb3a8561334d57c0b6c29a7951"
+  integrity sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw==