@@ -187,34 +187,34 @@ const panel = BUI.Component.create<BUI.PanelSection>(() => {
           
         <bim-checkbox label="Clipper enabled" checked 
           @change="${({ target }: { target: BUI.Checkbox }) => {
-            clipper.enabled = target.value;
+            clipper.config.enabled = target.value;
           }}">
         </bim-checkbox>
         
         <bim-checkbox label="Clipper visible" checked 
           @change="${({ target }: { target: BUI.Checkbox }) => {
-            clipper.visible = target.value;
+            clipper.config.visible = target.value;
           }}">
         </bim-checkbox>
       
         <bim-color-input 
           label="Planes Color" color="#202932" 
           @input="${({ target }: { target: BUI.ColorInput }) => {
-            clipper.material.color.set(target.color);
+            clipper.config.color = new THREE.Color(target.color);
           }}">
         </bim-color-input>
         
         <bim-number-input 
           slider step="0.01" label="Planes opacity" value="0.2" min="0.1" max="1"
           @change="${({ target }: { target: BUI.NumberInput }) => {
-            clipper.material.opacity = target.value;
+            clipper.config.opacity = target.value;
           }}">
         </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.size = target.value;
+            clipper.config.size = target.value;
           }}">
         </bim-number-input>
         
 
@@ -1,6 +1,7 @@
 import * as THREE from "three";
 import {
   Component,
+  Configurable,
   Createable,
   Disposable,
   Event,
@@ -11,6 +12,7 @@ import { SimplePlane } from "./src";
 import { Components } from "../Components";
 import { Raycasters } from "../Raycasters";
 import { Worlds } from "../Worlds";
+import { ClipperConfig, ClipperConfigManager } from "./src/clipper-config";
 
 export * from "./src";
 
@@ -22,14 +24,21 @@ export * from "./src";
  */
 export class Clipper
   extends Component
-  implements Createable, Disposable, Hideable
+  implements
+    Createable,
+    Disposable,
+    Hideable,
+    Configurable<ClipperConfigManager, ClipperConfig>
 {
   /**
    * A unique identifier for the component.
    * This UUID is used to register the component within the Components system.
    */
   static readonly uuid = "66290bc5-18c4-4cd1-9379-2e17a0617611" as const;
 
+  /** {@link Configurable.onSetup} */
+  readonly onSetup = new Event();
+
   /** Event that fires when the user starts dragging a clipping plane. */
   readonly onBeforeDrag = new Event<void>();
 
@@ -71,6 +80,9 @@ export class Clipper
   /** {@link Disposable.onDisposed} */
   readonly onDisposed = new Event<string>();
 
+  /** {@link Configurable.isSetup} */
+  isSetup = false;
+
   /**
    * Whether to force the clipping plane to be orthogonal in the Y direction
    * (up). This is desirable when clipping a building horizontally and a
@@ -97,6 +109,15 @@ export class Clipper
    */
   list: SimplePlane[] = [];
 
+  /** {@link Configurable.config} */
+  config = new ClipperConfigManager(this, this.components, "Clipper");
+
+  protected _defaultConfig: ClipperConfig = {
+    color: new THREE.Color(0xbb00ff),
+    opacity: 0.2,
+    size: 2,
+  };
+
   /** The material used in all the clipping planes. */
   private _material = new THREE.MeshBasicMaterial({
     color: 0xbb00ff,
@@ -253,6 +274,18 @@ export class Clipper
     }
   }
 
+  /** {@link Configurable.setup} */
+  setup(config?: Partial<ClipperConfig>) {
+    const fullConfig = { ...this._defaultConfig, ...config };
+
+    this.config.color = fullConfig.color;
+    this.config.opacity = fullConfig.opacity;
+    this.config.size = fullConfig.size;
+
+    this.isSetup = true;
+    this.onSetup.trigger();
+  }
+
   private deletePlane(plane: SimplePlane) {
     const index = this.list.indexOf(plane);
     if (index !== -1) {
 
@@ -0,0 +1,105 @@
+// eslint-disable-next-line max-classes-per-file
+import * as THREE from "three";
+import {
+  BooleanSettingsControl,
+  ColorSettingsControl,
+  NumberSettingControl,
+} from "../../Types";
+import { Configurator } from "../../ConfigManager";
+import { Clipper } from "../index";
+
+type ClipperConfigType = {
+  enabled: BooleanSettingsControl;
+  visible: BooleanSettingsControl;
+  color: ColorSettingsControl;
+  opacity: NumberSettingControl;
+  size: NumberSettingControl;
+};
+
+/**
+ * Configuration interface for the {@link Clipper}.
+ */
+export interface ClipperConfig {
+  color: THREE.Color;
+  opacity: number;
+  size: number;
+}
+
+export class ClipperConfigManager extends Configurator<
+  Clipper,
+  ClipperConfigType
+> {
+  protected _config = {
+    enabled: {
+      value: true,
+      type: "Boolean" as const,
+    },
+    visible: {
+      value: true,
+      type: "Boolean" as const,
+    },
+    color: {
+      value: new THREE.Color() as THREE.Color,
+      type: "Color" as const,
+    },
+    opacity: {
+      type: "Number" as const,
+      interpolable: true,
+      value: 1,
+      min: 0,
+      max: 1,
+    },
+    size: {
+      type: "Number" as const,
+      interpolable: true,
+      value: 2,
+      min: 0,
+      max: 100,
+    },
+  };
+
+  get enabled() {
+    return this._config.enabled.value;
+  }
+
+  set enabled(value: boolean) {
+    this._config.enabled.value = value;
+    this._component.enabled = value;
+  }
+
+  get visible() {
+    return this._config.visible.value;
+  }
+
+  set visible(value: boolean) {
+    this._config.visible.value = value;
+    this._component.visible = value;
+  }
+
+  get color() {
+    return this._config.color.value;
+  }
+
+  set color(value: THREE.Color) {
+    this._config.color.value = value;
+    this._component.material.color.copy(value);
+  }
+
+  get opacity() {
+    return this._config.opacity.value;
+  }
+
+  set opacity(value: number) {
+    this._config.opacity.value = value;
+    this._component.material.opacity = value;
+  }
+
+  get size() {
+    return this._config.size.value;
+  }
+
+  set size(value: number) {
+    this._config.size.value = value;
+    this._component.size = value;
+  }
+}
@@ -17,7 +17,7 @@ export class ConfigManager extends Component {
    * A unique identifier for the component.
    * This UUID is used to register the component within the Components system.
    */
-  static readonly uuid = "dc86e7e9-a8fd-5473-9ef6-724c67fecb0f" as const;
+  static readonly uuid = "b8c764e0-6b24-4e77-9a32-35fa728ee5b4" as const;
 
   constructor(components: Components) {
     super(components);
 
@@ -48,7 +48,6 @@ export abstract class Configurator<T, U extends ControlsSchema> {
       const entry = controlEntry as ColorSettingsControl;
       return {
         type: entry.type,
-        opacity: entry.opacity,
         value: entry.value.clone(),
       };
     }
 
@@ -7,7 +7,6 @@ export interface BooleanSettingsControl {
 
 export interface ColorSettingsControl {
   type: "Color";
-  opacity: number;
   value: THREE.Color;
 }
 
 
@@ -130,7 +130,9 @@ export class SimpleSceneConfigManager extends Configurator<
       },
       intensity: {
         type: "Number" as const,
-        interpolable: false,
+        interpolable: true,
+        min: 0,
+        max: 10,
         value: 2,
       },
     },
@@ -142,7 +144,9 @@ export class SimpleSceneConfigManager extends Configurator<
       },
       intensity: {
         type: "Number" as const,
-        interpolable: false,
+        interpolable: true,
+        min: 0,
+        max: 10,
         value: 2,
       },
       position: {
 
@@ -13,6 +13,9 @@ export class SimpleScene
   extends BaseScene
   implements Configurable<SimpleSceneConfigManager, SimpleSceneConfig>
 {
+  /** {@link Configurable.onSetup} */
+  readonly onSetup = new Event();
+
   /** {@link Configurable.isSetup} */
   isSetup = false;
 
@@ -22,9 +25,6 @@ export class SimpleScene
    */
   three: THREE.Scene;
 
-  /** {@link Configurable.onSetup} */
-  readonly onSetup = new Event<SimpleScene>();
-
   /** {@link Configurable.config} */
   config = new SimpleSceneConfigManager(this, this.components, "Scene");
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,6 @@ export abstract class Configurator<T, U extends ControlsSchema> {`
`48`	`48`	`const entry = controlEntry as ColorSettingsControl;`
`49`	`49`	`return {`
`50`	`50`	`type: entry.type,`
`51`		`- opacity: entry.opacity,`
`52`	`51`	`value: entry.value.clone(),`
`53`	`52`	`};`
`54`	`53`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,6 @@ export interface BooleanSettingsControl {`
`7`	`7`
`8`	`8`	`export interface ColorSettingsControl {`
`9`	`9`	`type: "Color";`
`10`		`- opacity: number;`
`11`	`10`	`value: THREE.Color;`
`12`	`11`	`}`
`13`	`12`