UI and config changes + tentative light probe switch

config.js

@@ -12,6 +12,10 @@ const audioBtn1 = `
 `;
 
 export const config = {
+    scene : {
+        initialExposure: 0.6,
+        autoLP: false,
+    },
     menu : {
         audioBtn1
     },
@@ -22,7 +26,7 @@ export const config = {
             popup: theater1Popup,
             coords: [45.4363, 12.3352],
             model: "teatro_san_salvador_20250926.gltf",
-            pano: "defsky-grass.jpg",
+            pano: "hemi-grey.jpg",
         }
     ],
     map : {

js/scene.js

@@ -15,6 +15,34 @@ Scene.UI = {};
 
 Scene.UI.domParser = new DOMParser;
 
+/**
+ * @todo Get clipping button from state? Review logic!! 
+ * @param {String} triggerSelector 
+ */
+Scene.UI.toggleClipper = function(triggerSelector) {
+    const trigger = document.querySelector(triggerSelector);
+    trigger.addEventListener(
+        'click',
+        () => {
+            const aoCurrentState = AppState.ambientOcclusion;
+            if (!AppState.clipping.enabled) {
+                AppState.clipping.enabled = true;
+                trigger.className += ' border border-2 border-white';
+                Scene.toggleAmbientOcclusion(false);
+                //Scene.activateClipper()
+            } 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);
+            }
+        }
+    );
+}
+
 /**
  * @todo Experimental...
  * @param {THREE.Object3D} object - A THREE Object3D instance
@@ -39,18 +67,20 @@ Scene.showEdges = function(object) {
  * Activate clipping plane
  */
 Scene.activateClipper = function() {
-    const geometry = new THREE.PlaneGeometry( 24, 24 );
+    const point = ATON.getSceneQueriedPoint();
-    const material = new THREE.MeshPhongMaterial({
+    if (point) {
-        color: 0xffffee,
+        // First remove any existing clipping planes
-        opacity: 0.5,
+        ATON.disableClipPlanes();
-        transparent: true,
+        // Normal of the clipping plane along the Y axis facing down
-    });
+        const plane = ATON.addClipPlane(new THREE.Vector3(0, -1, 0), point);
-    const plane = new THREE.Mesh( geometry, material );
+        // Add a visible plane helper for the clipping plane
-    const root = AppState.root;
+        const helper = new THREE.PlaneHelper(plane, 24, 0xffff00);
-    console.log(root, plane);
+        // Remove any already visbile helper plane
-    root.add(plane);
+        if (AppState.clipping.helper !== null) AppState.root.remove(AppState.clipping.helper);
-    AppState.clipping.enabled = true;
+        AppState.root.add(helper);
-    AppState.clipping.plane = plane;
+        AppState.clipping.helper = helper;
+        console.log("I'm clipping, baby!");
+    }
 }
 
 /**
@@ -155,11 +185,21 @@ Scene.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(
             'change',
@@ -176,35 +216,19 @@ Scene.toggleSettingsPanel = function(triggerId) {
                 AppState.shadows = checked;
             }
         );
-    });
+        // Not working properly?
-}
+        document.querySelector('#lpSwitch').addEventListener(
-
+            'change',
-/**
+            event => {
- * @todo Get clipping button from state? Review logic!! 
+                const checked = event.target.checked;
- * @param {String} triggerSelector 
+                ATON.setAutoLP(checked);
- */
+                //if (!checked) ATON.clearLightProbes();
-Scene.UI.toggleClipper = function(triggerSelector) {
+                AppState.lightProbe = checked;
-    const trigger = document.querySelector(triggerSelector);
+                if (checked) ATON.updateLightProbes();
-    trigger.addEventListener(
+                console.log('Light probe: ', checked);
-        'click',
-        () => {
-            const aoCurrentState = AppState.ambientOcclusion;
-            if (!AppState.clipping.enabled) {
-                AppState.clipping.enabled = true;
-                trigger.className += ' border border-2 border-white';
-                Scene.toggleAmbientOcclusion(false);
-                //Scene.activateClipper()
-            } 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);
             }
-        }
+        );
-    );
+    });
 }
 
 Scene.init = function() {
@@ -214,32 +238,19 @@ Scene.init = function() {
     ATON.UI.init();
     // All assets for this app are stored here
     ATON.setPathCollection('./assets/');
-    // Light direction should be dynamic / user-defined
+    // Initial light direction
     ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
-
     ATON.toggleShadows(true);
-    ATON.setExposure(0.8);
+    ATON.setExposure(config.scene.initialExposure);
     // Open settings side panel when clicking on settings btn
     Scene.toggleSettingsPanel('settings');
     Scene.toggleContentMenu('menu');
 
+    // TODO: move to dedicated function!!
     window.addEventListener('mousedown', event => {
         // Activate clipping when left-clicking on the scene
         if (AppState.clipping.enabled && event.buttons === 1) {
-            const point = ATON.getSceneQueriedPoint();
+            this.activateClipper();
-            if (point) {
-                // First remove any existing clipping planes
-                ATON.disableClipPlanes();
-                // Normal of the clipping plane along the Y axis facing down
-                const plane = ATON.addClipPlane(new THREE.Vector3(0, -1, 0), point);
-                // Add a visible plane helper for the clipping plane
-                const helper = new THREE.PlaneHelper(plane, 24, 0xffff00);
-                // Remove any already visbile helper plane
-                if (AppState.clipping.helper !== null) AppState.root.remove(AppState.clipping.helper);
-                AppState.root.add(helper);
-                AppState.clipping.helper = helper;
-                console.log("I'm clipping, baby!");
-            }
         }
     });
 }
@@ -285,7 +296,8 @@ Scene.openScene = function(marker) {
 
         mainNode.attachToRoot();
 
-        ATON.setAutoLP(true);
+        ATON.setAutoLP(config.scene.autoLP);
+        AppState.lightProbe = config.scene.autoLP;
         Scene.toggleAmbientOcclusion(true);
         AppState.ambientOcclusion = true;
 

js/state.js

@@ -9,6 +9,7 @@ export const AppState = {
     ],
     ambientOcclusion : true,
     shadows : true,
+    lightProbe : false,
     map : null,
     clipping : {
         enabled: false,