@shopware-ag/dive 1.8.0 → 1.10.0

package/build/dive.cjs

@@ -671,10 +671,10 @@ var DIVERenderer = class extends import_three.WebGLRenderer {
 };
 
 // src/scene/Scene.ts
-var import_three13 = require("three");
+var import_three15 = require("three");
 
 // src/scene/root/Root.ts
-var import_three12 = require("three");
+var import_three14 = require("three");
 
 // src/scene/root/lightroot/LightRoot.ts
 var import_three7 = require("three");
@@ -1234,6 +1234,8 @@ var DIVEModel = class extends import_three8.Object3D {
     this.isSelectable = true;
     this.isMoveable = true;
     this.gizmo = null;
+    this._mesh = null;
+    this._material = null;
     this.layers.mask = PRODUCT_LAYER_MASK;
     this.boundingBox = new import_three8.Box3();
   }
@@ -1244,6 +1246,14 @@ var DIVEModel = class extends import_three8.Object3D {
       child.receiveShadow = true;
       child.layers.mask = this.layers.mask;
       this.boundingBox.expandByObject(child);
+      if (!this._mesh && "isMesh" in child) {
+        this._mesh = child;
+        if (this._material) {
+          this._mesh.material = this._material;
+        } else {
+          this._material = child.material;
+        }
+      }
     });
     this.add(gltf.scene);
   }
@@ -1261,6 +1271,28 @@ var DIVEModel = class extends import_three8.Object3D {
       child.visible = visible;
     });
   }
