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

@@ -84,11 +84,12 @@
                 translate-middle bg-light
                 px-4 pt-2 pb-2 bg-opacity-50
                 rounded-bottom-3
-                mt-4 text-center"
+                mt-4 text-dark 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>
+                <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>

js/scene.js

@@ -36,7 +36,7 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
                     console.log('Clipping target:', event.target);
                     if (event.target.id === 'clipX') {
                             // Clip along X...
-                            Scene.addClippingPlane('x', 1);
+                            Scene.addClippingPlane('x', -1);
                     }
                     else if (event.target.id === 'clipY') {
                             // Clip along Y...
@@ -47,7 +47,6 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
                             Scene.addClippingPlane('z', 1);
                     }
                 });
-                //Scene.activateClipper()
             } else {
                 AppState.clipping.enabled = false;
                 ATON.disableClipPlanes();
@@ -87,15 +86,23 @@ Scene.showEdges = function(object) {
  */
 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 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);
         }
     });
@@ -106,9 +113,12 @@ Scene.addClippingPlane = function(axis, orientation = -1) {
  * Activate clipping plane
  * @param {Number[]} vector - The vector array to direct the plane
  */
-Scene.activateClipper = function(vector) {
-    const point = ATON.getSceneQueriedPoint();
+Scene.activateClipper = function(vector, point = null) {
+    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