Default clipping planes

config.js

@@ -15,6 +15,13 @@ export const config = {
     scene : {
         initialExposure: 0.6,
         autoLP: false,
+        clipping: {
+            defaultPoint: [
+                -20.3,
+                7.3,
+                -18.3
+            ],
+        }
     },
     menu : {
         audioBtn1

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,25 @@
             <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-dark text-center"
+            id="clipper-bar">
+                <span class="pt-4 pb-1 d-block fw-bold">Sezionamento</span>
+                <button class="btn aton-btn d-inline" id="clipX" title="Sezione X">X</button>
+                <button class="btn aton-btn d-inline" id="clipY" title="Sezione Y">Y</button>
+                <button class="btn aton-btn d-inline" id="clipZ" title="Sezione Z">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,18 +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);
-                //Scene.activateClipper()
+                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);
+                    }
+                });
             } else {
                 AppState.clipping.enabled = false;
                 ATON.disableClipPlanes();
@@ -62,17 +79,50 @@ 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();
+    const defaultPoint = new THREE.Vector3(
+        ...config.scene.clipping.defaultPoint
+    );
+    const vector = [
+        axis === 'x' ? orientation : 0,
+        axis === 'y' ? orientation : 0,
+        axis === 'z' ? orientation : 0,
+    ];
+
+    // First, add a default clipping plane
+    // at a predefined point (bad?)
+    Scene.activateClipper(vector, defaultPoint);
+    console.log(vector, defaultPoint);
+
+    window.addEventListener('mousedown', event => {
+        // Activate clipping when left-clicking on the scene
+        if (AppState.clipping.enabled && event.buttons === 1) {
+            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, point = null) {
-    const point = ATON.getSceneQueriedPoint();
+    point ??= ATON.getSceneQueriedPoint();
+
     if (point) {
+        console.log('Queried point:', 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 +282,6 @@ Scene.toggleSettingsPanel = function(triggerId) {
 }
 
 Scene.init = function() {
-    console.log("I'm initializing, baby!")
     ATON.realize();
     ATON.UI.addBasicEvents();
     ATON.UI.init();
@@ -246,13 +295,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 +343,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();
     }