WIP: first reworking based on requirements

NOTE: node loading logic not working yet!

config.js

@@ -17,7 +17,7 @@ const theater2Popup = `
 export const config = {
     scene : {
         initialExposure: 0.7,
-        autoLP: true,
+        autoLP: false,
     },
     menu : {
         //audioBtn1
@@ -44,34 +44,30 @@ export const config = {
             uri : `${BASE_URI}/scenes/ssgp/`,
             popup: theater2Popup,
             coords: [45.4401, 12.3408],
-            nodes: [
+            nodes: {
-                /*
+                groups: [
                     {
-                    label: 'Struttura principale',
+                        label: 'Teatro',
+                        layers: [
+                            {
+                                label: 'Struttura complessiva',
                                 model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
-                    isMain: true,
+                                //isMain: true,
                             },
-                */
                             {
-                    label: 'Struttura parete di fondo',
+                                label: 'Involucro',
                                 model: 'models/ssgp/Teatro_SSGP_Layer_Struttura_parete_di_fondo.glb',
                                 isMain: true,
+                                opacity: 0.2,
+                            },
+                        ]
                     },
                     {
-                    label: 'Ballatoio',
+                        label: 'Sala / Auditorium',
-                    model: 'models/ssgp/Teatro_SSGP_Ballatoio.glb',
+                        layers: [
-                },
                             {
-                    label: 'Boccascena',
+                                label: 'Peplano / Platea',
-                    model: 'models/ssgp/Teatro_SSGP_Boccascena.glb',
+                                model: 'models/ssgp/Teatro_SSGP_Platea_peplano.glb',
-                },
-                {
-                    label: 'Fossa orchestra',
-                    model: 'models/ssgp/Teatro_SSGP_Fossa_orchestra.glb',
-                },
-                {
-                    label: 'Graticcia',
-                    model: 'models/ssgp/Teatro_SSGP_Graticcia.glb',
                             },
                             {
                                 label: 'Ordine 1',
@@ -93,21 +89,26 @@ export const config = {
                                 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: 'Parapetto scala piani',
+                                label: 'Boccascena / Proscenio',
-                    model: 'models/ssgp/Teatro_SSGP_parapetto_scala_piani.glb',
+                                model: 'models/ssgp/Teatro_SSGP_Boccascena.glb',
-                },
-                {
-                    label: 'Percorsi scale corridoi',
-                    model: 'models/ssgp/Teatro_SSGP_Percorsi_scale_corridoi.glb',
-                },
-                {
-                    label: 'Platea peplano',
-                    model: 'models/ssgp/Teatro_SSGP_Platea_peplano.glb',
                             },
                             {
                                 label: 'Quinte architettoniche fisse',
@@ -117,16 +118,41 @@ export const config = {
                                 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/defsky-grass.jpg`,
+            },
+            pano: `pano/gradient.jpg`,
         }
     ],
     map : {

js/scene.js

@@ -62,7 +62,7 @@ Scene.createClippingPlaneMesh = function (boundingSphere) {
     const planeSize = boundingSphere.radius * 1.5;
     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;
@@ -261,6 +261,12 @@ Scene.loadNodes = function (nodes) {
         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) {
@@ -269,6 +275,7 @@ Scene.loadNodes = function (nodes) {
             AppState.clipping.boundingSphere = node.getBound();
         }
 
+
         AppState.nodes.push({id: n.label, active: true});
     });
 }

js/ui.js

@@ -12,21 +12,21 @@ 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="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="true">
+            <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-music-note-list me-1"></i> Media
+                <i class="bi bi-boxes me-1"></i> Elementi 3D
             </button>
         </li>
         <li class="nav-item" role="presentation">
-            <button class="nav-link" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="false">
+            <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-stack me-1"></i> Layer
+                <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="media" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
+        <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="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>
 `;
 
@@ -166,20 +166,11 @@ UI.toggleSettingsPanel = function(triggerId) {
             <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(
@@ -197,18 +188,6 @@ UI.toggleSettingsPanel = function(triggerId) {
                 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);
-            }
-        );
     });
 }
 /**
@@ -246,19 +225,12 @@ UI.toggleContentMenu = function(triggerId) {
 
     btn.addEventListener('click', () => {
         ATON.UI.setSidePanelRight();
-        ATON.UI.showSidePanel({header: 'Contenuti'});
+        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'));
-
-        // This is just an example, at the moment... to be revised with config -> markers (scenes) -> menu
-        if (AppState.sceneHasAudio) {
-            let btn = this.domParser.parseFromString(UI.audioExample, 'text/html');
-            const audio = btn.querySelector('#audio-example');
-            ATON.UI.elSidePanel.querySelector('#media').appendChild(audio);
-        }
     });
 }
 /**