diff --git a/app/components/ClippingPlanes.vue b/app/components/ClippingPlanes.vue
new file mode 100644
index 00000000..5c93b2ac
--- /dev/null
+++ b/app/components/ClippingPlanes.vue
@@ -0,0 +1,312 @@
+<script setup>
+import {
+  DEBOUNCE_DELAY,
+  DEFAULT_NORMALS,
+  getPlaneCssColor,
+} from "@ogw_front/utils/clipping_planes";
+import ToolPanel from "@ogw_front/components/ToolPanel";
+import { useClippingPlanesWidget } from "@ogw_front/composables/clipping_planes_widget";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDebounceFn } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const show = defineModel("show", { type: Boolean, default: false });
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+const targetAllVisible = ref(true);
+const selectedDatasetIds = ref([]);
+const planes = ref([{ origin: undefined, normal: [1, 0, 0] }]);
+const allItems = dataStore.refAllItems();
+const availableDatasets = computed(() =>
+  allItems.value.map((item) => ({ title: item.name || item.id, value: item.id })),
+);
+const widgetContainer = useTemplateRef("widgetContainer");
+const debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
+const {
+  getSceneCenter,
+  syncWidgets,
+  syncLocalCamera,
+  cleanupLocalWidget,
+  initLocalWidget,
+  updateWidgetPlacement,
+  isFromWidget,
+  setFromWidget,
+} = useClippingPlanesWidget({
+  planes,
+  targetAllVisible,
+  selectedDatasetIds,
+  allItems,
+  hybridViewerStore,
+  debouncedApply,
+});
+
+function addPlane() {
+  const normal = DEFAULT_NORMALS[planes.value.length % DEFAULT_NORMALS.length];
+  planes.value.push({ origin: getSceneCenter(), normal });
+}
+
+function removePlane(index) {
+  planes.value.splice(index, 1);
+}
+
+function flipNormal(plane) {
+  plane.normal = plane.normal.map((component) => -component);
+  syncWidgets();
+  applyClippingPlanes();
+}
+
+async function applyClippingPlanes() {
+  const allIds = allItems.value.map((item) => item.id);
+  if (allIds.length === 0) {
+    return;
+  }
+  const center = getSceneCenter();
+  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
+  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
+  const planesData = planes.value.map((plane) => ({
+    origin: (plane.origin || center).map(Number),
+    normal: plane.normal.map(Number),
+  }));
+
+  if (targetIds.length > 0) {
+    await hybridViewerStore.setClippingPlanes(targetIds, planesData);
+  }
+  if (untargetedIds.length > 0) {
+    await hybridViewerStore.setClippingPlanes(untargetedIds, []);
+  }
+}
+
+async function resetClippingPlanes() {
+  setFromWidget(true);
+  planes.value = [{ origin: undefined, normal: [1, 0, 0] }];
+  updateWidgetPlacement({ isReset: true });
+  setFromWidget(false);
+  await applyClippingPlanes();
+}
+
+async function removeClippingPlanes() {
+  const allIds = allItems.value.map((item) => item.id);
+  await hybridViewerStore.setClippingPlanes(allIds, []);
+}
+
+watch(widgetContainer, (container) => {
+  if (container) {
+    initLocalWidget(container.$el || container);
+  }
+});
+
+watch(
+  planes,
+  () => {
+    if (isFromWidget()) {
+      return;
+    }
+    syncWidgets();
+    debouncedApply();
+  },
+  { deep: true },
+);
+
+watch(show, (visible) => {
+  if (visible) {
+    updateWidgetPlacement({ isReset: true });
+    applyClippingPlanes();
+  }
+});
+
+watch(
+  [targetAllVisible, selectedDatasetIds],
+  () => {
+    if (show.value) {
+      updateWidgetPlacement({ isReset: true });
+      applyClippingPlanes();
+    }
+  },
+  { deep: true },
+);
+
+watch(allItems, () => {
+  if (show.value) {
+    updateWidgetPlacement({ isReset: true });
+    applyClippingPlanes();
+  }
+});
+
+watch(
+  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
+  (actorCount) => {
+    if (show.value && actorCount > 0) {
+      updateWidgetPlacement({ isReset: true });
+      applyClippingPlanes();
+    }
+  },
+);
+
+watch(() => hybridViewerStore.camera_options, syncLocalCamera, { deep: true });
+
+onBeforeUnmount(cleanupLocalWidget);
+</script>
+
+<template>
+  <ToolPanel v-model="show" title="Clipping Planes" :width="360" :click-outside="false">
+    <v-card-text class="pa-3 max-panel-height overflow-y-auto">
+      <v-sheet
+        ref="widgetContainer"
+        height="180"
+        color="transparent"
+        class="rounded-lg mb-3 overflow-hidden"
+      />
+      <v-switch
+        v-model="targetAllVisible"
+        label="Apply to all visible datasets"
+        color="primary"
+        density="compact"
+        hide-details
+        class="mb-2 text-caption"
+      />
+
+      <v-select
+        v-if="!targetAllVisible"
+        v-model="selectedDatasetIds"
+        :items="availableDatasets"
+        label="Select datasets"
+        multiple
+        chips
+        closable-chips
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <v-divider class="my-2" />
+
+      <v-row align="center" justify="space-between" no-gutters class="mb-2">
+        <v-col class="text-caption font-weight-bold">Planes ({{ planes.length }})</v-col>
+        <v-col cols="auto">
+          <v-btn size="x-small" variant="tonal" color="primary" icon="mdi-plus" @click="addPlane" />
+        </v-col>
+      </v-row>
+
+      <v-card
+        v-for="(plane, idx) in planes"
+        :key="idx"
+        variant="outlined"
+        class="pa-2 mb-3 rounded-lg border-opacity-50"
+        :style="{ borderColor: getPlaneCssColor(idx) }"
+      >
+        <v-row align="center" justify="space-between" no-gutters class="mb-1">
+          <v-col cols="auto" class="d-flex align-center">
+            <v-chip
+              size="x-small"
+              variant="flat"
+              :style="{
+                backgroundColor: getPlaneCssColor(idx),
+                color: 'white',
+              }"
+              class="font-weight-bold"
+            >
+              Plane #{{ idx + 1 }}
+            </v-chip>
+          </v-col>
+          <v-col cols="auto">
+            <v-btn
+              icon="mdi-trash-can-outline"
+              size="x-small"
+              variant="text"
+              color="error"
+              @click="removePlane(idx)"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row no-gutters class="mb-1">
+          <v-col class="text-caption text-medium-emphasis">Origin [X, Y, Z]</v-col>
+        </v-row>
+        <v-row v-if="plane.origin" dense class="mb-2">
+          <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
+            <v-text-field
+              v-model.number="plane.origin[axis - 1]"
+              type="number"
+              variant="outlined"
+              density="compact"
+              hide-details
+              step="any"
+              class="text-caption"
+            />
+          </v-col>
+        </v-row>
+        <v-row v-else dense class="mb-2">
+          <v-col v-for="axis in 3" :key="'orig-placeholder-' + axis" cols="4">
+            <v-text-field
+              placeholder="—"
+              variant="outlined"
+              density="compact"
+              hide-details
+              disabled
+              class="text-caption"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row align="center" justify="space-between" no-gutters class="mb-1">
+          <v-col class="text-caption text-medium-emphasis">Normal [X, Y, Z]</v-col>
+          <v-col cols="auto">
+            <v-btn
+              size="x-small"
+              variant="text"
+              color="primary"
+              prepend-icon="mdi-swap-horizontal"
+              class="text-none text-caption px-1"
+              @click="flipNormal(plane)"
+            >
+              Invert Normal
+            </v-btn>
+          </v-col>
+        </v-row>
+        <v-row dense>
+          <v-col v-for="axis in 3" :key="'norm-' + axis" cols="4">
+            <v-text-field
+              v-model.number="plane.normal[axis - 1]"
+              type="number"
+              variant="outlined"
+              density="compact"
+              hide-details
+              step="any"
+              class="text-caption"
+            />
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-card-text>
+
+    <template #actions>
+      <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
+        <v-btn
+          variant="text"
+          size="small"
+          color="error"
+          class="text-caption text-none"
+          @click="removeClippingPlanes"
+        >
+          Remove Clipping
+        </v-btn>
+        <v-btn
+          variant="tonal"
+          size="small"
+          color="secondary"
+          class="text-caption text-none"
+          @click="resetClippingPlanes"
+        >
+          Reset
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
+</template>
+
+<style scoped>
+.max-panel-height {
+  max-height: 520px;
+}
+</style>
diff --git a/app/components/ToolPanel.vue b/app/components/ToolPanel.vue
index af868be3..93fef2b9 100644
--- a/app/components/ToolPanel.vue
+++ b/app/components/ToolPanel.vue
@@ -1,11 +1,12 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
 
