Ambient occlusion and shadows switches

js/scene.js

@@ -1,7 +1,6 @@
 // Global ATON
 
-import { getSceneStatus } from "./state.js";
-import { setSceneStatus } from "./state.js";
+import { getSceneStatus, setSceneStatus } from "./state.js";
 
 const material = {
     color: "#fff",
@@ -28,14 +27,11 @@ Scene.showEdges = function(object) {
             console.log(child);
         }
     });
-    /*
-    rootUI.traverse(object => Scene.showEdges(object));
-    */
 }
 
 /**
  * 
- * @param {{x,y,z}} vector
+ * @param {{x,y,z}} vector - An object with x,y,z coordinates
  */
 Scene.changeLightDirection = function(vector) {
     ATON.setMainLightDirection(new THREE.Vector3(vector.x, vector.y, vector.z));
@@ -57,10 +53,11 @@ Scene.toggleAmbientOcclusion = function(isEnabled) {
  * @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: 0,
+        value: Number.parseFloat(currentVal).toPrecision(1),
         oninput: val => {
             const lightDir = ATON.getMainLightDirection();
             // Keep existing direction values for the other axes
@@ -117,6 +114,19 @@ Scene.toggleSettingsPanel = function(id) {
 
         ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
         ATON.UI.elSidePanel.appendChild(shadowsSwitch);
+        // TODO: move somewhere else...
+        document.querySelector('#aoSwitch').addEventListener(
+            'change',
+            event => {
+                this.toggleAmbientOcclusion(event.target.checked);
+            }
+        );
+        document.querySelector('#shadowsSwitch').addEventListener(
+            'change',
+            event => {
+                ATON.toggleShadows(event.target.checked);
+            }
+        );
     });
 }