+  SetMaterial(material) {
+    console.error("HERE", this._mesh);
+    if (!this._material) {
+      this._material = new import_three8.MeshStandardMaterial();
+    }
+    this._material.color = new import_three8.Color(material.color);
+    if (material.roughnessMap) {
+      this._material.roughnessMap = material.roughnessMap;
+      this._material.roughness = 1;
+    } else {
+      this._material.roughness = material.roughness;
+    }
+    if (material.metalnessMap) {
+      this._material.metalnessMap = material.metalnessMap;
+      this._material.metalness = 0;
+    } else {
+      this._material.metalness = material.metalness;
+    }
+    if (this._mesh) {
+      this._mesh.material = this._material;
+    }
+  }
   SetToWorldOrigin() {
     var _a;
     this.position.set(0, 0, 0);
@@ -1376,6 +1408,7 @@ var DIVEModelRoot = class extends import_three9.Object3D {
     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) {
@@ -1410,12 +1443,265 @@ var DIVEModelRoot = class extends import_three9.Object3D {
   }
 };
 
-// src/primitive/floor/Floor.ts
+// src/scene/root/primitiveroot/PrimitiveRoot.ts
+var import_three11 = require("three");
+
+// src/primitive/Primitive.ts
 var import_three10 = require("three");
 init_VisibilityLayerMask();
-var DIVEFloor = class extends import_three10.Mesh {
+var DIVEPrimitive = class extends import_three10.Object3D {
+  constructor() {
+    super();
+    this.isSelectable = true;
+    this.isMoveable = true;
+    this.gizmo = null;
+    this.layers.mask = PRODUCT_LAYER_MASK;
+    this._mesh = new import_three10.Mesh();
+    this._mesh.layers.mask = PRODUCT_LAYER_MASK;
+    this._mesh.castShadow = true;
+    this._mesh.receiveShadow = true;
+    this.add(this._mesh);
+    this._boundingBox = new import_three10.Box3();
+  }
+  SetGeometry(geometry) {
+    this.clear();
+    this._mesh.geometry = this.assembleGeometry(geometry);
+    this._boundingBox.setFromObject(this._mesh);
+  }
+  SetPosition(position) {
+    this.position.set(position.x, position.y, position.z);
+  }
+  SetRotation(rotation) {
+    this.rotation.setFromVector3(new import_three10.Vector3(rotation.x, rotation.y, rotation.z));
+  }
+  SetScale(scale) {
+    this.scale.set(scale.x, scale.y, scale.z);
+  }
+  SetVisibility(visible) {
+    this.traverse((child) => {
+      child.visible = visible;
+    });
+  }
+  SetMaterial(material) {
+    const primitiveMaterial = this._mesh.material;
+    primitiveMaterial.color = new import_three10.Color(material.color);
+    if (material.roughnessMap) {
+      primitiveMaterial.roughnessMap = material.roughnessMap;
+      primitiveMaterial.roughness = 1;
+    } else {
+      primitiveMaterial.roughness = material.roughness;
+    }
+    if (material.metalnessMap) {
+      primitiveMaterial.metalnessMap = material.metalnessMap;
+      primitiveMaterial.metalness = 0;
+    } else {
+      primitiveMaterial.metalness = material.metalness;
+    }
+  }
+  SetToWorldOrigin() {
+    var _a;
+    this.position.set(0, 0, 0);
+    (_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 });
+  }
+  PlaceOnFloor() {
+    var _a;
+    this.position.y = -this._boundingBox.min.y * this.scale.y;
+    (_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 });
+  }
+  DropIt() {
+    var _a;
+    if (!this.parent) {
+      console.warn("DIVEModel: DropIt() called on a model that is not in the scene.", this);
+      return;
+    }
+    const bottomY = this._boundingBox.min.y * this.scale.y;
+    const bbBottomCenter = this.localToWorld(this._boundingBox.getCenter(new import_three10.Vector3()).multiply(this.scale));
+    bbBottomCenter.y = bottomY + this.position.y;
+    const raycaster = new import_three10.Raycaster(bbBottomCenter, new import_three10.Vector3(0, -1, 0));
+    raycaster.layers.mask = PRODUCT_LAYER_MASK;
+    const intersections = raycaster.intersectObjects(findSceneRecursive(this).Root.children, true);
+    if (intersections.length > 0) {
+      const mesh = intersections[0].object;
+      mesh.geometry.computeBoundingBox();
+      const meshBB = mesh.geometry.boundingBox;
+      const worldPos = mesh.localToWorld(meshBB.max.clone());
+      const oldPos = this.position.clone();
+      const newPos = this.position.clone().setY(worldPos.y).sub(new import_three10.Vector3(0, bottomY, 0));
+      this.position.copy(newPos);
+      if (this.position.y === oldPos.y) return;
+      (_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 });
+    }
+  }
+  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 });
+  }
+  assembleGeometry(geometry) {
+    switch (geometry.name) {
+      case "cylinder":
+        return this.createCylinderGeometry(geometry);
+      case "sphere":
+        return this.createSphereGeometry(geometry);
+      case "pyramid":
+        return this.createPyramidGeometry(geometry);
+      case "box":
+        return this.createBoxGeometry(geometry);
+      case "cone":
+        return this.createConeGeometry(geometry);
+      case "wall":
+        return this.createWallGeometry(geometry);
+      case "plane":
+        return this.createPlaneGeometry(geometry);
+      default:
+        return new import_three10.BufferGeometry();
+    }
+  }
+  createCylinderGeometry(geometry) {
+    return new import_three10.CylinderGeometry(geometry.width * 2, geometry.width * 2, geometry.height, 64);
+  }
+  createSphereGeometry(geometry) {
+    return new import_three10.SphereGeometry(geometry.width * 2, 64);
+  }
+  createPyramidGeometry(geometry) {
+    const geo = new import_three10.BufferGeometry();
+    const { width, height, depth } = geometry;
+    geo.setAttribute("position", new import_three10.Float32BufferAttribute([
+      width / 2,
+      0,
+      depth / 2,
+      // right back
+      width / 2,
+      0,
+      -depth / 2,
+      // right front
+      -width / 2,
+      0,
+      -depth / 2,
+      // left front
+      -width / 2,
+      0,
+      depth / 2,
+      // left back
+      0,
+      height,
+      0
+      // top
+    ], 3));
+    geo.setIndex(new import_three10.Uint32BufferAttribute([
+      1,
+      0,
+      4,
+      2,
+      1,
+      4,
+      3,
+      2,
+      4,
+      3,
+      0,
+      4,
+      0,
+      1,
+      2,
+      0,
+      2,
+      3
+    ], 1));
+    return geo;
+  }
+  createBoxGeometry(geometry) {
+    return new import_three10.BoxGeometry(geometry.width, geometry.height, geometry.depth);
+  }
+  createConeGeometry(geometry) {
+    return new import_three10.CylinderGeometry(0, geometry.width * 2, geometry.height, 64);
+  }
+  createWallGeometry(geometry) {
+    return new import_three10.BoxGeometry(geometry.width, geometry.height, geometry.depth, 16);
+  }
+  createPlaneGeometry(geometry) {
+    return new import_three10.BoxGeometry(geometry.width, geometry.height, geometry.depth);
+  }
+};
+
+// src/scene/root/primitiveroot/PrimitiveRoot.ts
+var DIVEPrimitiveRoot = class extends import_three11.Object3D {
+  constructor() {
+    super();
+    this.name = "PrimitiveRoot";
+  }
+  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);
+  }
+  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);
+  }
+  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();
+      }
+    });
+    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();
+  }
+};
+
+// src/primitive/floor/Floor.ts
+var import_three12 = require("three");
+init_VisibilityLayerMask();
+var DIVEFloor = class extends import_three12.Mesh {
   constructor() {
-    super(new import_three10.PlaneGeometry(1e4, 1e4), new import_three10.MeshStandardMaterial({ color: new import_three10.Color(150 / 255, 150 / 255, 150 / 255) }));
+    super(new import_three12.PlaneGeometry(1e4, 1e4), new import_three12.MeshStandardMaterial({ color: new import_three12.Color(150 / 255, 150 / 255, 150 / 255) }));
     this.isFloor = true;
     this.name = "Floor";
     this.layers.mask = PRODUCT_LAYER_MASK;
@@ -1426,7 +1712,7 @@ var DIVEFloor = class extends import_three10.Mesh {
     this.visible = visible;
   }
   SetColor(color) {
-    this.material.color = new import_three10.Color(color);
+    this.material.color = new import_three12.Color(color);
   }
 };
 
@@ -1436,12 +1722,12 @@ var GRID_SIDE_LINE_COLOR = "#dddddd";
 
 // src/grid/Grid.ts
 init_VisibilityLayerMask();
-var import_three11 = require("three");
-var DIVEGrid = class extends import_three11.Object3D {
+var import_three13 = require("three");
+var DIVEGrid = class extends import_three13.Object3D {
   constructor() {
     super();
     this.name = "Grid";
-    const grid = new import_three11.GridHelper(100, 100, GRID_CENTER_LINE_COLOR, GRID_SIDE_LINE_COLOR);
+    const grid = new import_three13.GridHelper(100, 100, GRID_CENTER_LINE_COLOR, GRID_SIDE_LINE_COLOR);
     grid.material.depthTest = false;
     grid.layers.mask = HELPER_LAYER_MASK;
     this.add(grid);
@@ -1452,7 +1738,7 @@ var DIVEGrid = class extends import_three11.Object3D {
 };
 
 // src/scene/root/Root.ts
-var DIVERoot = class extends import_three12.Object3D {
+var DIVERoot = class extends import_three14.Object3D {
   get Floor() {
     return this.floor;
   }
@@ -1466,18 +1752,25 @@ var DIVERoot = class extends import_three12.Object3D {
     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);
   }
   ComputeSceneBB() {
-    const bb = new import_three12.Box3();
+    const bb = new import_three14.Box3();
     this.modelRoot.traverse((object) => {
       if ("isObject3D" in object) {
         bb.expandByObject(object);
       }
     });
+    this.primitiveRoot.traverse((object) => {
+      if ("isObject3D" in object) {
+        bb.expandByObject(object);
+      }
+    });
     return bb;
   }
   GetSceneObject(object) {
@@ -1491,6 +1784,9 @@ var DIVERoot = class extends import_three12.Object3D {
       case "model": {
         return this.modelRoot.GetModel(object);
       }
+      case "primitive": {
+        return this.primitiveRoot.GetPrimitive(object);
+      }
     }
   }
   AddSceneObject(object) {
@@ -1506,6 +1802,10 @@ var DIVERoot = class extends import_three12.Object3D {
         this.modelRoot.UpdateModel(object);
         break;
       }
+      case "primitive": {
+        this.primitiveRoot.UpdatePrimitive(object);
+        break;
+      }
     }
   }
   UpdateSceneObject(object) {
@@ -1521,6 +1821,10 @@ var DIVERoot = class extends import_three12.Object3D {
         this.modelRoot.UpdateModel(object);
         break;
       }
+      case "primitive": {
+        this.primitiveRoot.UpdatePrimitive(object);
+        break;
+      }
     }
   }
   DeleteSceneObject(object) {
@@ -1536,26 +1840,43 @@ var DIVERoot = class extends import_three12.Object3D {
         this.modelRoot.DeleteModel(object);
         break;
       }
+      case "primitive": {
+        this.primitiveRoot.DeletePrimitive(object);
+        break;
+      }
     }
   }
   PlaceOnFloor(object) {
-    this.modelRoot.PlaceOnFloor(object);
+    switch (object.entityType) {
+      case "pov":
+      case "light": {
+        break;
+      }
+      case "model": {
+        this.modelRoot.PlaceOnFloor(object);
+        break;
+      }
+      case "primitive": {
+        this.primitiveRoot.PlaceOnFloor(object);
+        break;
+      }
+    }
   }
 };
 
 // src/scene/Scene.ts
-var DIVEScene = class extends import_three13.Scene {
+var DIVEScene = class extends import_three15.Scene {
   get Root() {
     return this.root;
   }
   constructor() {
     super();
-    this.background = new import_three13.Color(16777215);
+    this.background = new import_three15.Color(16777215);
     this.root = new DIVERoot();
     this.add(this.root);
   }
   SetBackground(color) {
-    this.background = new import_three13.Color(color);
+    this.background = new import_three15.Color(color);
   }
   ComputeSceneBB() {
     return this.Root.ComputeSceneBB();
@@ -1582,7 +1903,7 @@ init_PerspectiveCamera();
 
 // src/controls/OrbitControls.ts
 var import_OrbitControls = require("three/examples/jsm/controls/OrbitControls");
-var import_three14 = require("three");
+var import_three16 = require("three");
 var import_tween = require("@tweenjs/tween.js");
 var DIVEOrbitControlsDefaultSettings = {
   enableDamping: true,
@@ -1624,8 +1945,8 @@ var _DIVEOrbitControls = class _DIVEOrbitControls extends import_OrbitControls.O
     this.dispose();
   }
   ComputeEncompassingView(bb) {
-    const center = bb.getCenter(new import_three14.Vector3());
-    const size = bb.getSize(new import_three14.Vector3());
+    const center = bb.getCenter(new import_three16.Vector3());
+    const size = bb.getSize(new import_three16.Vector3());
     const distance = Math.max(size.x, size.y, size.z) * 1.25;
     const direction = this.object.position.clone().normalize();
     return {
@@ -1636,7 +1957,7 @@ var _DIVEOrbitControls = class _DIVEOrbitControls extends import_OrbitControls.O
   ZoomIn(by) {
     const zoomBy = by || _DIVEOrbitControls.DEFAULT_ZOOM_FACTOR;
     const { minDistance, maxDistance } = this;
-    this.minDistance = this.maxDistance = import_three14.MathUtils.clamp(this.getDistance() - zoomBy, minDistance + zoomBy, maxDistance - zoomBy);
+    this.minDistance = this.maxDistance = import_three16.MathUtils.clamp(this.getDistance() - zoomBy, minDistance + zoomBy, maxDistance - zoomBy);
     this.update();
     this.minDistance = minDistance;
     this.maxDistance = maxDistance;
@@ -1644,7 +1965,7 @@ var _DIVEOrbitControls = class _DIVEOrbitControls extends import_OrbitControls.O
   ZoomOut(by) {
     const zoomBy = by || _DIVEOrbitControls.DEFAULT_ZOOM_FACTOR;
     const { minDistance, maxDistance } = this;
-    this.minDistance = this.maxDistance = import_three14.MathUtils.clamp(this.getDistance() + zoomBy, minDistance + zoomBy, maxDistance - zoomBy);
+    this.minDistance = this.maxDistance = import_three16.MathUtils.clamp(this.getDistance() + zoomBy, minDistance + zoomBy, maxDistance - zoomBy);
     this.update();
     this.minDistance = minDistance;
     this.maxDistance = maxDistance;
@@ -1792,7 +2113,7 @@ var DIVEAnimationSystem = class {
 };
 
 // src/axiscamera/AxisCamera.ts
-var import_three15 = require("three");
+var import_three17 = require("three");
 var import_three_spritetext = __toESM(require("three-spritetext"), 1);
 init_VisibilityLayerMask();
 
@@ -1805,18 +2126,18 @@ var AxesColorGreen = AxesColorGreenLetter;
 var AxesColorBlue = AxesColorBlueLetter;
 
 // src/axiscamera/AxisCamera.ts
-var DIVEAxisCamera = class extends import_three15.OrthographicCamera {
+var DIVEAxisCamera = class extends import_three17.OrthographicCamera {
   constructor(renderer, scene, controls) {
     super(-1, 1, 1, -1, 0.1, 100);
     this.layers.mask = COORDINATE_LAYER_MASK;
-    this.axesHelper = new import_three15.AxesHelper(0.5);
+    this.axesHelper = new import_three17.AxesHelper(0.5);
     this.axesHelper.layers.mask = COORDINATE_LAYER_MASK;
     this.axesHelper.material.depthTest = false;
     this.axesHelper.position.set(0, 0, -1);
     this.axesHelper.setColors(
-      new import_three15.Color(AxesColorRed),
-      new import_three15.Color(AxesColorGreen),
-      new import_three15.Color(AxesColorBlue)
+      new import_three17.Color(AxesColorRed),
+      new import_three17.Color(AxesColorGreen),
+      new import_three17.Color(AxesColorBlue)
     );
     const x = new import_three_spritetext.default("X", 0.2, AxesColorRedLetter);
     const y = new import_three_spritetext.default("Y", 0.2, AxesColorGreenLetter);
@@ -1834,7 +2155,7 @@ var DIVEAxisCamera = class extends import_three15.OrthographicCamera {
     this._renderer = renderer;
     this._scene = scene;
     this._scene.add(this);
-    const restoreViewport = new import_three15.Vector4();
+    const restoreViewport = new import_three17.Vector4();
     this._renderCallbackId = renderer.AddPostRenderCallback(() => {
       const restoreBackground = scene.background;
       scene.background = null;
@@ -1853,7 +2174,7 @@ var DIVEAxisCamera = class extends import_three15.OrthographicCamera {
     this._scene.remove(this);
   }
   SetFromCameraMatrix(matrix) {
-    this.axesHelper.rotation.setFromRotationMatrix(new import_three15.Matrix4().extractRotation(matrix).invert());
+    this.axesHelper.rotation.setFromRotationMatrix(new import_three17.Matrix4().extractRotation(matrix).invert());
   }
 };