-const { title, width, closeLabel, actionLabel } = defineProps({
+const { title, width, closeLabel, actionLabel, clickOutside } = defineProps({
   title: { type: String, default: "" },
   width: { type: Number, default: 260 },
   closeLabel: { type: String, default: "Close" },
   actionLabel: { type: String, default: undefined },
+  clickOutside: { type: Boolean, default: true },
 });
 
 const model = defineModel({ type: Boolean, default: false });
@@ -19,7 +20,7 @@ function close() {
 <template>
   <GlassCard
     v-if="model"
-    v-click-outside="close"
+    v-click-outside="{ handler: close, closeConditional: () => clickOutside }"
     :title="title"
     :width="width"
     :ripple="false"
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index b0d2ff26..821e2b7e 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -3,6 +3,7 @@ import ActionButton from "@ogw_front/components/ActionButton";
 import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
 import CameraManager from "@ogw_front/components/CameraManager";
 import CameraOrientation from "@ogw_front/components/CameraOrientation";
+import ClippingPlanes from "@ogw_front/components/ClippingPlanes";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
@@ -15,6 +16,7 @@ const take_screenshot = ref(false);
 const show_camera_manager = ref(false);
 const showCameraOrientation = ref(false);
 const showZScaling = ref(false);
+const showClippingPlanes = ref(false);
 const grid_scale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
 
@@ -151,6 +153,15 @@ const camera_options = computed(() => [
       showZScaling.value = !showZScaling.value;
     },
   },
+  {
+    testId: "clippingPlanesButton",
+    tooltip: "Clipping Planes",
+    icon: "mdi-content-cut",
+    color: showClippingPlanes.value ? "primary" : undefined,
+    action: () => {
+      showClippingPlanes.value = !showClippingPlanes.value;
+    },
+  },
 ]);
 </script>
 
@@ -223,6 +234,7 @@ const camera_options = computed(() => [
     :width="260"
     @apply="handleZScalingClose"
   />
+  <ClippingPlanes v-model:show="showClippingPlanes" />
 </template>
 
 <style module>
diff --git a/app/composables/clipping_planes_widget.js b/app/composables/clipping_planes_widget.js
new file mode 100644
index 00000000..2d21565b
--- /dev/null
+++ b/app/composables/clipping_planes_widget.js
@@ -0,0 +1,260 @@
+import {
+  AXIS_SCALE,
+  CHANGE_THRESHOLD,
+  PLANE_COLORS,
+  SIZE_RATIO,
+  computeSceneBoundsInfo,
+  getPlaneStyle,
+  hasPlaneChanged,
+} from "@ogw_front/utils/clipping_planes";
+import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
+import { newInstance as vtkImplicitPlaneWidget } from "@kitware/vtk.js/Widgets/Widgets3D/ImplicitPlaneWidget";
+import { newInstance as vtkWidgetManager } from "@kitware/vtk.js/Widgets/Core/WidgetManager";
+
+// oxlint-disable-next-line max-params max-lines-per-function
+export function useClippingPlanesWidget({
+  planes,
+  targetAllVisible,
+  selectedDatasetIds,
+  allItems,
+  hybridViewerStore,
+  debouncedApply,
+}) {
+  let localRenderWindow = undefined;
+  let widgetManager = undefined;
+  let widgetEntries = [];
+  let fromWidget = false;
+  let maxDistance = 0;
+  let isLimitingCameraZoom = false;
+
+  function resolveActiveActors() {
+    const targetIds = targetAllVisible.value
+      ? allItems.value.map((item) => item.id)
+      : selectedDatasetIds.value;
+    const targeted = targetIds
+      .map((id) => {
+        const item = hybridViewerStore.hybridDb[id];
+        return item ? item.actor : undefined;
+      })
+      .filter(Boolean);
+    if (targeted.length > 0) {
+      return targeted;
+    }
+    return Object.values(hybridViewerStore.hybridDb)
+      .map((entry) => entry && entry.actor)
+      .filter(Boolean);
+  }
+
+  function getSceneBoundsInfo() {
+    return computeSceneBoundsInfo(resolveActiveActors());
+  }
+
+  function getSceneCenter() {
+    return getSceneBoundsInfo().center;
+  }
+
+  function createWidgetEntry(planeWidget, widgetHandle, planeIndex) {
+    const widgetState = planeWidget.getWidgetState();
+    const plane = planes.value[planeIndex];
+    if (plane.origin) {
+      widgetState.setOrigin(plane.origin);
+    }
+    widgetState.setNormal(plane.normal);
+    const subscription = widgetState.onModified(() => {
+      if (fromWidget) {
+        return;
+      }
+      const origin = widgetState.getOrigin().map((val) => Number(val.toFixed(4)));
+      const normal = widgetState.getNormal().map((val) => Number(val.toFixed(4)));
+      if (
+        !hasPlaneChanged(
+          origin,
+          normal,
+          planes.value[planeIndex].origin,
+          planes.value[planeIndex].normal,
+        )
+      ) {
+        return;
+      }
+      fromWidget = true;
+      planes.value[planeIndex].origin = origin;
+      planes.value[planeIndex].normal = normal;
+      nextTick(() => {
+        fromWidget = false;
+      });
+      debouncedApply();
+    });
+
+    return { planeWidget, widgetHandle, subscription };
+  }
+
+  function syncWidgets() {
+    if (!widgetManager || !localRenderWindow) {
+      return;
+    }
+    while (widgetEntries.length > planes.value.length) {
+      const entry = widgetEntries.pop();
+      entry.subscription.unsubscribe();
+      widgetManager.removeWidget(entry.planeWidget);
+      entry.planeWidget.delete();
+    }
+    const { cubicBounds } = getSceneBoundsInfo();
+    for (const [idx, plane] of planes.value.entries()) {
+      const rgb = PLANE_COLORS[idx % PLANE_COLORS.length];
+      if (!widgetEntries[idx]) {
+        const planeWidget = vtkImplicitPlaneWidget();
+        const widgetHandle = widgetManager.addWidget(planeWidget);
+        widgetHandle.setAxisScale(AXIS_SCALE);
+        widgetHandle.setHandleSizeRatio(SIZE_RATIO);
+        widgetEntries.push(createWidgetEntry(planeWidget, widgetHandle, idx));
+      }
+      const entry = widgetEntries[idx];
+      entry.widgetHandle.setRepresentationStyle(getPlaneStyle(rgb));
+      fromWidget = true;
+      entry.widgetHandle.placeWidget(cubicBounds);
+      fromWidget = false;
+      entry.widgetHandle.setAxisScale(AXIS_SCALE);
+      entry.widgetHandle.setHandleSizeRatio(SIZE_RATIO);
+      const widgetState = entry.planeWidget.getWidgetState();
+      if (plane.origin) {
+        widgetState.setOrigin(plane.origin);
+      }
+      widgetState.setNormal(plane.normal);
+    }
+    localRenderWindow.getRenderWindow().render();
+  }
+
+  function limitCameraZoomOut(camera) {
+    if (maxDistance <= 0 || isLimitingCameraZoom) {
+      return;
+    }
+
+    const currentDist = camera.getDistance();
+    if (currentDist <= maxDistance + CHANGE_THRESHOLD) {
+      return;
+    }
+
+    isLimitingCameraZoom = true;
+    const focal = camera.getFocalPoint();
+    const pos = camera.getPosition();
+    const ratio = maxDistance / currentDist;
+
+    camera.setPosition(
+      focal[0] + (pos[0] - focal[0]) * ratio,
+      focal[1] + (pos[1] - focal[1]) * ratio,
+      focal[2] + (pos[2] - focal[2]) * ratio,
+    );
+    localRenderWindow.getRenderWindow().render();
+    isLimitingCameraZoom = false;
+  }
+
+  function syncLocalCamera() {
+    if (!localRenderWindow) {
+      return;
+    }
+    const renderer = localRenderWindow.getRenderer();
+    const camera = renderer.getActiveCamera();
+    const mainCam = hybridViewerStore.camera_options;
+    const { center, cubicBounds } = getSceneBoundsInfo();
+    renderer.resetCamera(cubicBounds);
+    if (mainCam && mainCam.focal_point && mainCam.position) {
+      const dir = [
+        mainCam.position[0] - mainCam.focal_point[0],
+        mainCam.position[1] - mainCam.focal_point[1],
+        mainCam.position[2] - mainCam.focal_point[2],
+      ];
+      const dirLen = Math.hypot(...dir);
+      if (dirLen > 0) {
+        const distance = camera.getDistance();
+        const normDir = dir.map((component) => component / dirLen);
+        camera.setFocalPoint(...center);
+        camera.setPosition(
+          center[0] + normDir[0] * distance,
+          center[1] + normDir[1] * distance,
+          center[2] + normDir[2] * distance,
+        );
+        if (mainCam.view_up) {
+          camera.setViewUp(...mainCam.view_up);
+        }
+      }
+    }
+
+    limitCameraZoomOut(camera);
+    localRenderWindow.getRenderWindow().render();
+  }
+
+  function cleanupLocalWidget() {
+    maxDistance = 0;
+    isLimitingCameraZoom = false;
+    for (const entry of widgetEntries) {
+      entry.subscription.unsubscribe();
+      if (widgetManager) {
+        widgetManager.removeWidget(entry.planeWidget);
+      }
+      entry.planeWidget.delete();
+    }
+    widgetEntries = [];
+    if (localRenderWindow) {
+      localRenderWindow.delete();
+      localRenderWindow = undefined;
+      widgetManager = undefined;
+    }
+  }
+
+  function initLocalWidget(container) {
+    cleanupLocalWidget();
+    container.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
+    localRenderWindow = vtkGenericRenderWindow({
+      background: [0, 0, 0, 0],
+      listenWindowResize: false,
+    });
+    localRenderWindow.setContainer(container);
+    const camera = localRenderWindow.getRenderer().getActiveCamera();
+    camera.onModified(() => limitCameraZoomOut(camera));
+    const canvas = localRenderWindow.getApiSpecificRenderWindow().getCanvas();
+    Object.assign(canvas.style, { width: "100%", height: "100%", background: "transparent" });
+    localRenderWindow.resize();
+    widgetManager = vtkWidgetManager();
+    widgetManager.setRenderer(localRenderWindow.getRenderer());
+    updateWidgetPlacement();
+  }
+
+  function updateWidgetPlacement({ isReset = false } = {}) {
+    if (!widgetManager || !localRenderWindow) {
+      return;
+    }
+    if (isReset) {
+      maxDistance = 0;
+    }
+    const center = getSceneCenter();
+    for (const plane of planes.value) {
+      if (!plane.origin || isReset) {
+        plane.origin = [...center];
+      }
+    }
+    syncWidgets();
+    syncLocalCamera();
+    if (maxDistance <= 0) {
+      maxDistance = localRenderWindow.getRenderer().getActiveCamera().getDistance();
+    }
+  }
+
+  function isFromWidget() {
+    return fromWidget;
+  }
+
+  function setFromWidget(value) {
+    fromWidget = value;
+  }
+
+  return {
+    getSceneCenter,
+    syncWidgets,
+    syncLocalCamera,
+    cleanupLocalWidget,
+    initLocalWidget,
+    updateWidgetPlacement,
+    isFromWidget,
+    setFromWidget,
+  };
+}
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index eee1fa49..f5f1594a 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -137,6 +137,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     });
   }
 
