feat: clipping plane autoscale

Author: agviegas

packages/core/src/core/Clipper/example.ts

@@ -201,13 +201,25 @@ const panel = BUI.Component.create<BUI.PanelSection>(() => {
           }}">
         </bim-number-input>
         
-        <bim-number-input 
+        <bim-number-input
           slider step="0.1" label="Planes Size" value="5" min="2" max="10"
           @change="${({ target }: { target: BUI.NumberInput }) => {
             clipper.config.size = target.value;
           }}">
         </bim-number-input>
-        
+
+        <bim-checkbox label="Auto Scale Planes" checked
+          @change="${({ target }: { target: BUI.Checkbox }) => {
+            clipper.autoScalePlanes = target.value;
+            for (const [, plane] of clipper.list) {
+              plane.autoScale = target.value;
+              if (!target.value) {
+                plane.size = clipper.size;
+              }
+            }
+          }}">
+        </bim-checkbox>
+
         <bim-button 
           label="Toggle Clippings" 
           @click=${toggleClippings}>  

packages/core/src/core/Clipper/index.ts

@@ -98,6 +98,13 @@ export class Clipper
    */
   toleranceOrthogonalY = 0.7;
 
+  /**
+   * Whether clipping planes should automatically scale based on
+   * camera distance. When true, the plane surface stays proportional
+   * to the arrow gizmo as you zoom in/out. Default is true.
+   */
+  autoScalePlanes = true;
+
   /**
    * The type of clipping plane to be created.
    * Default is {@link SimplePlane}.
@@ -401,6 +408,7 @@ export class Clipper
       normal,
       this._material,
     );
+    plane.autoScale = this.autoScalePlanes;
     plane.onDraggingStarted.add(this._onStartDragging);
     plane.onDraggingEnded.add(this._onEndDragging);
     const id = UUID.create();

packages/core/src/core/Clipper/src/simple-plane.ts

@@ -69,6 +69,21 @@ export class SimplePlane implements Disposable, Hideable {
     visible: false,
   });
 
+  private _sizeMultiplier = 5;
+
+  private _autoScale = true;
+
+  get autoScale() {
+    return this._autoScale;
+  }
+
+  set autoScale(value: boolean) {
+    this._autoScale = value;
+    if (value) {
+      this.updateScale();
+    }
+  }
+
   /**
    * Getter for the enabled state of the clipping plane.
    * @returns {boolean} The current enabled state.
@@ -136,12 +151,17 @@ export class SimplePlane implements Disposable, Hideable {
 
   /** The size of the clipping plane representation. */
   get size() {
-    return this._planeMesh.scale.x;
+    return this._sizeMultiplier;
   }
 
   /** Sets the size of the clipping plane representation. */
   set size(size: number) {
-    this._planeMesh.scale.set(size, size, size);
+    this._sizeMultiplier = size;
+    if (this.autoScale) {
+      this.updateScale();
+    } else {
+      this._planeMesh.scale.set(size, size, size);
+    }
   }
 
   /**
@@ -183,6 +203,7 @@ export class SimplePlane implements Disposable, Hideable {
 
     this.normal = normal;
     this.origin = origin;
+    this._sizeMultiplier = size;
 
     world.renderer.setPlane(true, this.three);
 
@@ -194,6 +215,11 @@ export class SimplePlane implements Disposable, Hideable {
     if (activateControls) {
       this.toggleControls(true);
     }
+
+    this.updateScale();
+    if (world.camera?.controls) {
+      world.camera.controls.addEventListener("update", this.updateScale);
+    }
   }
 
   private notifyManager = () => {
@@ -231,11 +257,32 @@ export class SimplePlane implements Disposable, Hideable {
       this.normal,
       this._helper.position,
     );
+    this.updateScale();
+  };
+
+  private updateScale = () => {
+    if (!this.autoScale) return;
+    const camera = this.world.camera?.three;
+    if (!camera) return;
+    if (!(camera instanceof THREE.PerspectiveCamera)) return;
+    const cameraPosition = new THREE.Vector3();
+    camera.getWorldPosition(cameraPosition);
+    const distance = cameraPosition.distanceTo(this._helper.position);
+    const scale = (distance / 7) * this._sizeMultiplier;
+    this._planeMesh.scale.set(scale, scale, scale);
   };
 
   /** {@link Disposable.dispose} */
   dispose() {
     this._enabled = false;
+
+    if (this.world.camera?.controls) {
+      this.world.camera.controls.removeEventListener(
+        "update",
+        this.updateScale,
+      );
+    }
+
     this.onDraggingStarted.reset();
     this.onDraggingEnded.reset();
     this._helper.removeFromParent();