Better clipping plane activation logic...

js/scene.js

@@ -32,7 +32,8 @@ Scene.showEdges = function(object) {
 }
 
 /**
- * 
+ * @todo WIP!
+ * Activate clipping plane
  */
 Scene.activateClipper = function() {
     const geometry = new THREE.PlaneGeometry( 24, 24 );
@@ -42,9 +43,11 @@ Scene.activateClipper = function() {
         transparent: true,
     });
     const plane = new THREE.Mesh( geometry, material );
-    const root = ATON.getRootScene();
+    const root = AppState.root;
     console.log(root, plane);
     root.add(plane);
+    AppState.clipping.enabled = true;
+    AppState.clipping.plane = plane;
 }
 
 /**
@@ -155,10 +158,17 @@ Scene.toggleSettingsPanel = function(id) {
     });
 }
 
-Scene.UI.showClipper = function(triggerSelector) {
+Scene.UI.toggleClipper = function(triggerSelector) {
     document.querySelector(triggerSelector).addEventListener(
         'click',
-        () => Scene.activateClipper()
+        () => {
+            if (!AppState.clipping.enabled) {
+                Scene.activateClipper()
+            } else {
+                AppState.root.remove(AppState.clipping.plane);
+                AppState.clipping.enabled = false;
+            }
+        }
     );
 }
 
@@ -223,9 +233,10 @@ Scene.openScene = function(marker) {
         ATON.setAutoLP(true);
         Scene.toggleAmbientOcclusion(true);
 
-        Scene.UI.showClipper('#clipper');
+        Scene.UI.toggleClipper('#clipper');
+
+        AppState.root = ATON.getRootScene();
     }
-    //const rootUI = ATON.getRootUI();
 }
 
 export default Scene;

js/state.js

@@ -1,4 +1,6 @@
 export const AppState = {
+    // The root scene object
+    root: null,
     scenes : [
         {
             id : "salvador",
@@ -8,6 +10,10 @@ export const AppState = {
     ambientOcclusion : true,
     shadows : true,
     map : null,
+    clipping : {
+        enabled: false,
+        plane : null,
+    }
 }
 
 /**