Fix clipping state bug (partial)

TODO: refactor to avoid unnecessary object creation

index.html

@@ -46,6 +46,7 @@
     <script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
 
     <script type="text/javascript" src="/dist/THREE.bundle.js"></script>
+    <script type="text/javascript" src="./vendor/three/examples/js/controls/DragControls.js"></script>
     <script type="text/javascript" src="/dist/ATON.min.js"></script>
     <script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script>
 

js/scene.js

@@ -3,12 +3,6 @@
 import { AppState, getSceneStatus, setSceneStatus, getCurrentScene, setCurrentScene } from "./state.js";
 import { config } from "../config.js";
 
-const material = {
-    color: "#fff",
-    //color: "#e6f2ff",
-    emissive: true,
-};
-
 const Scene = {};
 
 Scene.UI = {};
@@ -32,16 +26,17 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
     const trigger = document.querySelector(triggerSelector);
     const toolbar = document.querySelector(targetSelector);
 
-    if (!AppState.clipping.listenerAdded) {
+    if (!AppState.clipping.listeners.button) {
         trigger.addEventListener(
             'click',
             () => {
-                console.log('Clipping enabled?', AppState.clipping.enabled);
-
                 toolbar.classList.toggle('d-none');
                 const aoCurrentState = AppState.ambientOcclusion;
                 if (!AppState.clipping.enabled) {
                     AppState.clipping.enabled = true;
+
+                    if (AppState.clipping.controls) AppState.clipping.controls.enabled = true;
+
                     Scene.toggleAmbientOcclusion(false);
 
                     const btns = toolbar.querySelectorAll('button');
@@ -64,7 +59,7 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
                                 });
                         }
                         else if (event.target.id === 'clipY') {
-                                // Clip along Y...
+                                // Clip along Y 
                                 Scene.addClippingPlane('y', -1);
                                 event.target.classList.add('border', 'border-2', 'border-warning');
                                 btns.forEach(btn => {
@@ -74,7 +69,7 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
                                 })
                         }
                         else if (event.target.id === 'clipZ') {
-                                // Clip along Z...
+                                // Clip along Z
                                 Scene.addClippingPlane('z', 1);
                                 event.target.classList.add('border', 'border-2', 'border-warning');
                                 btns.forEach(btn => {
@@ -87,15 +82,22 @@ Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
                 } else {
                     AppState.clipping.enabled = false;
                     ATON.disableClipPlanes();
+                    // Disable DragControls to avoid invoking events...
+                    if (AppState.clipping.controls) {
+                        AppState.clipping.controls.deactivate();
+                        AppState.clipping.controls.dispose();
+                        AppState.clipping.controls = null;
+                    }
                     AppState.root.remove(AppState.clipping.helper);
                     AppState.clipping.helper = null;
+                    AppState.clipping.plane = null;
                     let noBorder = trigger.className.replace(/ border.*$/g, '');
                     trigger.className = noBorder;
                     Scene.toggleAmbientOcclusion(aoCurrentState);
                 }
             }
         );
-        AppState.clipping.listenerAdded = true;
+        AppState.clipping.listeners.button = true;
     }
 }
 
@@ -123,6 +125,7 @@ Scene.showEdges = function(object) {
  * and return it along with its center and size (bad?).
  * It only uses meshes to prevent "empty" nodes in the scene
  * from being included in the calculation.
+ * @todo Use ATON.Node.getBound()? [bounding sphere]
  */
 Scene.getRootBoundingBox = function() {
     const meshes = [];
@@ -145,12 +148,11 @@ Scene.getRootBoundingBox = function() {
 
 /**
  * 
- * @param {THREE.Vector3} rootBBoxSize - The size of the bounding box for the root object
+ * @param {THREE.Sphere} boundingSphere - The bounding sphere for the main node
  * @returns {THREE.Mesh}
  */
-Scene.createClippingPlaneMesh = function(rootBBoxSize) {
-    const averageDim = (Number(rootBBoxSize.x) + Number(rootBBoxSize.y) + Number(rootBBoxSize.z)) / 3;
-    const planeSize = averageDim * 1.2;
+Scene.createClippingPlaneMesh = function (boundingSphere) {
+    const planeSize = boundingSphere.radius * 1.5;
     const mesh = new THREE.Mesh(
         new THREE.PlaneGeometry(planeSize, planeSize),
         new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.1, side: THREE.DoubleSide, transparent: true })
@@ -159,6 +161,42 @@ Scene.createClippingPlaneMesh = function(rootBBoxSize) {
     return mesh;
 }
 
+/**
+ * 
+ * @param {THREE.Mesh} planeMesh 
+ * @param {String} axis 
+ */
+Scene.dragClipper = function(planeMesh, axis) {
+    const controls = new THREE.DragControls(
+        [planeMesh],
+        AppState.camera,
+        AppState.renderer.domElement,
+    ); 
+
+    const startPosition = new THREE.Vector3();
+    // Only move along the selected axis (exlude the others)
+    const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);
+
+    controls.addEventListener('dragstart', function (event) {
+        startPosition.copy(event.object.position);
+        ATON.Nav.setUserControl(false);
+    });
+
+    controls.addEventListener('drag', function(event) {
+        const point = event.object.position;
+        Scene.updateClipper(AppState.clipping.vector, point);
+        for (const a of excludedAxes) {
+            event.object.position[a] = startPosition[a];
+        }
+    });
+
+    controls.addEventListener('dragend', function (event) {
+        ATON.Nav.setUserControl(true);
+    });
+
+    AppState.clipping.controls = controls;
+}
+
 /**
  * @param {String} axis - The axis along which the plane's normal should be directed,
  *                        one of 'x', 'y', 'z'
@@ -166,11 +204,9 @@ Scene.createClippingPlaneMesh = function(rootBBoxSize) {
  */
 Scene.addClippingPlane = function(axis, orientation = -1) {
     axis = axis.toLowerCase();
-    const bboxData = AppState.clipping.rootBoundingBox ?? this.getRootBoundingBox();
+    const bound = AppState.clipping.boundingSphere;
 
-    if (!bboxData) return;
-
-    const defaultPoint = bboxData.center.clone();
+    if (!bound) return;
 
     const vector = [
         axis === 'x' ? orientation : 0,
@@ -178,47 +214,48 @@ Scene.addClippingPlane = function(axis, orientation = -1) {
         axis === 'z' ? orientation : 0,
     ];
 
+    AppState.clipping.vector = vector;
+
     // First, add a default clipping plane
     // at a default point (calculated...)
-    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);
-        }
-    });
+    const defaultPoint = bound.center.clone();
+    Scene.activateClipper(vector, axis, defaultPoint);
 }
 
 /**
  * @todo WIP!
  * Activate clipping plane
  * @param {Number[]} vector - The vector array to direct the plane
+ * @param {String} axis - The x,y,z axis
+ * @param {?THREE.Vector3} point - The queried scene point
  */
