@shopware-ag/dive 1.9.0 → 1.10.0

package/package.json

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

package/src/com/types.ts

@@ -26,6 +26,7 @@ export type COMModel = COMBaseEntity & {
     rotation: Vector3Like;
     scale: Vector3Like;
     loaded: boolean;
+    material?: COMMaterial;
 };
 
 export type COMGeometry = {
@@ -38,9 +39,9 @@ export type COMGeometry = {
 export type COMMaterial = {
     color: string | number;
     roughness: number;
-    roughnessMap: Texture | null;
+    roughnessMap?: Texture;
     metalness: number;
-    metalnessMap: Texture | null;
+    metalnessMap?: Texture;
 }
 
 export type COMPrimitive = COMBaseEntity & {

package/src/model/Model.ts

@@ -1,10 +1,11 @@
-import { Box3, type Mesh, Object3D, Raycaster, Vector3, Vector3Like } from 'three';
+import { Box3, Color, Mesh, MeshStandardMaterial, Object3D, Raycaster, Vector3, Vector3Like } from 'three';
 import { DIVESelectable } from '../interface/Selectable';
 import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
 import { DIVEMoveable } from '../interface/Moveable';
 import DIVECommunication from '../com/Communication';
 import type { GLTF, TransformControls } from 'three/examples/jsm/Addons.js';
 import { findSceneRecursive } from '../helper/findSceneRecursive/findSceneRecursive';
+import { type COMMaterial } from '../com/types';
 
 /**
  * A basic model class.
@@ -23,6 +24,9 @@ export default class DIVEModel extends Object3D implements DIVESelectable, DIVEM
 
     private boundingBox: Box3;
 
+    private _mesh: Mesh | null = null;
+    private _material: MeshStandardMaterial | null = null;
+
     constructor() {
         super();
 
@@ -40,6 +44,18 @@ export default class DIVEModel extends Object3D implements DIVESelectable, DIVEM
 
             child.layers.mask = this.layers.mask;
             this.boundingBox.expandByObject(child);
+
+            // only search for first mesh for now
+            if (!this._mesh && 'isMesh' in child) {
+                this._mesh = child as Mesh;
+
+                // if the material is already set, use it, otherwise set it from the model's material
+                if (this._material) {
+                    this._mesh.material = this._material;
+                } else {
+                    this._material = (child as Mesh).material as MeshStandardMaterial;
+                }
+            }
         });
 
         this.add(gltf.scene);
@@ -63,6 +79,39 @@ export default class DIVEModel extends Object3D implements DIVESelectable, DIVEM
         });
     }
 
+    public SetMaterial(material: COMMaterial): void {
+        console.error('HERE', this._mesh);
+
+        // if there is no material, create a new one
+        if (!this._material) {
+            this._material = new MeshStandardMaterial();
+        }
+
+        this._material.color = new Color(material.color);
+
+        // if there is a roughness map, use it, otherwise use the roughness value
+        if (material.roughnessMap) {
+            this._material.roughnessMap = material.roughnessMap;
+            this._material.roughness = 1.0;
+        } else {
+            this._material.roughness = material.roughness;
+        }
+
+        // if there is a metalness map, use it, otherwise use the metalness value
+        if (material.metalnessMap) {
+            this._material.metalnessMap = material.metalnessMap;
+            this._material.metalness = 0.0;
+        } else {
+            this._material.metalness = material.metalness;
+        }
+
+        // if the mesh is already set, update the material
+
+        if (this._mesh) {
+            this._mesh.material = this._material;
+        }
+    }
+
     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 });

package/src/model/__test__/Model.test.ts

@@ -2,7 +2,8 @@ import Model from '../Model';
 import DIVECommunication from '../../com/Communication';
 import { GLTF } from 'three/examples/jsm/Addons';
 import DIVEScene from '../../scene/Scene';
-import { Vector3, Box3, Mesh } from 'three';
+import { Vector3, Box3, Mesh, MeshStandardMaterial, type Texture, Color } from 'three';
+import { type COMMaterial } from '../../com/types';
 
 const intersectObjectsMock = jest.fn();
 
@@ -135,6 +136,17 @@ jest.mock('three', () => {
             };
             return this;
         }),
+        MeshStandardMaterial: jest.fn(function () {
+            this.color = new Color();
+            this.roughness = 1;
+            this.roughnessMap = undefined;
+            this.metalness = 0;
+            this.metalnessMap = undefined;
+            return this;
+        }),
+        Color: jest.fn(function () {
+            return this;
+        }),
     }
 });
 
@@ -150,12 +162,14 @@ jest.mock('../../com/Communication.ts', () => {
 
 const gltf = {
     scene: {
+        isMesh: true,
         isObject3D: true,
         parent: null,
         dispatchEvent: jest.fn(),
         layers: {
             mask: 0,
         },
+        material: {},
         updateWorldMatrix: jest.fn(),
         children: [
             {
@@ -166,6 +180,7 @@ const gltf = {
                 },
                 children: [],
                 updateWorldMatrix: jest.fn(),
+                isMesh: true,
             },
         ],
         traverse: function (callback: (object: object) => void) {
@@ -177,43 +192,42 @@ const gltf = {
 
 jest.spyOn(DIVECommunication, 'get').mockReturnValue({ PerformAction: jest.fn() } as unknown as DIVECommunication);
 
+let model: Model;
+
 describe('dive/model/DIVEModel', () => {
+    beforeEach(() => {
+        model = new Model();
+    });
+
     afterEach(() => {
         jest.clearAllMocks();
     });
 
     it('should instantiate', () => {
-        const model = new Model();
         expect(model).toBeDefined();
     });
 
     it('should set model', () => {
-        const model = new Model();
         expect(() => model.SetModel(gltf)).not.toThrow();
     });
 
     it('should set position', () => {
-        const model = new Model();
         expect(() => model.SetPosition({ x: 0, y: 0, z: 0 })).not.toThrow();
     });
 
     it('should set rotation', () => {
-        const model = new Model();
         expect(() => model.SetRotation({ x: 0, y: 0, z: 0 })).not.toThrow();
     });
 
     it('should set scale', () => {
-        const model = new Model();
         expect(() => model.SetScale({ x: 1, y: 1, z: 1 })).not.toThrow();
     });
 
     it('should set visibility', () => {
-        const model = new Model();
         expect(() => model.SetVisibility(true)).not.toThrow();
     });
 
     it('should set to world origin', () => {
-        const model = new Model();
         model.userData.id = 'something';
 
         expect(() => model.SetToWorldOrigin()).not.toThrow();
@@ -226,7 +240,6 @@ describe('dive/model/DIVEModel', () => {
     });
 
     it('should place on floor', () => {
-        const model = new Model();
         model.userData.id = 'something';
 
         expect(() => model.PlaceOnFloor()).not.toThrow();
@@ -247,7 +260,6 @@ describe('dive/model/DIVEModel', () => {
             z: 1,
         };
 
-        const model = new Model();
         model.userData.id = 'something';
         model.position.set(0, 4, 0);
         model['boundingBox'] = {
@@ -301,7 +313,6 @@ describe('dive/model/DIVEModel', () => {
     });
 
     it('should onMove', () => {
-        const model = new Model();
         model.userData.id = 'something';
 
         expect(() => model.onMove()).not.toThrow();
@@ -311,22 +322,60 @@ describe('dive/model/DIVEModel', () => {
     });
 
     it('should onSelect', () => {
-        const testLight = new Model();
-        testLight.userData.id = 'something';
+        model.userData.id = 'something';
 
-        expect(() => testLight.onSelect()).not.toThrow();
+        expect(() => model.onSelect()).not.toThrow();
 
         jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
-        expect(() => testLight.onSelect()).not.toThrow();
+        expect(() => model.onSelect()).not.toThrow();
     });
 
     it('should onDeselect', () => {
-        const testLight = new Model();
-        testLight.userData.id = 'something';
+        model.userData.id = 'something';
 
-        expect(() => testLight.onDeselect()).not.toThrow();
+        expect(() => model.onDeselect()).not.toThrow();
 
         jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
-        expect(() => testLight.onDeselect()).not.toThrow();
+        expect(() => model.onDeselect()).not.toThrow();
+    });
+
+    it('should set material', () => {
+        // apply invalid material should not crash
+        expect(() => model.SetMaterial({} as COMMaterial)).not.toThrow();
+        expect(model['_material']).not.toBeNull();
+
+        expect(() => model.SetMaterial({
+            color: 0xffffff,
+            roughness: 0,
+            metalness: 1,
+        } as COMMaterial)).not.toThrow();
+        expect((model['_material'] as MeshStandardMaterial).roughness).toBe(0);
+        expect((model['_material'] as MeshStandardMaterial).roughnessMap).toBeUndefined();
+        expect((model['_material'] as MeshStandardMaterial).metalness).toBe(1);
+        expect((model['_material'] as MeshStandardMaterial).metalnessMap).toBeUndefined();
+
+        expect(() => model.SetMaterial({
+            color: 0xff00ff,
+            roughness: 0,
+            roughnessMap: 'this is a Texture' as unknown as Texture,
+            metalness: 1,
+            metalnessMap: 'this is a Texture' as unknown as Texture,
+        } as COMMaterial)).not.toThrow();
+        expect((model['_material'] as MeshStandardMaterial).roughness).toBe(1);
+        expect((model['_material'] as MeshStandardMaterial).roughnessMap).toBeDefined();
+        expect((model['_material'] as MeshStandardMaterial).metalness).toBe(0);
+        expect((model['_material'] as MeshStandardMaterial).metalnessMap).toBeDefined();
+    });
+
+    it('should set model material when material already set before', () => {
+        model.SetMaterial({ roughness: 0.5 } as COMMaterial);
+        expect(() => model.SetModel(gltf)).not.toThrow();
+        expect((model['_mesh']?.material as MeshStandardMaterial).roughness).toBe(0.5);
+    });
+
+    it('should set material to model when model already set before', () => {
+        model.SetModel(gltf);
+        expect(() => model.SetMaterial({ roughness: 0.5 } as COMMaterial)).not.toThrow();
+        expect((model['_mesh']?.material as MeshStandardMaterial).roughness).toBe(0.5);
     });
 });

package/src/primitive/__test__/Primitive.test.ts

@@ -162,9 +162,9 @@ jest.mock('three', () => {
         MeshStandardMaterial: jest.fn(function () {
             this.color = {};
             this.roughness = 0;
-            this.roughnessMap = null;
+            this.roughnessMap = undefined;
             this.metalness = 0;
-            this.metalnessMap = null;
+            this.metalnessMap = undefined;
             return this;
         }),
         Color: jest.fn(function () {
@@ -410,9 +410,7 @@ describe('dive/primitive/DIVEPrimitive', () => {
         expect(() => primitive.SetMaterial({
             color: 0xffffff,
             roughness: 0,
-            roughnessMap: null,
             metalness: 1,
-            metalnessMap: null,
         } as COMMaterial)).not.toThrow();
         expect(material.roughness).toBe(0);
         expect(material.roughnessMap).toBeUndefined();

package/src/scene/root/modelroot/ModelRoot.ts

@@ -52,6 +52,7 @@ export default class DIVEModelRoot extends Object3D {
         if (object.rotation !== undefined) (sceneObject as Model).SetRotation(object.rotation);
         if (object.scale !== undefined) (sceneObject as Model).SetScale(object.scale);
         if (object.visible !== undefined) (sceneObject as Model).SetVisibility(object.visible);
+        if (object.material !== undefined) (sceneObject as Model).SetMaterial(object.material);
     }
 
     public DeleteModel(object: Partial<COMModel>): void {

package/src/scene/root/modelroot/__test__/ModelRoot.test.ts

@@ -2,6 +2,7 @@ import DIVEModelRoot from '../ModelRoot';
 import DIVECommunication from '../../../../com/Communication';
 import { DIVEMoveable } from '../../../../interface/Moveable';
 import type DIVEScene from '../../../Scene';
+import { type COMMaterial } from '../../../../com/types';
 
 const mock_LoadGLTF = jest.fn().mockResolvedValue({});
 const mock_SetPosition = jest.fn();
@@ -46,6 +47,7 @@ jest.mock('../../../../model/Model.ts', () => {
         this.SetRotation = mock_SetRotation;
         this.SetScale = mock_SetScale;
         this.SetVisibility = jest.fn();
+        this.SetMaterial = jest.fn();
         this.PlaceOnFloor = mock_PlaceOnFloor;
         this.removeFromParent = jest.fn();
         return this;
@@ -95,6 +97,7 @@ describe('dive/scene/root/modelroot/DIVEModelRoot', () => {
             position: { x: 1, y: 2, z: 3 },
             rotation: { x: 1, y: 2, z: 3 },
             scale: { x: 1, y: 2, z: 3 },
+            material: {} as COMMaterial,
         })).not.toThrow();
 
         jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);