@shopware-ag/dive 1.12.1 → 1.14.0

package/build/dive.js

@@ -649,13 +649,10 @@ var DIVERenderer = class extends WebGLRenderer {
 };
 
 // src/scene/Scene.ts
-import { Color as Color8, Scene as Scene2 } from "three";
+import { Color as Color7, Scene as Scene2 } from "three";
 
 // src/scene/root/Root.ts
-import { Box3 as Box33, Object3D as Object3D11 } from "three";
-
-// src/scene/root/lightroot/LightRoot.ts
-import { Color as Color4, Object3D as Object3D5 } from "three";
+import { Box3 as Box34, Color as Color5, Object3D as Object3D8 } from "three";
 
 // src/light/AmbientLight.ts
 init_VisibilityLayerMask();
@@ -663,6 +660,8 @@ import { AmbientLight, Object3D } from "three";
 var DIVEAmbientLight = class extends Object3D {
   constructor() {
     super();
+    this.isDIVELight = true;
+    this.isDIVEAmbientLight = true;
     this.name = "DIVEAmbientLight";
     this._light = new AmbientLight(16777215, 1);
     this._light.layers.mask = PRODUCT_LAYER_MASK;
@@ -818,6 +817,10 @@ var _DIVECommunication = class _DIVECommunication {
         returnValue = this.generateMedia(payload);
         break;
       }
+      case "SET_PARENT": {
+        returnValue = this.setParent(payload);
+        break;
+      }
     }
     this.dispatch(action, payload);
     return returnValue;
@@ -844,8 +847,8 @@ var _DIVECommunication = class _DIVECommunication {
       name: this.scene.name,
       mediaItem: null,
       backgroundColor: "#" + this.scene.background.getHexString(),
-      floorEnabled: this.scene.Root.Floor.visible,
-      floorColor: "#" + this.scene.Root.Floor.material.color.getHexString(),
+      floorEnabled: this.scene.Floor.visible,
+      floorColor: "#" + this.scene.Floor.material.color.getHexString(),
       userCamera: {
         position: this.controller.object.position.clone(),
         target: this.controller.target.clone()
@@ -873,6 +876,7 @@ var _DIVECommunication = class _DIVECommunication {
   }
   addObject(payload) {
     if (this.registered.get(payload.id)) return false;
+    if (payload.parent === void 0) payload.parent = null;
     this.registered.set(payload.id, payload);
     this.scene.AddSceneObject(payload);
     return true;
@@ -882,7 +886,7 @@ var _DIVECommunication = class _DIVECommunication {
     if (!objectToUpdate) return false;
     this.registered.set(payload.id, __spreadValues(__spreadValues({}, objectToUpdate), payload));
     const updatedObject = this.registered.get(payload.id);
-    this.scene.UpdateSceneObject(updatedObject);
+    this.scene.UpdateSceneObject(__spreadProps(__spreadValues({}, payload), { id: updatedObject.id, entityType: updatedObject.entityType }));
     Object.assign(payload, updatedObject);
     return true;
   }
@@ -1001,14 +1005,14 @@ var _DIVECommunication = class _DIVECommunication {
   updateScene(payload) {
     if (payload.name !== void 0) this.scene.name = payload.name;
     if (payload.backgroundColor !== void 0) this.scene.SetBackground(payload.backgroundColor);
-    if (payload.gridEnabled !== void 0) this.scene.Root.Grid.SetVisibility(payload.gridEnabled);
-    if (payload.floorEnabled !== void 0) this.scene.Root.Floor.SetVisibility(payload.floorEnabled);
-    if (payload.floorColor !== void 0) this.scene.Root.Floor.SetColor(payload.floorColor);
+    if (payload.gridEnabled !== void 0) this.scene.Grid.SetVisibility(payload.gridEnabled);
+    if (payload.floorEnabled !== void 0) this.scene.Floor.SetVisibility(payload.floorEnabled);
+    if (payload.floorColor !== void 0) this.scene.Floor.SetColor(payload.floorColor);
     payload.name = this.scene.name;
     payload.backgroundColor = "#" + this.scene.background.getHexString();
-    payload.gridEnabled = this.scene.Root.Grid.visible;
-    payload.floorEnabled = this.scene.Root.Floor.visible;
-    payload.floorColor = "#" + this.scene.Root.Floor.material.color.getHexString();
+    payload.gridEnabled = this.scene.Grid.visible;
+    payload.floorEnabled = this.scene.Floor.visible;
+    payload.floorColor = "#" + this.scene.Floor.material.color.getHexString();
     return true;
   }
   generateMedia(payload) {
@@ -1024,6 +1028,31 @@ var _DIVECommunication = class _DIVECommunication {
     payload.dataUri = this.mediaGenerator.GenerateMedia(position, target, payload.width, payload.height);
     return true;
   }
+  setParent(payload) {
+    const object = this.registered.get(payload.object.id);
+    if (!object) return false;
+    const sceneObject = this.scene.GetSceneObject(object);
+    if (!sceneObject) return false;
+    if (payload.parent === null) {
+      this.scene.Root.attach(sceneObject);
+      return true;
+    }
+    if (payload.object.id === payload.parent.id) {
+      return false;
+    }
+    const parent = this.registered.get(payload.parent.id);
+    if (!parent) {
+      this.scene.Root.attach(sceneObject);
+      return true;
+    }
+    const parentObject = this.scene.GetSceneObject(parent);
+    if (!parentObject) {
+      this.scene.Root.attach(sceneObject);
+      return true;
+    }
+    parentObject.attach(sceneObject);
+    return true;
+  }
 };
 _DIVECommunication.__instances = [];
 var DIVECommunication = _DIVECommunication;
@@ -1033,6 +1062,8 @@ init_VisibilityLayerMask();
 var DIVEPointLight = class extends Object3D3 {
   constructor() {
     super();
+    this.isDIVELight = true;
+    this.isDIVEPointLight = true;
     this.isMoveable = true;
     this.isSelectable = true;
     this.gizmo = null;
@@ -1081,6 +1112,8 @@ import { DirectionalLight, HemisphereLight, Object3D as Object3D4 } from "three"
 var DIVESceneLight = class extends Object3D4 {
   constructor() {
     super();
+    this.isDIVELight = true;
+    this.isDIVESceneLight = true;
     this.name = "DIVESceneLight";
     this._hemiLight = new HemisphereLight(16777215, 16777215, 2);
     this._hemiLight.layers.mask = PRODUCT_LAYER_MASK;
@@ -1115,87 +1148,9 @@ var DIVESceneLight = class extends Object3D4 {
   }
 };
 
-// src/scene/root/lightroot/LightRoot.ts
-var DIVELightRoot = class extends Object3D5 {
-  constructor() {
-    super();
-    this.name = "LightRoot";
-  }
-  GetLight(object) {
-    if (object.id === void 0) {
-      console.warn("LightRoot.GetLight: object.id is undefined");
-      return void 0;
-    }
-    return this.children.find((object3D) => object3D.userData.id === object.id);
-  }
-  UpdateLight(light) {
-    if (light.id === void 0) {
-      console.warn(`LightRoot.UpdateLight: light.id is undefined`);
-      return;
-    }
-    let sceneObject = this.children.find((object3D) => object3D.userData.id === light.id);
-    if (!sceneObject) {
-      switch (light.type) {
-        case "scene": {
-          sceneObject = new DIVESceneLight();
-          break;
-        }
-        case "ambient": {
-          sceneObject = new DIVEAmbientLight();
-          break;
-        }
-        case "point": {
-          sceneObject = new DIVEPointLight();
-          break;
-        }
-        default: {
-          console.warn(`LightRoot.UpdateLight: Unknown light type: ${light.type}`);
-          return;
-        }
-      }
-      sceneObject.userData.id = light.id;
-      this.add(sceneObject);
-    }
-    if (light.name !== void 0 && light.name !== null) sceneObject.name = light.name;
-    if (light.position !== void 0 && light.position !== null) sceneObject.position.set(light.position.x, light.position.y, light.position.z);
-    if (light.intensity !== void 0 && light.intensity !== null) sceneObject.SetIntensity(light.intensity);
-    if (light.enabled !== void 0 && light.enabled !== null) sceneObject.SetEnabled(light.enabled);
-    if (light.color !== void 0 && light.color !== null) sceneObject.SetColor(new Color4(light.color));
-    if (light.visible !== void 0 && light.visible !== null) sceneObject.visible = light.visible;
-  }
-  DeleteLight(light) {
-    if (light.id === void 0) {
-      console.warn("LightRoot.DeleteLight: light.id is undefined");
-      return;
-    }
-    const sceneObject = this.children.find((object3D) => object3D.userData.id === light.id);
-    if (!sceneObject) {
-      console.warn(`LightRoot.DeleteLight: Light with id ${light.id} not found`);
-      return;
-    }
-    const findScene = (object) => {
-      if (object.parent !== null) {
-        return findScene(object.parent);
-      }
-      ;
-      return object;
-    };
-    const scene = findScene(sceneObject);
-    scene.children.find((object) => {
-      if ("isTransformControls" in object) {
-        object.detach();
-      }
-    });
-    this.remove(sceneObject);
-  }
-};
-
-// src/scene/root/modelroot/ModelRoot.ts
-import { Object3D as Object3D7 } from "three";
-
 // src/model/Model.ts
 init_VisibilityLayerMask();
-import { Box3, Color as Color5, MeshStandardMaterial, Object3D as Object3D6, Raycaster as Raycaster2, Vector3 as Vector32 } from "three";
+import { Box3, MeshStandardMaterial, Object3D as Object3D5, Raycaster as Raycaster2, Vector3 as Vector32 } from "three";
 
 // src/helper/findSceneRecursive/findSceneRecursive.ts
 var findSceneRecursive = (object) => {
@@ -1206,9 +1161,10 @@ var findSceneRecursive = (object) => {
 };
 
 // src/model/Model.ts
-var DIVEModel = class extends Object3D6 {
+var DIVEModel = class extends Object3D5 {
   constructor() {
     super();
+    this.isDIVEModel = true;
     this.isSelectable = true;
     this.isMoveable = true;
     this.gizmo = null;
@@ -1257,7 +1213,7 @@ var DIVEModel = class extends Object3D6 {
       this._material.vertexColors = material.vertexColors;
     }
     if (material.color !== void 0) {
-      this._material.color = new Color5(material.color);
+      this._material.color.set(material.color);
     }
     if (material.map !== void 0) {
       this._material.map = material.map;
@@ -1285,7 +1241,6 @@ var DIVEModel = class extends Object3D6 {
     }
     if (this._mesh) {
       this._mesh.material = this._material;
-      this._mesh.material.needsUpdate = true;
     }
   }
   SetToWorldOrigin() {
@@ -1368,85 +1323,13 @@ var DIVELoadingManager = class {
   }
 };
 
-// src/scene/root/modelroot/ModelRoot.ts
-var DIVEModelRoot = class extends Object3D7 {
-  constructor() {
-    super();
-    this.name = "ModelRoot";
-    this.loadingManager = new DIVELoadingManager();
-  }
-  GetModel(object) {
-    if (object.id === void 0) {
-      console.warn("ModelRoot.GetModel: object.id is undefined");
-      return void 0;
-    }
-    return this.children.find((object3D) => object3D.userData.id === object.id);
-  }
-  UpdateModel(object) {
-    if (object.id === void 0) {
-      console.warn("ModelRoot.UpdateModel: object.id is undefined");
-      return;
-    }
-    let sceneObject = this.children.find((object3D) => object3D.userData.id === object.id);
-    if (!sceneObject && object.uri !== void 0) {
-      const model = new DIVEModel();
-      sceneObject = model;
-      sceneObject.userData.id = object.id;
-      this.add(sceneObject);
-      this.loadingManager.LoadGLTF(object.uri).then((gltf) => {
-        var _a;
-        model.SetModel(gltf);
-        (_a = DIVECommunication.get(object.id)) == null ? void 0 : _a.PerformAction("MODEL_LOADED", { id: object.id });
-      });
-    }
-    if (object.position !== void 0) sceneObject.SetPosition(object.position);
-    if (object.rotation !== void 0) sceneObject.SetRotation(object.rotation);
-    if (object.scale !== void 0) sceneObject.SetScale(object.scale);
-    if (object.visible !== void 0) sceneObject.SetVisibility(object.visible);
-    if (object.material !== void 0) sceneObject.SetMaterial(object.material);
-  }
-  DeleteModel(object) {
-    if (object.id === void 0) {
-      console.warn(`ModelRoot.DeleteModel: object.id is undefined`);
-      return;
-    }
-    const sceneObject = this.children.find((object3D) => object3D.userData.id === object.id);
-    if (!sceneObject) {
-      console.warn(`ModelRoot.DeleteModel: Model with id ${object.id} not found`);
-      return;
-    }
-    const findScene = (object2) => {
-      if (object2.parent !== null) {
-        return findScene(object2.parent);
-      }
-      ;
-      return object2;
-    };
-    const scene = findScene(sceneObject);
-    scene.children.find((object2) => {
-      if ("isTransformControls" in object2) {
-        object2.detach();
-      }
-    });
-    this.remove(sceneObject);
-  }
-  PlaceOnFloor(object) {
-    if (object.id === void 0) console.warn("ModelRoot.PlaceOnFloor: object.id is undefined");
-    const sceneObject = this.children.find((object3D) => object3D.userData.id === object.id);
-    if (!sceneObject) return;
-    sceneObject.PlaceOnFloor();
-  }
-};
-
-// src/scene/root/primitiveroot/PrimitiveRoot.ts
-import { Object3D as Object3D9 } from "three";
-
 // src/primitive/Primitive.ts
-import { Box3 as Box32, BoxGeometry, BufferGeometry, Color as Color6, ConeGeometry, CylinderGeometry, Mesh as Mesh3, MeshStandardMaterial as MeshStandardMaterial2, Object3D as Object3D8, Raycaster as Raycaster3, SphereGeometry as SphereGeometry2, Vector3 as Vector33 } from "three";
+import { Box3 as Box32, BoxGeometry, BufferGeometry, Color as Color4, ConeGeometry, CylinderGeometry, Mesh as Mesh3, MeshStandardMaterial as MeshStandardMaterial2, Object3D as Object3D6, Raycaster as Raycaster3, SphereGeometry as SphereGeometry2, Vector3 as Vector33 } from "three";
 init_VisibilityLayerMask();
-var DIVEPrimitive = class extends Object3D8 {
+var DIVEPrimitive = class extends Object3D6 {
   constructor() {
     super();
+    this.isDIVEPrimitive = true;
     this.isSelectable = true;
     this.isMoveable = true;
     this.gizmo = null;
@@ -1483,7 +1366,7 @@ var DIVEPrimitive = class extends Object3D8 {
       primitiveMaterial.vertexColors = material.vertexColors;
     }
     if (material.color !== void 0) {
-      primitiveMaterial.color = new Color6(material.color);
+      primitiveMaterial.color = new Color4(material.color);
     }
     if (material.map !== void 0) {
       primitiveMaterial.map = material.map;
@@ -1614,142 +1497,105 @@ var DIVEPrimitive = class extends Object3D8 {
   }
 };
 
-// src/scene/root/primitiveroot/PrimitiveRoot.ts
-var DIVEPrimitiveRoot = class extends Object3D9 {
+// src/group/Group.ts
+import { Box3 as Box33, BoxGeometry as BoxGeometry2, Mesh as Mesh4, MeshBasicMaterial as MeshBasicMaterial2, Object3D as Object3D7, Vector3 as Vector34 } from "three";
+var DIVEGroup = class extends Object3D7 {
   constructor() {
     super();
-    this.name = "PrimitiveRoot";
+    this.isDIVEGroup = true;
+    this.isSelectable = true;
+    this.isMoveable = true;
+    this.name = "DIVEGroup";
+    this._bb = new Box33();
+    this._boxMesh = new Mesh4(new BoxGeometry2(0, 0, 0), new MeshBasicMaterial2({ color: 16711680, wireframe: true }));
+    this._boxMesh.visible = false;
+    this.add(this._boxMesh);
   }
-  GetPrimitive(object) {
-    if (object.id === void 0) {
-      console.warn("PrimitiveRoot.GetPrimitive: object.id is undefined");
-      return void 0;
-    }
-    return this.children.find((object3D) => object3D.userData.id === object.id);
+  SetPosition(position) {
+    this.position.set(position.x, position.y, position.z);
   }
-  UpdatePrimitive(object) {
-    if (object.id === void 0) {
-      console.warn("PrimitiveRoot.UpdatePrimitive: object.id is undefined");
-      return;
-    }
-    let sceneObject = this.children.find((object3D) => object3D.userData.id === object.id);
-    if (!sceneObject && object.geometry !== void 0) {
-      const primitive = new DIVEPrimitive();
-      primitive.SetGeometry(object.geometry);
-      sceneObject = primitive;
-      sceneObject.userData.id = object.id;
-      this.add(sceneObject);
-    }
-    if (object.position !== void 0) sceneObject.SetPosition(object.position);
-    if (object.rotation !== void 0) sceneObject.SetRotation(object.rotation);
-    if (object.scale !== void 0) sceneObject.SetScale(object.scale);
-    if (object.visible !== void 0) sceneObject.SetVisibility(object.visible);
-    if (object.material !== void 0) sceneObject.SetMaterial(object.material);
+  SetRotation(rotation) {
+    this.rotation.setFromVector3(new Vector34(rotation.x, rotation.y, rotation.z));
   }
-  DeletePrimitive(object) {
-    if (object.id === void 0) {
-      console.warn(`PrimitiveRoot.DeletePrimitive: object.id is undefined`);
-      return;
-    }
-    const sceneObject = this.children.find((object3D) => object3D.userData.id === object.id);
-    if (!sceneObject) {
-      console.warn(`PrimitiveRoot.DeletePrimitive: Primitive with id ${object.id} not found`);
-      return;
-    }
-    const findScene = (object2) => {
-      if (object2.parent !== null) {
-        return findScene(object2.parent);
-      }
-      ;
-      return object2;
-    };
-    const scene = findScene(sceneObject);
-    scene.children.find((object2) => {
-      if ("isTransformControls" in object2) {
-        object2.detach();
-      }
+  SetScale(scale) {
+    this.scale.set(scale.x, scale.y, scale.z);
+  }
+  SetVisibility(visible) {
+    this.traverse((child) => {
+      if (child.uuid === this._boxMesh.uuid) return;
+      child.visible = visible;
     });
-    this.remove(sceneObject);
   }
-  PlaceOnFloor(object) {
-    if (object.id === void 0) console.warn("PrimitiveRoot.PlaceOnFloor: object.id is undefined");
-    const sceneObject = this.children.find((object3D) => object3D.userData.id === object.id);
-    if (!sceneObject) return;
-    sceneObject.PlaceOnFloor();
+  SetBoundingBoxVisibility(visible) {
+    this._boxMesh.visible = visible;
   }
-};
-
-// src/primitive/floor/Floor.ts
-init_VisibilityLayerMask();
-import { Color as Color7, Mesh as Mesh4, MeshStandardMaterial as MeshStandardMaterial3, PlaneGeometry } from "three";
-var DIVEFloor = class extends Mesh4 {
-  constructor() {
-    super(new PlaneGeometry(1e4, 1e4), new MeshStandardMaterial3({ color: new Color7(150 / 255, 150 / 255, 150 / 255) }));
-    this.isFloor = true;
-    this.name = "Floor";
-    this.layers.mask = PRODUCT_LAYER_MASK;
-    this.receiveShadow = true;
-    this.rotateX(-Math.PI / 2);
+  attach(object) {
+    super.attach(object);
+    this.recalculatePosition();
+    this.updateBoxMesh();
+    return this;
   }
-  SetVisibility(visible) {
-    this.visible = visible;
+  remove(object) {
+    super.remove(object);
+    this.recalculatePosition();
+    this.updateBoxMesh();
+    return this;
   }
-  SetColor(color) {
-    this.material.color = new Color7(color);
+  /**
+   * Recalculates the position of the group based on it's bounding box.
+   * Children's world positions are kept.
+   */
+  recalculatePosition() {
+    var _a;
+    const childrensWorldPositions = this.children.map((child) => child.getWorldPosition(new Vector34()));
+    const bbcenter = this.updateBB();
+    this.position.copy(bbcenter);
+    this.children.forEach((child, i) => {
+      if (child.uuid === this._boxMesh.uuid) return;
+      child.position.copy(this.worldToLocal(childrensWorldPositions[i]));
+    });
+    (_a = DIVECommunication.get(this.userData.id)) == null ? void 0 : _a.PerformAction("UPDATE_OBJECT", { id: this.userData.id, position: this.position });
   }
-};
-
-// src/constant/GridColors.ts
-var GRID_CENTER_LINE_COLOR = "#888888";
-var GRID_SIDE_LINE_COLOR = "#dddddd";
-
-// src/grid/Grid.ts
-init_VisibilityLayerMask();
-import { GridHelper, Object3D as Object3D10 } from "three";
-var DIVEGrid = class extends Object3D10 {
-  constructor() {
-    super();
-    this.name = "Grid";
-    const grid = new GridHelper(100, 100, GRID_CENTER_LINE_COLOR, GRID_SIDE_LINE_COLOR);
-    grid.material.depthTest = false;
-    grid.layers.mask = HELPER_LAYER_MASK;
-    this.add(grid);
+  /**
+   * Updates the bounding box of the group.
+   * @returns {Vector3} The new center of the bounding box.
+   */
+  updateBB() {
+    this._bb.makeEmpty();
+    this.children.forEach((child) => {
+      if (child.uuid === this._boxMesh.uuid) return;
+      this._bb.expandByObject(child);
+    });
+    return this._bb.getCenter(new Vector34());
   }
-  SetVisibility(visible) {
-    this.visible = visible;
+  updateBoxMesh() {
+    this._boxMesh.geometry = new BoxGeometry2(this._bb.max.x - this._bb.min.x, this._bb.max.y - this._bb.min.y, this._bb.max.z - this._bb.min.z);
+  }
+  onMove() {
+    var _a;
+    (_a = DIVECommunication.get(this.userData.id)) == null ? void 0 : _a.PerformAction("UPDATE_OBJECT", { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+  }
+  onSelect() {
+    var _a;
+    (_a = DIVECommunication.get(this.userData.id)) == null ? void 0 : _a.PerformAction("SELECT_OBJECT", { id: this.userData.id });
+  }
+  onDeselect() {
+    var _a;
+    (_a = DIVECommunication.get(this.userData.id)) == null ? void 0 : _a.PerformAction("DESELECT_OBJECT", { id: this.userData.id });
   }
 };
 
 // src/scene/root/Root.ts
-var DIVERoot = class extends Object3D11 {
-  get Floor() {
-    return this.floor;
-  }
-  get Grid() {
-    return this.grid;
-  }
+var DIVERoot = class extends Object3D8 {
   constructor() {
     super();
+    this.isDIVERoot = true;
     this.name = "Root";
-    this.lightRoot = new DIVELightRoot();
-    this.add(this.lightRoot);
-    this.modelRoot = new DIVEModelRoot();
-    this.add(this.modelRoot);
-    this.primitiveRoot = new DIVEPrimitiveRoot();
-    this.add(this.primitiveRoot);
-    this.floor = new DIVEFloor();
-    this.add(this.floor);
-    this.grid = new DIVEGrid();
-    this.add(this.grid);
+    this.loadingManager = new DIVELoadingManager();
   }
   ComputeSceneBB() {
-    const bb = new Box33();
-    this.modelRoot.traverse((object) => {
-      if ("isObject3D" in object) {
-        bb.expandByObject(object);
-      }
-    });
-    this.primitiveRoot.traverse((object) => {
+    const bb = new Box34();
+    this.traverse((object) => {
       if ("isObject3D" in object) {
         bb.expandByObject(object);
       }
@@ -1757,20 +1603,7 @@ var DIVERoot = class extends Object3D11 {
     return bb;
   }
   GetSceneObject(object) {
-    switch (object.entityType) {
-      case "pov": {
-        return void 0;
-      }
-      case "light": {
-        return this.lightRoot.GetLight(object);
-      }
-      case "model": {
-        return this.modelRoot.GetModel(object);
-      }
-      case "primitive": {
-        return this.primitiveRoot.GetPrimitive(object);
-      }
-    }
+    return this.children.find((object3D) => object3D.userData.id === object.id);
   }
   AddSceneObject(object) {
     switch (object.entityType) {
@@ -1778,15 +1611,19 @@ var DIVERoot = class extends Object3D11 {
         break;
       }
       case "light": {
-        this.lightRoot.UpdateLight(object);
+        this.updateLight(object);
         break;
       }
       case "model": {
-        this.modelRoot.UpdateModel(object);
+        this.updateModel(object);
         break;
       }
       case "primitive": {
-        this.primitiveRoot.UpdatePrimitive(object);
+        this.updatePrimitive(object);
+        break;
+      }
+      case "group": {
+        this.updateGroup(object);
         break;
       }
     }
@@ -1797,15 +1634,19 @@ var DIVERoot = class extends Object3D11 {
         break;
       }
       case "light": {
-        this.lightRoot.UpdateLight(object);
+        this.updateLight(object);
         break;
       }
       case "model": {
-        this.modelRoot.UpdateModel(object);
+        this.updateModel(object);
         break;
       }
       case "primitive": {
-        this.primitiveRoot.UpdatePrimitive(object);
+        this.updatePrimitive(object);
+        break;
+      }
+      case "group": {
+        this.updateGroup(object);
         break;
       }
     }
@@ -1816,15 +1657,19 @@ var DIVERoot = class extends Object3D11 {
         break;
       }
       case "light": {
-        this.lightRoot.DeleteLight(object);
+        this.deleteLight(object);
         break;
       }
       case "model": {
-        this.modelRoot.DeleteModel(object);
+        this.deleteModel(object);
         break;
       }
       case "primitive": {
-        this.primitiveRoot.DeletePrimitive(object);
+        this.deletePrimitive(object);
+        break;
+      }
+      case "group": {
+        this.deleteGroup(object);
         break;
       }
     }
@@ -1835,16 +1680,214 @@ var DIVERoot = class extends Object3D11 {
       case "light": {
         break;
       }
-      case "model": {
-        this.modelRoot.PlaceOnFloor(object);
-        break;
-      }
+      case "model":
       case "primitive": {
-        this.primitiveRoot.PlaceOnFloor(object);
+        this.placeOnFloor(object);
         break;
       }
     }
   }
+  updateLight(light) {
+    let sceneObject = this.GetSceneObject(light);
+    if (!sceneObject) {
+      switch (light.type) {
+        case "scene": {
+          sceneObject = new DIVESceneLight();
+          break;
+        }
+        case "ambient": {
+          sceneObject = new DIVEAmbientLight();
+          break;
+        }
+        case "point": {
+          sceneObject = new DIVEPointLight();
+          break;
+        }
+        default: {
+          console.warn(`Root.updateLight: Unknown light type: ${light.type}`);
+          return;
+        }
+      }
+      sceneObject.userData.id = light.id;
+      this.add(sceneObject);
+    }
+    if (light.name !== void 0 && light.name !== null) sceneObject.name = light.name;
+    if (light.position !== void 0 && light.position !== null) sceneObject.position.set(light.position.x, light.position.y, light.position.z);
+    if (light.intensity !== void 0 && light.intensity !== null) sceneObject.SetIntensity(light.intensity);
+    if (light.enabled !== void 0 && light.enabled !== null) sceneObject.SetEnabled(light.enabled);
+    if (light.color !== void 0 && light.color !== null) sceneObject.SetColor(new Color5(light.color));
+    if (light.visible !== void 0 && light.visible !== null) sceneObject.visible = light.visible;
+    if (light.parent !== void 0) this.setParent(__spreadProps(__spreadValues({}, light), { parent: light.parent }));
+  }
+  updateModel(model) {
+    let sceneObject = this.GetSceneObject(model);
+    if (!sceneObject) {
+      const created = new DIVEModel();
+      sceneObject = created;
+      sceneObject.userData.id = model.id;
+      this.add(sceneObject);
+    }
+    if (model.uri !== void 0) {
+      this.loadingManager.LoadGLTF(model.uri).then((gltf) => {
+        var _a;
+        sceneObject.SetModel(gltf);
+        (_a = DIVECommunication.get(model.id)) == null ? void 0 : _a.PerformAction("MODEL_LOADED", { id: model.id });
+      });
+    }
+    if (model.name !== void 0) sceneObject.name = model.name;
+    if (model.position !== void 0) sceneObject.SetPosition(model.position);
+    if (model.rotation !== void 0) sceneObject.SetRotation(model.rotation);
+    if (model.scale !== void 0) sceneObject.SetScale(model.scale);
+    if (model.visible !== void 0) sceneObject.SetVisibility(model.visible);
+    if (model.material !== void 0) sceneObject.SetMaterial(model.material);
+    if (model.parent !== void 0) this.setParent(__spreadProps(__spreadValues({}, model), { parent: model.parent }));
+  }
+  updatePrimitive(primitive) {
+    let sceneObject = this.GetSceneObject(primitive);
+    if (!sceneObject) {
+      const created = new DIVEPrimitive();
+      sceneObject = created;
+      sceneObject.userData.id = primitive.id;
+      this.add(sceneObject);
+    }
+    if (primitive.name !== void 0) sceneObject.name = primitive.name;
+    if (primitive.geometry !== void 0) sceneObject.SetGeometry(primitive.geometry);
+    if (primitive.position !== void 0) sceneObject.SetPosition(primitive.position);
+    if (primitive.rotation !== void 0) sceneObject.SetRotation(primitive.rotation);
+    if (primitive.scale !== void 0) sceneObject.SetScale(primitive.scale);
+    if (primitive.visible !== void 0) sceneObject.SetVisibility(primitive.visible);
+    if (primitive.material !== void 0) sceneObject.SetMaterial(primitive.material);
+    if (primitive.parent !== void 0) this.setParent(__spreadProps(__spreadValues({}, primitive), { parent: primitive.parent }));
+  }
+  updateGroup(group) {
+    let sceneObject = this.GetSceneObject(group);
+    if (!sceneObject) {
+      const created = new DIVEGroup();
+      sceneObject = created;
+      sceneObject.userData.id = group.id;
+      this.add(sceneObject);
+    }
+    if (group.name !== void 0) sceneObject.name = group.name;
+    if (group.position !== void 0) sceneObject.SetPosition(group.position);
+    if (group.rotation !== void 0) sceneObject.SetRotation(group.rotation);
+    if (group.scale !== void 0) sceneObject.SetScale(group.scale);
+    if (group.visible !== void 0) sceneObject.SetVisibility(group.visible);
+    if (group.bbVisible !== void 0) sceneObject.SetBoundingBoxVisibility(group.bbVisible);
+    if (group.parent !== void 0) this.setParent(__spreadProps(__spreadValues({}, group), { parent: group.parent }));
+  }
+  deleteLight(light) {
+    const sceneObject = this.GetSceneObject(light);
+    if (!sceneObject) {
+      console.warn(`Root.deleteLight: Light with id ${light.id} not found`);
+      return;
+    }
+    this.detachTransformControls(sceneObject);
+    this.remove(sceneObject);
+  }
+  deleteModel(model) {
+    const sceneObject = this.GetSceneObject(model);
+    if (!sceneObject) {
+      console.warn(`Root.deleteModel: Model with id ${model.id} not found`);
+      return;
+    }
+    this.detachTransformControls(sceneObject);
+    this.remove(sceneObject);
+  }
+  deletePrimitive(primitive) {
+    const sceneObject = this.GetSceneObject(primitive);
+    if (!sceneObject) {
+      console.warn(`Root.deletePrimitive: Primitive with id ${primitive.id} not found`);
+      return;
+    }
+    this.detachTransformControls(sceneObject);
+    this.remove(sceneObject);
+  }
+  deleteGroup(group) {
+    const sceneObject = this.GetSceneObject(group);
+    if (!sceneObject) {
+      console.warn(`Root.deleteGroup: Group with id ${group.id} not found`);
+      return;
+    }
+    this.detachTransformControls(sceneObject);
+    for (let i = sceneObject.children.length - 1; i >= 0; i--) {
+      this.attach(sceneObject.children[i]);
+    }
+    sceneObject.parent.remove(sceneObject);
+  }
+  placeOnFloor(object) {
+    const sceneObject = this.GetSceneObject(object);
+    if (!sceneObject) return;
+    sceneObject.PlaceOnFloor();
+  }
+  setParent(object) {
+    const sceneObject = this.GetSceneObject(object);
+    if (!sceneObject) return;
+    if (sceneObject.parent) {
+      sceneObject.parent.remove(sceneObject);
+    }
+    if (object.parent !== null) {
+      const parent = this.GetSceneObject(object.parent);
+      if (!parent) return;
+      parent.attach(sceneObject);
+    } else {
+      this.attach(sceneObject);
+    }
+  }
+  detachTransformControls(object) {
+    this.findScene(object).children.find((object2) => {
+      if ("isTransformControls" in object2) {
+        object2.detach();
+      }
+    });
+  }
+  findScene(object) {
+    if (object.parent !== null) {
+      return this.findScene(object.parent);
+    }
+    ;
+    return object;
+  }
+};
+
+// src/constant/GridColors.ts
+var GRID_CENTER_LINE_COLOR = "#888888";
+var GRID_SIDE_LINE_COLOR = "#dddddd";
+
+// src/grid/Grid.ts
+init_VisibilityLayerMask();
+import { GridHelper, Object3D as Object3D9 } from "three";
+var DIVEGrid = class extends Object3D9 {
+  constructor() {
+    super();
+    this.name = "Grid";
+    const grid = new GridHelper(100, 100, GRID_CENTER_LINE_COLOR, GRID_SIDE_LINE_COLOR);
+    grid.material.depthTest = false;
+    grid.layers.mask = HELPER_LAYER_MASK;
+    this.add(grid);
+  }
+  SetVisibility(visible) {
+    this.visible = visible;
+  }
+};
+
+// src/primitive/floor/Floor.ts
+init_VisibilityLayerMask();
+import { Color as Color6, Mesh as Mesh5, MeshStandardMaterial as MeshStandardMaterial3, PlaneGeometry } from "three";
+var DIVEFloor = class extends Mesh5 {
+  constructor() {
+    super(new PlaneGeometry(1e4, 1e4), new MeshStandardMaterial3({ color: new Color6(150 / 255, 150 / 255, 150 / 255) }));
+    this.isFloor = true;
+    this.name = "Floor";
+    this.layers.mask = PRODUCT_LAYER_MASK;
+    this.receiveShadow = true;
+    this.rotateX(-Math.PI / 2);
+  }
+  SetVisibility(visible) {
+    this.visible = visible;
+  }
+  SetColor(color) {
+    this.material.color = new Color6(color);
+  }
 };
 
 // src/scene/Scene.ts
@@ -1852,14 +1895,24 @@ var DIVEScene = class extends Scene2 {
   get Root() {
     return this.root;
   }
+  get Floor() {
+    return this.floor;
+  }
+  get Grid() {
+    return this.grid;
+  }
   constructor() {
     super();
-    this.background = new Color8(16777215);
+    this.background = new Color7(16777215);
     this.root = new DIVERoot();
     this.add(this.root);
+    this.floor = new DIVEFloor();
+    this.add(this.floor);
+    this.grid = new DIVEGrid();
+    this.add(this.grid);
   }
   SetBackground(color) {
-    this.background = new Color8(color);
+    this.background = new Color7(color);
   }
   ComputeSceneBB() {
     return this.Root.ComputeSceneBB();
@@ -1868,7 +1921,7 @@ var DIVEScene = class extends Scene2 {
     return this.Root.GetSceneObject(object);
   }
   AddSceneObject(object) {
-    this.Root.UpdateSceneObject(object);
+    this.Root.AddSceneObject(object);
   }
   UpdateSceneObject(object) {
     this.Root.UpdateSceneObject(object);
@@ -1886,7 +1939,7 @@ init_PerspectiveCamera();
 
 // src/controls/OrbitControls.ts
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
-import { MathUtils as MathUtils2, Vector3 as Vector34 } from "three";
+import { MathUtils as MathUtils2, Vector3 as Vector35 } from "three";
 import { Easing } from "@tweenjs/tween.js";
 var DIVEOrbitControlsDefaultSettings = {
   enableDamping: true,
@@ -1928,8 +1981,8 @@ var _DIVEOrbitControls = class _DIVEOrbitControls extends OrbitControls {
     this.dispose();
   }
   ComputeEncompassingView(bb) {
-    const center = bb.getCenter(new Vector34());
-    const size = bb.getSize(new Vector34());
+    const center = bb.getCenter(new Vector35());
+    const size = bb.getSize(new Vector35());
     const distance = Math.max(size.x, size.y, size.z) * 1.25;
     const direction = this.object.position.clone().normalize();
     return {
@@ -2097,7 +2150,7 @@ var DIVEAnimationSystem = class {
 
 // src/axiscamera/AxisCamera.ts
 init_VisibilityLayerMask();
-import { AxesHelper, Color as Color9, Matrix4, OrthographicCamera, Vector4 } from "three";
+import { AxesHelper, Color as Color8, Matrix4, OrthographicCamera, Vector4 } from "three";
 import SpriteText from "three-spritetext";
 
 // src/constant/AxisHelperColors.ts
@@ -2118,9 +2171,9 @@ var DIVEAxisCamera = class extends OrthographicCamera {
     this.axesHelper.material.depthTest = false;
     this.axesHelper.position.set(0, 0, -1);
     this.axesHelper.setColors(
-      new Color9(AxesColorRed),
-      new Color9(AxesColorGreen),
-      new Color9(AxesColorBlue)
+      new Color8(AxesColorRed),
+      new Color8(AxesColorGreen),
+      new Color8(AxesColorBlue)
     );
     const x = new SpriteText("X", 0.2, AxesColorRedLetter);
     const y = new SpriteText("Y", 0.2, AxesColorGreenLetter);
@@ -2221,58 +2274,6 @@ var getObjectDelta = (a, b) => {
   return delta;
 };
 
-// src/math/helper/shift.ts
-function shift(value, exponent) {
-  const subvalues = (value + "e").split("e");
-  return +(subvalues[0] + "e" + (+subvalues[1] + (exponent || 0)));
-}
-
-// src/math/ceil/ceilExp.ts
-function ceilExp(number, decimals = 0) {
-  const n = shift(number, +decimals);
-  return shift(Math.ceil(n), -decimals);
-}
-
-// src/math/floor/floorExp.ts
-function floorExp(number, decimals = 0) {
-  const n = shift(number, +decimals);
-  return shift(Math.floor(n), -decimals);
-}
-
-// src/math/round/roundExp.ts
-function roundExponential(number, decimals = 0) {
-  if (number < 0) return -roundExponential(-number, decimals);
-  const n = shift(number, +decimals);
-  return shift(Math.round(n), -decimals);
-}
-
-// src/math/signedAngleTo/signedAngleTo.ts
-function signedAngleTo(vecA, vecB, planeNormal) {
-  return Math.atan2(vecA.clone().cross(vecB).dot(planeNormal), vecB.clone().dot(vecA));
-}
-
-// src/math/toFixed/toFixedExp.ts
-function toFixedExp(number, decimals = 0) {
-  const n = shift(number, +decimals);
-  return shift(Math.round(n), -decimals).toFixed(decimals);
-}
-
-// src/math/truncate/truncateExp.ts
-function truncateExp(number, decimals = 0) {
-  const n = shift(number, +decimals);
-  return shift(Math.trunc(n), -decimals);
-}
-
-// src/math/index.ts
-var DIVEMath = {
-  ceilExp,
-  floorExp,
-  roundExp: roundExponential,
-  toFixedExp,
-  truncateExp,
-  signedAngleTo
-};
-
 // src/dive.ts
 import { generateUUID as generateUUID2 } from "three/src/math/MathUtils";
 
@@ -2373,6 +2374,58 @@ var DIVEInfo = class {
 };
 DIVEInfo._supportsWebXR = null;
 
+// src/math/helper/shift.ts
+function shift(value, exponent) {
+  const subvalues = (value + "e").split("e");
+  return +(subvalues[0] + "e" + (+subvalues[1] + (exponent || 0)));
+}
+
+// src/math/ceil/ceilExp.ts
+function ceilExp(number, decimals = 0) {
+  const n = shift(number, +decimals);
+  return shift(Math.ceil(n), -decimals);
+}
+
+// src/math/floor/floorExp.ts
+function floorExp(number, decimals = 0) {
+  const n = shift(number, +decimals);
+  return shift(Math.floor(n), -decimals);
+}
+
+// src/math/round/roundExp.ts
+function roundExponential(number, decimals = 0) {
+  if (number < 0) return -roundExponential(-number, decimals);
+  const n = shift(number, +decimals);
+  return shift(Math.round(n), -decimals);
+}
+
+// src/math/signedAngleTo/signedAngleTo.ts
+function signedAngleTo(vecA, vecB, planeNormal) {
+  return Math.atan2(vecA.clone().cross(vecB).dot(planeNormal), vecB.clone().dot(vecA));
+}
+
+// src/math/toFixed/toFixedExp.ts
+function toFixedExp(number, decimals = 0) {
+  const n = shift(number, +decimals);
+  return shift(Math.round(n), -decimals).toFixed(decimals);
+}
+
+// src/math/truncate/truncateExp.ts
+function truncateExp(number, decimals = 0) {
+  const n = shift(number, +decimals);
+  return shift(Math.trunc(n), -decimals);
+}
+
+// src/math/index.ts
+var DIVEMath = {
+  ceilExp,
+  floorExp,
+  roundExp: roundExponential,
+  toFixedExp,
+  truncateExp,
+  signedAngleTo
+};
+
 // src/dive.ts
 var DIVEDefaultSettings = {
   autoResize: true,