Reorganize side panel + scene state (WIP)

js/scene.js

@@ -1,7 +1,11 @@
 // Global ATON
 
+import { getSceneStatus } from "./state.js";
+import { setSceneStatus } from "./state.js";
+
 const material = {
-    color: "#e6f2ff",
+    color: "#fff",
+    //color: "#e6f2ff",
     emissive: true,
 };
 
@@ -12,22 +16,63 @@ const Scene = {};
  * @param {THREE.Object3D} object - A THREE Object3D instance
  */
 Scene.showEdges = function(object) {
-    const edgeMaterial = new THREE.MeshBasicMaterial({color: "#333"});
+    const edgeMaterial = new THREE.LineBasicMaterial( { color: 0x000000 } );
-    if (object.isMesh) {
-        let edges = new THREE.EdgesGeometry(object.geometry, 45);
-        let line = new THREE.LineSegments(edges, edgeMaterial);
-        object.add(line);
 
-        console.log(object);
+    object.traverse(function(child) {
-    }
+    
+        if (child.isMesh) {
+            let edges = new THREE.EdgesGeometry(child.geometry, 45);
+            let line = new THREE.LineSegments(edges, edgeMaterial);
+            child.add(line);
+        
+            console.log(child);
+        }
+    });
     /*
-    const rootUI = ATON.getRootUI();
+    rootUI.traverse(object => Scene.showEdges(object));
-    rootUI.traverse(object => APP.showEdges(object));
     */
 }
 
-Scene.changeLightDirection = function(x, y = -0.3, z = -0.7) {
+/**
-    ATON.setMainLightDirection(new THREE.Vector3(x, y, z));
+ * 
+ * @param {{x,y,z}} vector
+ */
+Scene.changeLightDirection = function(vector) {
+    ATON.setMainLightDirection(new THREE.Vector3(vector.x, vector.y, vector.z));
+}
+
+/**
+ * 
+ * @param {Boolean} isEnabled 
+ */
+Scene.toggleAmbientOcclusion = function(isEnabled) {
+    ATON.FX.togglePass(ATON.FX.PASS_AO, isEnabled);
+}
+
+/**
+ * 
+ * @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 lightSlider = ATON.UI.createSlider({
+        range,
+        label,
+        value: 0,
+        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;
 }
 
 /**
@@ -38,55 +83,40 @@ Scene.toggleSettingsPanel = function(id) {
     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.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
         ATON.UI.elSidePanel.appendChild(lightHeading);
 
-        const lightSliderX = ATON.UI.createSlider({
+        const lightSliderX = this.createLightSlider('x', 'Asse X', [-2, 2], 0.1);
-            range: [-2, 2],
+        const lightSliderY = this.createLightSlider('y', 'Asse Y', [-2, 2], 0.1);
-            label: 'Asse X',
+        const lightSliderZ = this.createLightSlider('z', 'Asse Z', [-2, 2], 0.1);
-            value: 0,
-            oninput: val => {
-                const lightDir = ATON.getMainLightDirection();
-                console.log(lightDir);
-                // Keep existing Y and Z direction values
-                this.changeLightDirection(val, lightDir.y, lightDir.z);
-            },
-        });
-        const lightSliderY = ATON.UI.createSlider({
-            range: [-2, 2],
-            label: 'Asse Y',
-            value: 0,
-            oninput: val => {
-                const lightDir = ATON.getMainLightDirection();
-                console.log(lightDir);
-                // Keep existing X and Z direction values
-                this.changeLightDirection(lightDir.x, val, lightDir.z);
-            },
-        });
-        const lightSliderZ = ATON.UI.createSlider({
-            range: [-2, 2],
-            label: 'Asse Z',
-            value: 0,
-            oninput: val => {
-                const lightDir = ATON.getMainLightDirection();
-                console.log(lightDir);
-                // Keep existing X and Y direction values
-                this.changeLightDirection(lightDir.x, lightDir.y, val);
-            },
-        });
 
-        lightSliderX.classList.add('ms-4');
-        lightSliderY.classList.add('ms-4');
-        lightSliderZ.classList.add('ms-4');
-        // Set step to 0.1 for the range input
-        lightSliderX.querySelector('input').step = 0.1;
-        lightSliderY.querySelector('input').step = 0.1;
-        lightSliderZ.querySelector('input').step = 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" checked title="Abilita / disabilita ambient occlusion">
+            <label class="form-check-label font-italic" for="aoSwitch">Ambient occlusion</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" checked title="Abilita / disabilita ombre">
+            <label class="form-check-label font-italic" for="shadowsSwitch">Ombre</label>
+        `;
+
+        ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
+        ATON.UI.elSidePanel.appendChild(shadowsSwitch);
     });
 }
 
@@ -102,7 +132,7 @@ Scene.init = function() {
     ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
 
     ATON.toggleShadows(true);
-    ATON.setExposure(1.3);
+    ATON.setExposure(0.8);
     // Open settings side panel when clicking on settings btn
     Scene.toggleSettingsPanel('settings');
 }
@@ -119,6 +149,7 @@ Scene.toggleScene = function(id) {
     });
 }
 /**
+ * @todo Load model, pano etc. only if scene hasn't been opened yet
  * @param {Object} marker - The marker object from config
  */
 Scene.openScene = function(marker) {
@@ -130,13 +161,23 @@ Scene.openScene = function(marker) {
     }
 
     scene.classList.toggle('d-none');
-	// Load 3D model
-	let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
-    ATON.setMainPanorama(marker.pano);
-    mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
-    mainNode.setRotation(0, 1.5, 0)
 
-    mainNode.attachToRoot();
+    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));
+        mainNode.setRotation(0, 1.5, 0)
+        Scene.showEdges(mainNode);
+
+        mainNode.attachToRoot();
+
+        ATON.setAutoLP(true);
+        Scene.toggleAmbientOcclusion(true);
+    }
+    //const rootUI = ATON.getRootUI();
 }
 
 export default Scene;

js/state.js

@@ -0,0 +1,27 @@
+export const AppState = {
+    scenes : [
+        {
+            id : "salvador",
+            active : false
+        }
+    ],
+}
+
+/**
+ * @todo Buggyyyyy!!!!
+ * @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) {
+    return AppState.scenes.find(s => s.id === id).active = status;
+}