-Scene.activateClipper = function(vector, point = null) {
-    point ??= ATON.getSceneQueriedPoint();
-    const bboxData = AppState.clipping.rootBoundingBox ?? this.getRootBoundingBox();
+Scene.activateClipper = function(vector, axis, point = null) {
+    Scene.updateClipper(vector, point);
+    Scene.dragClipper(AppState.clipping.helper, axis);
+}
 
-    if (point) {
-        console.log('Queried point:', point);
-
-        // First remove any existing clipping planes
-        ATON.disableClipPlanes();
+/**
+ * 
+ * @param {THREE.Vector3} vector 
+ * @param {THREE.Vector3} point 
+ */
+Scene.updateClipper = function(vector, point) {
     // Normal of the clipping plane along the Y axis facing down
     const normal = new THREE.Vector3(...vector).normalize();
-        //const constant = -normal.dot(point);
-        const plane = ATON.addClipPlane(normal, point);
+    const plane = AppState.clipping.plane ?? ATON.addClipPlane(normal, point);
     // Add a visible plane helper for the clipping plane
-        const visiblePlane = Scene.createClippingPlaneMesh(bboxData.size);
-        visiblePlane.position.copy(point);
-        visiblePlane.lookAt(point.clone().add(normal));
-        // Remove any already visbile helper plane
-        if (AppState.clipping.helper !== null) AppState.root.remove(AppState.clipping.helper);
+    const visiblePlane = AppState.clipping.helper ?? Scene.createClippingPlaneMesh(AppState.clipping.boundingSphere);
+
+    if (!AppState.clipping.helper) {
         AppState.root.add(visiblePlane);
         AppState.clipping.helper = visiblePlane;
-        console.log("I'm clipping, baby!");
     } 
+
+    visiblePlane.position.copy(point);
+    visiblePlane.lookAt(point.clone().add(normal));
+
+    plane.setFromNormalAndCoplanarPoint(normal, point);
+    AppState.clipping.plane = plane;
 }
 
 /**
@@ -383,6 +420,8 @@ Scene.init = function() {
     Scene.toggleSettingsPanel('settings');
     Scene.toggleContentMenu('menu');
 
+    AppState.camera = ATON.Nav._camera;
+    AppState.renderer = ATON._renderer;
 }
 /**
  * @param {String} btnId - The back-to-map button id
@@ -445,6 +484,8 @@ Scene.openScene = function(marker) {
         setSceneStatus(marker.id, true);
         // Load 3D model
         let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
+        // TODO: only for the main ('larger') node in the scene
+        AppState.mainNodeId = marker.label;
         ATON.setMainPanorama(marker.pano);
         //mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
         // TODO: hardcoded...
@@ -460,6 +501,8 @@ Scene.openScene = function(marker) {
         AppState.ambientOcclusion = true;
 
         AppState.root = ATON.getRootScene();
+        // ATON.Node.getBound() returns a THREE.Sphere object
+        AppState.clipping.boundingSphere = mainNode.getBound();
 
         // TODO: set the scene as current!!
         setCurrentScene(marker.id);

js/state.js

@@ -1,7 +1,10 @@
 export const AppState = {
     // The root scene object
     root: null,
+    mainNodeId: null,
     initialRotation: null,
+    camera: ATON.Nav._camera,
+    renderer: ATON._renderer,
     scenes : [],
     ambientOcclusion : true,
     shadows : true,
@@ -9,9 +12,17 @@ export const AppState = {
     map : null,
     clipping : {
         enabled: false,
+        plane : null,
+        controls: null,
+        onDrag: null,
         helper : null,
-        rootBoundingBox: null,
-        listenerAdded: false,
+        // Change to boundingSphere
+        boundingSphere: null,
+        listeners: {
+            button: false,
+            plane: false,
+        },
+        vector: null,
     }
 }
 

package.json

@@ -6,6 +6,7 @@
   "author": "Nicolò P. <nicolo.paraciani@cnr.it>",
   "license": "MIT",
   "dependencies": {
-    "leaflet": "^1.9.4"
+    "leaflet": "^1.9.4",
+    "three": "0.147"
   }
 }

yarn.lock

@@ -6,3 +6,8 @@ leaflet@^1.9.4:
   version "1.9.4"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
   integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
+
+three@0.147:
+  version "0.147.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.147.0.tgz#1974af9e8e0c1efb3a8561334d57c0b6c29a7951"
+  integrity sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw==