@shopware-ag/dive 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware-ag/dive",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Shopware Spatial Framework",
   "type": "module",
   "main": "./build/dive.cjs",

package/src/__test__/DIVE.test.ts

@@ -183,6 +183,8 @@ jest.mock('../axiscamera/AxisCamera.ts', () => {
     });
 });
 
+console.log = jest.fn();
+
 describe('dive/DIVE', () => {
     it('should QuickView', () => {
         const dive = DIVE.QuickView('test_uri');
@@ -193,7 +195,6 @@ describe('dive/DIVE', () => {
         const dive = new DIVE();
         expect(dive).toBeDefined();
         expect((window as any).DIVE.PrintScene).toBeDefined();
-        console.log = jest.fn();
         expect(() => (window as any).DIVE.PrintScene()).not.toThrow();
     });
 

package/src/camera/PerspectiveCamera.ts

@@ -25,8 +25,13 @@ export default class DIVEPerspectiveCamera extends PerspectiveCamera {
 
     public onSetCameraLayer: (mask: number) => void = () => { };
 
-    constructor(settings: DIVEPerspectiveCameraSettings = DIVEPerspectiveCameraDefaultSettings) {
-        super(settings.fov, 1, settings.near, settings.far);
+    constructor(settings: Partial<DIVEPerspectiveCameraSettings> = DIVEPerspectiveCameraDefaultSettings) {
+        super(
+            settings.fov || DIVEPerspectiveCameraDefaultSettings.fov,
+            1,
+            settings.near || DIVEPerspectiveCameraDefaultSettings.near,
+            settings.far || DIVEPerspectiveCameraDefaultSettings.far
+        );
 
         this.layers.mask = DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
     }

package/src/camera/__test__/PerspectiveCamera.test.ts

@@ -5,11 +5,20 @@ let cam: DIVEPerspectiveCamera;
 describe('dive/camera/DIVEPerspectiveCamera', () => {
     beforeEach(() => {
         jest.clearAllMocks();
-        cam = new DIVEPerspectiveCamera(DIVEPerspectiveCameraDefaultSettings);
+        cam = new DIVEPerspectiveCamera();
     });
 
     it('should instantiate', () => {
-        cam = new DIVEPerspectiveCamera();
+        cam = new DIVEPerspectiveCamera({});
+        expect(cam).toBeDefined();
+    });
+
+    it('should instantiate with settings', () => {
+        cam = new DIVEPerspectiveCamera({
+            fov: 45,
+            near: 0.1,
+            far: 100,
+        });
         expect(cam).toBeDefined();
     });
 

package/src/com/index.ts

@@ -1,4 +1,3 @@
 import DIVECommunication from './Communication.ts';
 export type { Actions } from './actions/index.ts';
-export type { COMLight, COMModel, COMPov, COMEntity } from './types.ts';
 export default DIVECommunication;

package/src/com/types.ts

@@ -1,9 +1,9 @@
-import { Vector3Like } from "three";
+import { type Texture, type Vector3Like } from "three";
 
 type COMBaseEntity = {
     id: string;
     name: string;
-    entityType: 'pov' | 'light' | 'model';
+    entityType: 'pov' | 'light' | 'model' | 'primitive';
     visible: boolean;
 }
 export type COMPov = COMBaseEntity & {
@@ -28,4 +28,27 @@ export type COMModel = COMBaseEntity & {
     loaded: boolean;
 };
 
-export type COMEntity = COMPov | COMLight | COMModel;
+export type COMGeometry = {
+    name: string
+    width: number;
+    height: number;
+    depth: number;
+}
+
+export type COMMaterial = {
+    color: string | number;
+    roughness: number;
+    roughnessMap: Texture | null;
+    metalness: number;
+    metalnessMap: Texture | null;
+}
+
+export type COMPrimitive = COMBaseEntity & {
+    position: Vector3Like;
+    rotation: Vector3Like;
+    scale: Vector3Like;
+    geometry: COMGeometry;
+    material: COMMaterial;
+};
+
+export type COMEntity = COMPov | COMLight | COMModel | COMPrimitive;

package/src/controls/OrbitControls.ts

@@ -1,4 +1,4 @@
-import { OrbitControls } from "three/examples/jsm/Addons.js";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import DIVEPerspectiveCamera from "../camera/PerspectiveCamera.ts";
 import { DIVERenderer } from "../renderer/Renderer.ts";
 import { type Box3, MathUtils, Vector3, Vector3Like } from "three";
@@ -39,7 +39,7 @@ export default class DIVEOrbitControls extends OrbitControls {
 
     private _removePreRenderCallback: () => void = () => { };
 
-    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, animationSystem: DIVEAnimationSystem, settings: DIVEOrbitControlsSettings = DIVEOrbitControlsDefaultSettings) {
+    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, animationSystem: DIVEAnimationSystem, settings: Partial<DIVEOrbitControlsSettings> = DIVEOrbitControlsDefaultSettings) {
         super(camera, renderer.domElement);
 
         this._animationSystem = animationSystem;
@@ -56,8 +56,13 @@ export default class DIVEOrbitControls extends OrbitControls {
             renderer.RemovePreRenderCallback(id);
         }
 
-        this.enableDamping = settings.enableDamping;
-        this.dampingFactor = settings.dampingFactor;
+        this.enableDamping = settings.enableDamping || DIVEOrbitControlsDefaultSettings.enableDamping;
+        this.dampingFactor = settings.dampingFactor || DIVEOrbitControlsDefaultSettings.dampingFactor;
+
+        // initialize camera transformation
+        this.object.position.set(0, 2, 2);
+        this.target.copy({ x: 0, y: 0.5, z: 0 });
+        this.update();
     }
 
     public Dispose(): void {

package/src/controls/__test__/OrbitControls.test.ts

@@ -12,7 +12,7 @@ jest.mock('@tweenjs/tween.js', () => {
     }
 });
 
-jest.mock('three/examples/jsm/Addons.js', () => {
+jest.mock('three/examples/jsm/controls/OrbitControls', () => {
     return {
         OrbitControls: jest.fn(function () {
             this.enableDamping = true;
@@ -42,14 +42,13 @@ jest.mock('three/examples/jsm/Addons.js', () => {
                 MIDDLE: 1,
                 RIGHT: 2,
             };
-            this.target = {
-                set: jest.fn(),
-            };
             this.update = jest.fn();
             this.dispose = jest.fn();
             this.getDistance = jest.fn();
             this.target = {
                 clone: jest.fn(),
+                set: jest.fn(),
+                copy: jest.fn(),
             };
             return this;
         }),
@@ -122,6 +121,9 @@ const mockCamera = {
         multiplyScalar: jest.fn(() => {
             return mockCamera.position;
         }),
+        set: jest.fn(() => {
+            return mockCamera.position;
+        }),
     },
     lookAt: jest.fn(),
 } as unknown as DIVEPerspectiveCamera;
@@ -148,7 +150,15 @@ describe('dive/controls/DIVEOrbitControls', () => {
     });
 
     it('should instantiate', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem, {});
+        expect(controller).toBeDefined();
+    });
+
+    it('should instantiate with settings', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem, {
+            enableDamping: false,
+            dampingFactor: 0.5,
+        });
         expect(controller).toBeDefined();
     });
 

package/src/dive.ts

@@ -17,9 +17,9 @@ import { DIVEInfo } from "./info/Info.ts";
 export type DIVESettings = {
     autoResize: boolean;
     displayAxes: boolean;
-    renderer: DIVERendererSettings;
-    perspectiveCamera: DIVEPerspectiveCameraSettings;
-    orbitControls: DIVEOrbitControlsSettings;
+    renderer: Partial<DIVERendererSettings>;
+    perspectiveCamera: Partial<DIVEPerspectiveCameraSettings>;
+    orbitControls: Partial<DIVEOrbitControlsSettings>;
 }
 
 export const DIVEDefaultSettings: DIVESettings = {
@@ -159,15 +159,15 @@ export default class DIVE {
 
         // apply perspective camera settings
         if (settingsDelta.perspectiveCamera) {
-            this.perspectiveCamera.fov = settingsDelta.perspectiveCamera.fov;
-            this.perspectiveCamera.near = settingsDelta.perspectiveCamera.near;
-            this.perspectiveCamera.far = settingsDelta.perspectiveCamera.far;
+            if (settingsDelta.perspectiveCamera.fov !== undefined) this.perspectiveCamera.fov = settingsDelta.perspectiveCamera.fov;
+            if (settingsDelta.perspectiveCamera.near !== undefined) this.perspectiveCamera.near = settingsDelta.perspectiveCamera.near;
+            if (settingsDelta.perspectiveCamera.far !== undefined) this.perspectiveCamera.far = settingsDelta.perspectiveCamera.far;
             this.perspectiveCamera.OnResize(this.renderer.domElement.width, this.renderer.domElement.height);
         }
         // apply orbit controls settings
         if (settingsDelta.orbitControls) {
-            this.orbitControls.enableDamping = settingsDelta.orbitControls.enableDamping;
-            this.orbitControls.dampingFactor = settingsDelta.orbitControls.dampingFactor;
+            if (settingsDelta.orbitControls.enableDamping !== undefined) this.orbitControls.enableDamping = settingsDelta.orbitControls.enableDamping;
+            if (settingsDelta.orbitControls.dampingFactor !== undefined) this.orbitControls.dampingFactor = settingsDelta.orbitControls.dampingFactor;
         }
 
         if (settingsDelta.autoResize !== this._settings.autoResize) {
@@ -229,6 +229,8 @@ export default class DIVE {
                 console.log(this.scene);
             },
         }
+
+        console.log('DIVE initialized');
     }
 
     public Dispose(): void {

package/src/mediacreator/__test__/MediaCreator.test.ts

@@ -2,7 +2,7 @@ import { DIVEMediaCreator } from '../MediaCreator';
 import { DIVERenderer } from '../../renderer/Renderer';
 import DIVEScene from '../../scene/Scene';
 import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings } from '../../camera/PerspectiveCamera';
-import { COMPov } from '../../com';
+import { type COMPov } from '../../com/types';
 import DIVEOrbitControls from '../../controls/OrbitControls';
 import { DIVEAnimationSystem } from '../../animation/AnimationSystem';
 

package/src/primitive/Primitive.ts

@@ -0,0 +1,210 @@
+import { Box3, BoxGeometry, BufferGeometry, Color, CylinderGeometry, Float32BufferAttribute, Mesh, MeshStandardMaterial, Object3D, Raycaster, SphereGeometry, Uint32BufferAttribute, Vector3, Vector3Like } from 'three';
+import DIVECommunication from '../com/Communication';
+import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
+import { findSceneRecursive } from '../helper/findSceneRecursive/findSceneRecursive';
+import { type DIVESelectable } from '../interface/Selectable';
+import { type DIVEMoveable } from '../interface/Moveable';
+import { type TransformControls } from 'three/examples/jsm/controls/TransformControls';
+import { type COMGeometry, type COMMaterial } from '../com/types';
+
+/**
+ * A basic model class.
+ *
+ * It does calculate it's own bounding box which is used for positioning on the floor.
+ *
+ * Can be moved and selected.
+ *
+ * @module
+ */
+
+export class DIVEPrimitive extends Object3D implements DIVESelectable, DIVEMoveable {
+    public isSelectable: true = true;
+    public isMoveable: true = true;
+
+    public gizmo: TransformControls | null = null;
+
+    private _mesh: Mesh;
+    private _boundingBox: Box3;
+
+    constructor() {
+        super();
+
+        this.layers.mask = PRODUCT_LAYER_MASK;
+
+        this._mesh = new Mesh();
+        this._mesh.layers.mask = PRODUCT_LAYER_MASK;
+        this._mesh.castShadow = true;
+        this._mesh.receiveShadow = true;
+        this.add(this._mesh);
+
+        this._boundingBox = new Box3();
+    }
+
+    public SetGeometry(geometry: COMGeometry): void {
+        this.clear();
+
+        this._mesh.geometry = this.assembleGeometry(geometry);
+        this._boundingBox.setFromObject(this._mesh);
+    }
+
+    public SetPosition(position: Vector3Like): void {
+        this.position.set(position.x, position.y, position.z);
+    }
+
+    public SetRotation(rotation: Vector3Like): void {
+        this.rotation.setFromVector3(new Vector3(rotation.x, rotation.y, rotation.z));
+    }
+
+    public SetScale(scale: Vector3Like): void {
+        this.scale.set(scale.x, scale.y, scale.z);
+    }
+
+    public SetVisibility(visible: boolean): void {
+        this.traverse((child) => {
+            child.visible = visible;
+        });
+    }
+
+    public SetMaterial(material: COMMaterial): void {
+        const primitiveMaterial = this._mesh.material as MeshStandardMaterial;
+
+        primitiveMaterial.color = new Color(material.color);
+
+        // if there is a roughness map, use it, otherwise use the roughness value
+        if (material.roughnessMap) {
+            primitiveMaterial.roughnessMap = material.roughnessMap;
+            primitiveMaterial.roughness = 1.0;
+        } else {
+            primitiveMaterial.roughness = material.roughness;
+        }
+
+        // if there is a metalness map, use it, otherwise use the metalness value
+        if (material.metalnessMap) {
+            primitiveMaterial.metalnessMap = material.metalnessMap;
+            primitiveMaterial.metalness = 0.0;
+        } else {
+            primitiveMaterial.metalness = material.metalness;
+        }
+    }
+
+    public SetToWorldOrigin(): void {
+        this.position.set(0, 0, 0);
+        DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+    }
+
+    public PlaceOnFloor(): void {
+        this.position.y = -this._boundingBox.min.y * this.scale.y;
+        DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+    }
+
+    public DropIt(): void {
+        if (!this.parent) {
+            console.warn('DIVEModel: DropIt() called on a model that is not in the scene.', this);
+            return;
+        }
+
+        // calculate the bottom center of the bounding box
+        const bottomY = this._boundingBox.min.y * this.scale.y;
+        const bbBottomCenter = this.localToWorld(this._boundingBox.getCenter(new Vector3()).multiply(this.scale));
+        bbBottomCenter.y = bottomY + this.position.y;
+
+        // set up raycaster and raycast all scene objects (product layer)
+        const raycaster = new Raycaster(bbBottomCenter, new Vector3(0, -1, 0));
+        raycaster.layers.mask = PRODUCT_LAYER_MASK;
+        const intersections = raycaster.intersectObjects(findSceneRecursive(this).Root.children, true);
+
+        // if we hit something, move the model to the top on the hit object's bounding box
+        if (intersections.length > 0) {
+            const mesh = intersections[0].object as Mesh;
+            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 Vector3(0, bottomY, 0));
+            this.position.copy(newPos);
+
+            // if the position changed, update the object in communication
+            if (this.position.y === oldPos.y) return;
+            DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+        }
+    }
+
+    public onMove(): void {
+        DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+    }
+
+    public onSelect(): void {
+        DIVECommunication.get(this.userData.id)?.PerformAction('SELECT_OBJECT', { id: this.userData.id });
+    }
+
+    public onDeselect(): void {
+        DIVECommunication.get(this.userData.id)?.PerformAction('DESELECT_OBJECT', { id: this.userData.id });
+    }
+
+    private assembleGeometry(geometry: COMGeometry): BufferGeometry {
+        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();
+        }
+    }
+
+    private createCylinderGeometry(geometry: COMGeometry): BufferGeometry {
+        return new CylinderGeometry(geometry.width * 2, geometry.width * 2, geometry.height, 64);
+    }
+
+    private createSphereGeometry(geometry: COMGeometry): BufferGeometry {
+        return new SphereGeometry(geometry.width * 2, 64);
+    }
+
+    private createPyramidGeometry(geometry: COMGeometry): BufferGeometry {
+        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;
+    }
+
+    private createBoxGeometry(geometry: COMGeometry): BufferGeometry {
+        return new BoxGeometry(geometry.width, geometry.height, geometry.depth);
+    }
+
+    private createConeGeometry(geometry: COMGeometry): BufferGeometry {
+        return new CylinderGeometry(0, geometry.width * 2, geometry.height, 64);
+    }
+
+    private createWallGeometry(geometry: COMGeometry): BufferGeometry {
+        return new BoxGeometry(geometry.width, geometry.height, geometry.depth, 16);
+    }
+
+    private createPlaneGeometry(geometry: COMGeometry): BufferGeometry {
+        return new BoxGeometry(geometry.width, geometry.height, geometry.depth);
+    }
+}