3dtiles-inspector 0.2.13 → 0.2.15

package/src/viewer/dom/cropUi.js

@@ -1,6 +1,9 @@
 export function updateCropControls({
   activeScreenSelectionId,
   elements,
+  keepSphere,
+  onKeepSphereRemove,
+  onKeepSphereSelect,
   onScreenSelectionRemove,
   onScreenSelectionSelect,
   pendingScreenSelectionMode,
@@ -14,8 +17,16 @@ export function updateCropControls({
     cropScreenCancelButton,
     cropScreenConfirmButton,
     cropScreenSelectButton,
+    keepSphereCancelButton,
+    keepSphereConfirmButton,
+    keepSphereCreateButton,
+    keepSphereListEl,
+    keepSphereRadiusTrackEl,
+    keepSphereRadiusValueEl,
   } = elements;
   const hasPendingScreenSelection = pendingScreenSelections.length > 0;
+  const hasKeepSphere = !!keepSphere;
+  const hasPendingKeepSphere = hasKeepSphere && !keepSphere.confirmed;
 
   cropScreenSelectButton.disabled =
     !tilesetHasGaussianSplats || hasPendingScreenSelection;
@@ -28,6 +39,33 @@ export function updateCropControls({
   cropCountValueEl.textContent = String(
     screenSelections.length + pendingScreenSelections.length,
   );
+  keepSphereCreateButton.disabled =
+    !tilesetHasGaussianSplats || hasKeepSphere;
+  keepSphereConfirmButton.disabled =
+    !tilesetHasGaussianSplats || !hasPendingKeepSphere;
+  keepSphereCancelButton.disabled =
+    !tilesetHasGaussianSplats || !hasPendingKeepSphere;
+  keepSphereRadiusTrackEl.classList.toggle('disabled', !hasKeepSphere);
+  keepSphereRadiusTrackEl.setAttribute(
+    'aria-disabled',
+    hasKeepSphere ? 'false' : 'true',
+  );
+  keepSphereRadiusValueEl.textContent = hasKeepSphere
+    ? formatRadius(keepSphere.worldRadius)
+    : 'None';
+
+  keepSphereListEl.replaceChildren();
+  if (hasKeepSphere) {
+    keepSphereListEl.appendChild(
+      createSelectionControl({
+        active: keepSphere.id === activeScreenSelectionId,
+        label: keepSphere.confirmed ? 'Crop Sphere' : 'Pending',
+        onScreenSelectionRemove: onKeepSphereRemove,
+        onScreenSelectionSelect: onKeepSphereSelect,
+        selection: keepSphere,
+      }),
+    );
+  }
 
   cropListEl.replaceChildren();
   pendingScreenSelections.forEach((selection) => {
@@ -57,6 +95,18 @@ export function updateCropControls({
     });
 }
 
+function formatRadius(radius) {
+  const value = Number(radius);
+  if (!Number.isFinite(value)) {
+    return 'None';
+  }
+  const abs = Math.abs(value);
+  if (abs > 0 && (abs < 0.001 || abs >= 1000000)) {
+    return value.toExponential(3).replace(/\.?0+e/, 'e');
+  }
+  return (abs < 1 ? value.toFixed(3) : value.toFixed(2)).replace(/\.?0+$/, '');
+}
+
 function createSelectionControl({
   active,
   label,

package/src/viewer/dom/elements.js

@@ -11,6 +11,14 @@ export function getViewerElements() {
     cropScreenCancelButton: document.getElementById('crop-screen-cancel'),
     cropScreenConfirmButton: document.getElementById('crop-screen-confirm'),
     cropScreenSelectButton: document.getElementById('crop-screen-select'),
+    keepSphereCancelButton: document.getElementById('keep-sphere-cancel'),
+    keepSphereConfirmButton: document.getElementById('keep-sphere-confirm'),
+    keepSphereCreateButton: document.getElementById('keep-sphere-create'),
+    keepSphereListEl: document.getElementById('keep-sphere-list'),
+    keepSphereRadiusTrackEl: document.getElementById('keep-sphere-radius'),
+    keepSphereRadiusValueEl: document.getElementById(
+      'keep-sphere-radius-value',
+    ),
     geometricErrorLayerScaleInput: document.getElementById(
       'geometric-error-layer-scale',
     ),

package/src/viewer/dom/events.js

@@ -19,6 +19,10 @@ export function bindViewerEvents({
     cropScreenCancelButton,
     cropScreenConfirmButton,
     cropScreenSelectButton,
+    keepSphereCancelButton,
+    keepSphereConfirmButton,
+    keepSphereCreateButton,
+    keepSphereRadiusTrackEl,
     geometricErrorLayerScaleInput,
     geometricErrorScaleInput,
     moveCameraToCoordinateButton,
@@ -36,6 +40,7 @@ export function bindViewerEvents({
   } = elements;
 
   let uniformScaleTrackPointerId = null;
+  let keepSphereRadiusTrackPointerId = null;
 
   function setUniformScaleStatus() {
     setStatus(
@@ -151,6 +156,64 @@ export function bindViewerEvents({
     'click',
     handlers.cancelCropScreenSelection,
   );
+  keepSphereCreateButton.addEventListener('click', handlers.createKeepSphere);
+  keepSphereConfirmButton.addEventListener('click', handlers.confirmKeepSphere);
+  keepSphereCancelButton.addEventListener('click', handlers.cancelKeepSphere);
+  keepSphereRadiusTrackEl.addEventListener('pointerdown', (event) => {
+    if (event.button !== 0 || keepSphereRadiusTrackEl.classList.contains('disabled')) {
+      return;
+    }
+
+    event.preventDefault();
+    keepSphereRadiusTrackPointerId = event.pointerId;
+    keepSphereRadiusTrackEl.focus();
+    keepSphereRadiusTrackEl.classList.add('dragging');
+    keepSphereRadiusTrackEl.setPointerCapture(event.pointerId);
+    handlers.beginKeepSphereRadiusTrackDrag(event.clientX);
+  });
+  keepSphereRadiusTrackEl.addEventListener('pointermove', (event) => {
+    if (event.pointerId !== keepSphereRadiusTrackPointerId) {
+      return;
+    }
+
+    handlers.setKeepSphereRadiusFromTrackClientX(event.clientX);
+  });
+  keepSphereRadiusTrackEl.addEventListener('pointerup', (event) => {
+    if (event.pointerId !== keepSphereRadiusTrackPointerId) {
+      return;
+    }
+
+    keepSphereRadiusTrackPointerId = null;
+    keepSphereRadiusTrackEl.classList.remove('dragging');
+    keepSphereRadiusTrackEl.releasePointerCapture(event.pointerId);
+    handlers.endKeepSphereRadiusTrackDrag({ commit: true });
+  });
+  keepSphereRadiusTrackEl.addEventListener('pointercancel', (event) => {
+    if (event.pointerId !== keepSphereRadiusTrackPointerId) {
+      return;
+    }
+
+    keepSphereRadiusTrackPointerId = null;
+    keepSphereRadiusTrackEl.classList.remove('dragging');
+    keepSphereRadiusTrackEl.releasePointerCapture(event.pointerId);
+    handlers.endKeepSphereRadiusTrackDrag();
+  });
+  keepSphereRadiusTrackEl.addEventListener('keydown', (event) => {
+    let handled = true;
+    const step = event.shiftKey ? 1 : 0.1;
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+      handlers.nudgeKeepSphereRadiusExponent(-step);
+    } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+      handlers.nudgeKeepSphereRadiusExponent(step);
+    } else {
+      handled = false;
+    }
+
+    if (handled) {
+      event.preventDefault();
+    }
+  });
   toolbarToggleButton.addEventListener(
     'click',
     handlers.toggleToolbarVisibility,

package/src/viewer/scene/cameraController.js

@@ -380,6 +380,7 @@ class CameraController extends EventDispatcher {
   #lastTime;
   #hit;
   #pointerDownFilter;
+  #raycastHitFilter;
   #zoomTimeout;
   constructor(renderer, scene, camera, options = {}) {
     super();
@@ -417,6 +418,10 @@ class CameraController extends EventDispatcher {
       typeof options.pointerDownFilter === 'function'
         ? options.pointerDownFilter
         : null;
+    this.#raycastHitFilter =
+      typeof options.raycastHitFilter === 'function'
+        ? options.raycastHitFilter
+        : null;
     this.#zoomTimeout = null;
     this.init();
   }
@@ -483,6 +488,10 @@ class CameraController extends EventDispatcher {
     this.#resetState();
     this.#pointerTracker.reset();
   }
+  setRaycastHitFilter(filter) {
+    this.#raycastHitFilter = typeof filter === 'function' ? filter : null;
+    this.#resetState();
+  }
   init() {
     this.#domElement.style.touchAction = 'none';
     this.#pivotMesh.raycast = () => {};
@@ -1233,10 +1242,16 @@ class CameraController extends EventDispatcher {
     const targets = Array.isArray(objects) ? objects : [objects];
     if (targets.length === 0) return null;
     const intersects = raycaster.intersectObjects(targets, true);
-    if (intersects.length > 0) {
+    for (const intersection of intersects) {
+      if (
+        this.#raycastHitFilter &&
+        !this.#raycastHitFilter(intersection, raycaster)
+      ) {
+        continue;
+      }
       return {
-        point: intersects[0].point.clone(),
-        distance: intersects[0].point.distanceTo(this.#camera.position),
+        point: intersection.point.clone(),
+        distance: intersection.point.distanceTo(this.#camera.position),
       };
     }
     return null;