Clip along selected axis (WIP)

js/scene.js

@@ -18,17 +18,35 @@ Scene.UI.domParser = new DOMParser;
 /**
  * @todo Get clipping button from state? Review logic!! 
  * @param {String} triggerSelector 
+ * @param {String} targetSelector The selector for the target toolbar to be displayed
  */
-Scene.UI.toggleClipper = function(triggerSelector) {
+Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
     const trigger = document.querySelector(triggerSelector);
+    const toolbar = document.querySelector(targetSelector);
     trigger.addEventListener(
         'click',
         () => {
+            toolbar.classList.toggle('d-none');
             const aoCurrentState = AppState.ambientOcclusion;
             if (!AppState.clipping.enabled) {
                 AppState.clipping.enabled = true;
                 trigger.className += ' border border-2 border-white';
                 Scene.toggleAmbientOcclusion(false);
+                toolbar.addEventListener('click', event => {
+                    console.log('Clipping target:', event.target);
+                    if (event.target.id === 'clipX') {
+                            // Clip along X...
+                            Scene.addClippingPlane('x', 1);
+                    }
+                    else if (event.target.id === 'clipY') {
+                            // Clip along Y...
+                            Scene.addClippingPlane('y', -1);
+                    }
+                    else if (event.target.id === 'clipZ') {
+                            // Clip along Z...
+                            Scene.addClippingPlane('z', 1);
+                    }
+                });
                 //Scene.activateClipper()
             } else {
                 AppState.clipping.enabled = false;
@@ -62,17 +80,39 @@ Scene.showEdges = function(object) {
     });
 }
 
+/**
+ * @param {String} axis - The axis along wich the plane's normal should be directed,
+ *                        one of 'x', 'y', 'z'
+ * @param {Number} orientation - Positive (1) or negative (-1) orientation on the axis
+ */
+Scene.addClippingPlane = function(axis, orientation = -1) {
+    axis = axis.toLowerCase();
+    // 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 vector = [
+                axis === 'x' ? orientation : 0,
+                axis === 'y' ? orientation : 0,
+                axis === 'z' ? orientation : 0,
+            ]
+            Scene.activateClipper(vector);
+        }
+    });
+}
+
 /**
  * @todo WIP!
  * Activate clipping plane
+ * @param {Number[]} vector - The vector array to direct the plane
  */
-Scene.activateClipper = function() {
+Scene.activateClipper = function(vector) {
     const point = ATON.getSceneQueriedPoint();
     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);
+        const plane = ATON.addClipPlane(new THREE.Vector3(...vector), point);
         // Add a visible plane helper for the clipping plane
         const helper = new THREE.PlaneHelper(plane, 24, 0xffff00);
         // Remove any already visbile helper plane
@@ -232,7 +272,6 @@ Scene.toggleSettingsPanel = function(triggerId) {
 }
 
 Scene.init = function() {
-    console.log("I'm initializing, baby!")
     ATON.realize();
     ATON.UI.addBasicEvents();
     ATON.UI.init();
@@ -246,13 +285,6 @@ Scene.init = function() {
     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) {
-            this.activateClipper();
-        }
-    });
 }
 /**
  * @param {String} id - The back-to-map button id
@@ -301,7 +333,7 @@ Scene.openScene = function(marker) {
         Scene.toggleAmbientOcclusion(true);
         AppState.ambientOcclusion = true;
 
-        Scene.UI.toggleClipper('#clipper');
+        Scene.UI.toggleClipper('#clipper', '#clipper-bar');
 
         AppState.root = ATON.getRootScene();
     }