Rough light direction controls

js/scene.js

@@ -26,15 +26,68 @@ Scene.showEdges = function(object) {
     */
 }
 
+Scene.changeLightDirection = function(x, y = -0.3, z = -0.7) {
+    ATON.setMainLightDirection(new THREE.Vector3(x, y, z));
+}
+
 /**
  * @param {String} id - The settings button id
  */
 Scene.toggleSettingsPanel = function(id) {
     const btn = document.querySelector(`#${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';
 
     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({
+            range: [-2, 2],
+            label: 'Asse X',
+            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);
+    });
 }
 
 Scene.init = function() {