@shopware-ag/dive 1.8.0 → 1.9.0

package/build/dive.d.cts

@@ -1,4 +1,4 @@
-import { ShadowMapType, ToneMapping, WebGLRenderer, Scene, Camera, PerspectiveCamera, Box3, Vector3Like, Mesh, ColorRepresentation, Object3D, Intersection, Vector2, Raycaster, Vector3 } from 'three';
+import { ShadowMapType, ToneMapping, WebGLRenderer, Scene, Camera, PerspectiveCamera, Box3, Vector3Like, Texture, Mesh, ColorRepresentation, Object3D, Intersection, Vector2, Raycaster, Vector3 } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import { Tween } from '@tweenjs/tween.js';
 import { TransformControls } from 'three/examples/jsm/Addons';
@@ -205,7 +205,7 @@ interface PLACE_ON_FLOOR {
 type COMBaseEntity = {
     id: string;
     name: string;
-    entityType: 'pov' | 'light' | 'model';
+    entityType: 'pov' | 'light' | 'model' | 'primitive';
     visible: boolean;
 };
 type COMPov = COMBaseEntity & {
@@ -227,7 +227,27 @@ type COMModel = COMBaseEntity & {
     scale: Vector3Like;
     loaded: boolean;
 };
-type COMEntity = COMPov | COMLight | COMModel;
+type COMGeometry = {
+    name: string;
+    width: number;
+    height: number;
+    depth: number;
+};
+type COMMaterial = {
+    color: string | number;
+    roughness: number;
+    roughnessMap: Texture | null;
+    metalness: number;
+    metalnessMap: Texture | null;
+};
+type COMPrimitive = COMBaseEntity & {
+    position: Vector3Like;
+    rotation: Vector3Like;
+    scale: Vector3Like;
+    geometry: COMGeometry;
+    material: COMMaterial;
+};
+type COMEntity = COMPov | COMLight | COMModel | COMPrimitive;
 
 interface GET_ALL_OBJECTS {
     'PAYLOAD': Map<string, COMEntity>;
@@ -386,6 +406,7 @@ declare class DIVEGrid extends Object3D {
 declare class DIVERoot extends Object3D {
     private lightRoot;
     private modelRoot;
+    private primitiveRoot;
     private floor;
     private grid;
     get Floor(): DIVEFloor;
@@ -396,7 +417,7 @@ declare class DIVERoot extends Object3D {
     AddSceneObject(object: COMEntity): void;
     UpdateSceneObject(object: Partial<COMEntity>): void;
     DeleteSceneObject(object: Partial<COMEntity>): void;
-    PlaceOnFloor(object: Partial<COMModel>): void;
+    PlaceOnFloor(object: Partial<COMEntity>): void;
 }
 
 /**

package/build/dive.d.ts

@@ -1,4 +1,4 @@
-import { ShadowMapType, ToneMapping, WebGLRenderer, Scene, Camera, PerspectiveCamera, Box3, Vector3Like, Mesh, ColorRepresentation, Object3D, Intersection, Vector2, Raycaster, Vector3 } from 'three';
+import { ShadowMapType, ToneMapping, WebGLRenderer, Scene, Camera, PerspectiveCamera, Box3, Vector3Like, Texture, Mesh, ColorRepresentation, Object3D, Intersection, Vector2, Raycaster, Vector3 } from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import { Tween } from '@tweenjs/tween.js';
 import { TransformControls } from 'three/examples/jsm/Addons';
@@ -205,7 +205,7 @@ interface PLACE_ON_FLOOR {
 type COMBaseEntity = {
     id: string;
     name: string;
-    entityType: 'pov' | 'light' | 'model';
+    entityType: 'pov' | 'light' | 'model' | 'primitive';
     visible: boolean;
 };
 type COMPov = COMBaseEntity & {
@@ -227,7 +227,27 @@ type COMModel = COMBaseEntity & {
     scale: Vector3Like;
     loaded: boolean;
 };
-type COMEntity = COMPov | COMLight | COMModel;
+type COMGeometry = {
+    name: string;
+    width: number;
+    height: number;
+    depth: number;
+};
+type COMMaterial = {
+    color: string | number;
+    roughness: number;
+    roughnessMap: Texture | null;
+    metalness: number;
+    metalnessMap: Texture | null;
+};
+type COMPrimitive = COMBaseEntity & {
+    position: Vector3Like;
+    rotation: Vector3Like;
+    scale: Vector3Like;
+    geometry: COMGeometry;
+    material: COMMaterial;
+};
+type COMEntity = COMPov | COMLight | COMModel | COMPrimitive;
 
 interface GET_ALL_OBJECTS {
     'PAYLOAD': Map<string, COMEntity>;
@@ -386,6 +406,7 @@ declare class DIVEGrid extends Object3D {
 declare class DIVERoot extends Object3D {
     private lightRoot;
     private modelRoot;
+    private primitiveRoot;
     private floor;
     private grid;
     get Floor(): DIVEFloor;
@@ -396,7 +417,7 @@ declare class DIVERoot extends Object3D {
     AddSceneObject(object: COMEntity): void;
     UpdateSceneObject(object: Partial<COMEntity>): void;
     DeleteSceneObject(object: Partial<COMEntity>): void;
-    PlaceOnFloor(object: Partial<COMModel>): void;
+    PlaceOnFloor(object: Partial<COMEntity>): void;
 }
 
 /**

package/build/dive.js

@@ -649,10 +649,10 @@ var DIVERenderer = class extends WebGLRenderer {
 };
 
 // src/scene/Scene.ts
-import { Color as Color6, Scene as Scene2 } from "three";
+import { Color as Color7, Scene as Scene2 } from "three";
 
 // src/scene/root/Root.ts
-import { Box3 as Box32, Object3D as Object3D9 } from "three";
+import { Box3 as Box33, Object3D as Object3D11 } from "three";
 
 // src/scene/root/lightroot/LightRoot.ts
 import { Color as Color4, Object3D as Object3D5 } from "three";
@@ -1388,12 +1388,265 @@ var DIVEModelRoot = class extends Object3D7 {
   }
 };
 
+// src/scene/root/primitiveroot/PrimitiveRoot.ts
+import { Object3D as Object3D9 } from "three";
+
+// src/primitive/Primitive.ts
+import { Box3 as Box32, BoxGeometry, BufferGeometry, Color as Color5, CylinderGeometry, Float32BufferAttribute, Mesh as Mesh2, Object3D as Object3D8, Raycaster as Raycaster3, SphereGeometry as SphereGeometry2, Uint32BufferAttribute, Vector3 as Vector33 } from "three";
+init_VisibilityLayerMask();
+var DIVEPrimitive = class extends Object3D8 {
+  constructor() {
+    super();
+    this.isSelectable = true;
+    this.isMoveable = true;
+    this.gizmo = null;
+    this.layers.mask = PRODUCT_LAYER_MASK;
+    this._mesh = new Mesh2();
+    this._mesh.layers.mask = PRODUCT_LAYER_MASK;
+    this._mesh.castShadow = true;
+    this._mesh.receiveShadow = true;
+    this.add(this._mesh);
+    this._boundingBox = new Box32();
+  }
+  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 Vector33(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 Color5(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 Vector33()).multiply(this.scale));
+    bbBottomCenter.y = bottomY + this.position.y;
+    const raycaster = new Raycaster3(bbBottomCenter, new Vector33(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 Vector33(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 BufferGeometry();
+    }
+  }
+  createCylinderGeometry(geometry) {
+    return new CylinderGeometry(geometry.width * 2, geometry.width * 2, geometry.height, 64);
+  }
+  createSphereGeometry(geometry) {
+    return new SphereGeometry2(geometry.width * 2, 64);
+  }
+  createPyramidGeometry(geometry) {
+    const geo = new BufferGeometry();
+    const { width, height, depth } = geometry;
+    geo.setAttribute("position", new 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 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 BoxGeometry(geometry.width, geometry.height, geometry.depth);
+  }
+  createConeGeometry(geometry) {
+    return new CylinderGeometry(0, geometry.width * 2, geometry.height, 64);
+  }
+  createWallGeometry(geometry) {
+    return new BoxGeometry(geometry.width, geometry.height, geometry.depth, 16);
+  }
+  createPlaneGeometry(geometry) {
+    return new BoxGeometry(geometry.width, geometry.height, geometry.depth);
+  }
+};
+
+// src/scene/root/primitiveroot/PrimitiveRoot.ts
+var DIVEPrimitiveRoot = class extends Object3D9 {
+  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
 init_VisibilityLayerMask();
-import { Color as Color5, Mesh as Mesh2, MeshStandardMaterial, PlaneGeometry } from "three";
-var DIVEFloor = class extends Mesh2 {
+import { Color as Color6, Mesh as Mesh3, MeshStandardMaterial as MeshStandardMaterial2, PlaneGeometry } from "three";
+var DIVEFloor = class extends Mesh3 {
   constructor() {
-    super(new PlaneGeometry(1e4, 1e4), new MeshStandardMaterial({ color: new Color5(150 / 255, 150 / 255, 150 / 255) }));
+    super(new PlaneGeometry(1e4, 1e4), new MeshStandardMaterial2({ color: new Color6(150 / 255, 150 / 255, 150 / 255) }));
     this.isFloor = true;
     this.name = "Floor";
     this.layers.mask = PRODUCT_LAYER_MASK;
@@ -1404,7 +1657,7 @@ var DIVEFloor = class extends Mesh2 {
     this.visible = visible;
   }
   SetColor(color) {
-    this.material.color = new Color5(color);
+    this.material.color = new Color6(color);
   }
 };
 
@@ -1414,8 +1667,8 @@ var GRID_SIDE_LINE_COLOR = "#dddddd";
 
 // src/grid/Grid.ts
 init_VisibilityLayerMask();
-import { GridHelper, Object3D as Object3D8 } from "three";
-var DIVEGrid = class extends Object3D8 {
+import { GridHelper, Object3D as Object3D10 } from "three";
+var DIVEGrid = class extends Object3D10 {
   constructor() {
     super();
     this.name = "Grid";
@@ -1430,7 +1683,7 @@ var DIVEGrid = class extends Object3D8 {
 };
 
 // src/scene/root/Root.ts
-var DIVERoot = class extends Object3D9 {
+var DIVERoot = class extends Object3D11 {
   get Floor() {
     return this.floor;
   }
@@ -1444,18 +1697,25 @@ var DIVERoot = class extends Object3D9 {
     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 Box32();
+    const bb = new Box33();
     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) {
@@ -1469,6 +1729,9 @@ var DIVERoot = class extends Object3D9 {
       case "model": {
         return this.modelRoot.GetModel(object);
       }
+      case "primitive": {
+        return this.primitiveRoot.GetPrimitive(object);
+      }
     }
   }
   AddSceneObject(object) {
@@ -1484,6 +1747,10 @@ var DIVERoot = class extends Object3D9 {
         this.modelRoot.UpdateModel(object);
         break;
       }
+      case "primitive": {
+        this.primitiveRoot.UpdatePrimitive(object);
+        break;
+      }
     }
   }
   UpdateSceneObject(object) {
@@ -1499,6 +1766,10 @@ var DIVERoot = class extends Object3D9 {
         this.modelRoot.UpdateModel(object);
         break;
       }
+      case "primitive": {
+        this.primitiveRoot.UpdatePrimitive(object);
+        break;
+      }
     }
   }
   DeleteSceneObject(object) {
@@ -1514,10 +1785,27 @@ var DIVERoot = class extends Object3D9 {
         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;
+      }
+    }
   }
 };
 
@@ -1528,12 +1816,12 @@ var DIVEScene = class extends Scene2 {
   }
   constructor() {
     super();
-    this.background = new Color6(16777215);
+    this.background = new Color7(16777215);
     this.root = new DIVERoot();
     this.add(this.root);
   }
   SetBackground(color) {
-    this.background = new Color6(color);
+    this.background = new Color7(color);
   }
   ComputeSceneBB() {
     return this.Root.ComputeSceneBB();
@@ -1560,7 +1848,7 @@ init_PerspectiveCamera();
 
 // src/controls/OrbitControls.ts
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
-import { MathUtils as MathUtils2, Vector3 as Vector33 } from "three";
+import { MathUtils as MathUtils2, Vector3 as Vector34 } from "three";
 import { Easing } from "@tweenjs/tween.js";
 var DIVEOrbitControlsDefaultSettings = {
   enableDamping: true,
@@ -1602,8 +1890,8 @@ var _DIVEOrbitControls = class _DIVEOrbitControls extends OrbitControls {
     this.dispose();
   }
   ComputeEncompassingView(bb) {
-    const center = bb.getCenter(new Vector33());
-    const size = bb.getSize(new Vector33());
+    const center = bb.getCenter(new Vector34());
+    const size = bb.getSize(new Vector34());
     const distance = Math.max(size.x, size.y, size.z) * 1.25;
     const direction = this.object.position.clone().normalize();
     return {
@@ -1771,7 +2059,7 @@ var DIVEAnimationSystem = class {
 
 // src/axiscamera/AxisCamera.ts
 init_VisibilityLayerMask();
-import { AxesHelper, Color as Color7, Matrix4, OrthographicCamera, Vector4 } from "three";
+import { AxesHelper, Color as Color8, Matrix4, OrthographicCamera, Vector4 } from "three";
 import SpriteText from "three-spritetext";
 
 // src/constant/AxisHelperColors.ts
@@ -1792,9 +2080,9 @@ var DIVEAxisCamera = class extends OrthographicCamera {
     this.axesHelper.material.depthTest = false;
     this.axesHelper.position.set(0, 0, -1);
     this.axesHelper.setColors(
-      new Color7(AxesColorRed),
-      new Color7(AxesColorGreen),
-      new Color7(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);