+  async function setClippingPlanes(ids, planes) {
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
+    const params = { ids, planes };
+    await viewerStore.request({ schema, params });
+    await remoteRender();
+  }
+
   function resetCamera() {
     genericRenderWindow.value.getRenderer().resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
@@ -307,6 +314,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     removeItem,
     setVisibility,
     setZScaling,
+    setClippingPlanes,
     syncRemoteCamera,
     setCamera,
     initHybridViewer,
diff --git a/app/utils/clipping_planes.js b/app/utils/clipping_planes.js
new file mode 100644
index 00000000..fb55b79a
--- /dev/null
+++ b/app/utils/clipping_planes.js
@@ -0,0 +1,110 @@
+const AXIS_SCALE = 0.45;
+const SIZE_RATIO = 0.1;
+const DEBOUNCE_DELAY = 200;
+const CHANGE_THRESHOLD = 1e-4;
+// oxlint-disable no-magic-numbers
+const COLOR_BLUE = [0.12, 0.53, 0.9];
+const COLOR_GREEN = [0.26, 0.63, 0.28];
+const COLOR_ORANGE = [0.98, 0.55, 0];
+const COLOR_PURPLE = [0.55, 0.14, 0.67];
+const COLOR_RED = [0.9, 0.22, 0.21];
+// oxlint-enable no-magic-numbers
+const PLANE_COLORS = [COLOR_BLUE, COLOR_GREEN, COLOR_ORANGE, COLOR_PURPLE, COLOR_RED];
+const NORMAL_X = [1, 0, 0];
+const NORMAL_Y = [0, 1, 0];
+const NORMAL_Z = [0, 0, 1];
+const DEFAULT_NORMALS = [NORMAL_X, NORMAL_Y, NORMAL_Z];
+const RGB_MAX_VALUE = 255;
+
+function getPlaneCssColor(index) {
+  const rgb = PLANE_COLORS[index % PLANE_COLORS.length];
+  return `rgb(${rgb.map((channel) => Math.round(channel * RGB_MAX_VALUE)).join(",")})`;
+}
+
+function hasPlaneChanged(origin, normal, currentOrigin, currentNormal) {
+  if (!currentOrigin) {
+    return true;
+  }
+  return (
+    origin.some((val, idx) => Math.abs(val - currentOrigin[idx]) > CHANGE_THRESHOLD) ||
+    normal.some((val, idx) => Math.abs(val - currentNormal[idx]) > CHANGE_THRESHOLD)
+  );
+}
+
+function getPlaneStyle(rgb) {
+  return {
+    active: {
+      plane: { opacity: 1, color: rgb },
+      normal: { opacity: 1, color: rgb },
+      origin: { opacity: 1, color: rgb },
+    },
+    inactive: {
+      plane: { opacity: 0.5, color: rgb },
+      normal: { opacity: 1, color: rgb },
+      origin: { opacity: 1, color: rgb },
+    },
+    static: {
+      display2D: { representation: 0 },
+      outline: { color: [1, 1, 1], opacity: 1, representation: 1, interpolation: 0 },
+    },
+  };
+}
+
+function computeSceneBounds(actors) {
+  let bounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
+  for (const actor of actors) {
+    const boundsOfActor = actor.getBounds();
+    bounds = [
+      Math.min(bounds[0], boundsOfActor[0]),
+      Math.max(bounds[1], boundsOfActor[1]),
+      Math.min(bounds[2], boundsOfActor[2]),
+      Math.max(bounds[3], boundsOfActor[3]),
+      Math.min(bounds[4], boundsOfActor[4]),
+      Math.max(bounds[5], boundsOfActor[5]),
+    ];
+  }
+  return bounds;
+}
+
+function computeSceneBoundsInfo(actors) {
+  if (!actors || actors.length === 0) {
+    return { center: [0, 0, 0], cubicBounds: [-1, 1, -1, 1, -1, 1] };
+  }
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = computeSceneBounds(actors);
+  const center = [
+    Number(((xmin + xmax) / 2).toFixed(4)),
+    Number(((ymin + ymax) / 2).toFixed(4)),
+    Number(((zmin + zmax) / 2).toFixed(4)),
+  ];
+
+  const maxActorExtent = Math.max(
+    ...actors.map((actor) => {
+      const bounds = actor.getBounds();
+      return Math.max(bounds[1] - bounds[0], bounds[3] - bounds[2], bounds[5] - bounds[4]);
+    }),
+  );
+  const halfExtent = maxActorExtent / 2;
+  const cubicBounds = [
+    center[0] - halfExtent,
+    center[0] + halfExtent,
+    center[1] - halfExtent,
+    center[1] + halfExtent,
+    center[2] - halfExtent,
+    center[2] + halfExtent,
+  ];
+  return { center, cubicBounds };
+}
+
+export {
+  AXIS_SCALE,
+  SIZE_RATIO,
+  DEBOUNCE_DELAY,
+  CHANGE_THRESHOLD,
+  PLANE_COLORS,
+  DEFAULT_NORMALS,
+  getPlaneCssColor,
+  hasPlaneChanged,
+  getPlaneStyle,
+  computeSceneBounds,
+  computeSceneBoundsInfo,
+};