Clip along selected axis (WIP)

index.html

@@ -16,7 +16,7 @@
 
     <!-- OpenGraph tags -->
     <meta property="og:title" content="SCAENE" />
-    <meta property="og:description" content="__APPDESC__" />
+    <meta property="og:description" content="Web App 3D per il progetto PRINN 'SCAENAE'" />
     <meta property="og:image" content="appicon.png" />
 	<meta property="og:image:secure_url" content="appicon.png" />
 	<meta property="og:image:type" content="image/png" />
@@ -78,11 +78,24 @@
             <a class="btn aton-btn fs-5" id="clipper" title="Clipper">
                 <i class="bi bi-scissors"></i>
             </a>
+            <div class="d-none
+                position-absolute
+                top-0 start-50
+                translate-middle bg-light
+                px-4 pt-2 pb-2 bg-opacity-50
+                rounded-bottom-3
+                mt-4 text-center"
+            id="clipper-bar">
+                <button class="btn aton-btn d-inline" id="clipX">X</button>
+                <button class="btn aton-btn d-inline" id="clipY">Y</button>
+                <button class="btn aton-btn d-inline" id="clipZ">Z</button>
+            </div>
             <a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
                 <i class="bi bi-list"></i>
             </a>
         </div>
 
+
         <!-- TODO CSS-only popover -->
         <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
 

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();
     }