@shopware-ag/dive 1.16.26-beta.2 → 1.17.0

package/src/ar/arquicklook/__test__/ARQuickLook.test.ts

@@ -0,0 +1,268 @@
+import { Box3, Color, Euler, Mesh, Object3D, Vector3 } from 'three';
+import { DIVEScene } from '../../../scene/Scene';
+import { DIVEAROptions } from '../../AR';
+import { DIVEARQuickLook } from '../ARQuickLook';
+
+jest.mock('three', () => {
+    return {
+        Vector3: jest.fn(function (
+            x: number = 0,
+            y: number = 0,
+            z: number = 0,
+        ) {
+            this.x = x;
+            this.y = y;
+            this.z = z;
+            this.copy = (vec3: Vector3) => {
+                this.x = vec3.x;
+                this.y = vec3.y;
+                this.z = vec3.z;
+                return this;
+            };
+            this.set = (x: number, y: number, z: number) => {
+                this.x = x;
+                this.y = y;
+                this.z = z;
+                return this;
+            };
+            this.multiply = (vec3: Vector3) => {
+                this.x *= vec3.x;
+                this.y *= vec3.y;
+                this.z *= vec3.z;
+                return this;
+            };
+            this.clone = () => {
+                return new Vector3(this.x, this.y, this.z);
+            };
+            this.setY = (y: number) => {
+                this.y = y;
+                return this;
+            };
+            this.add = (vec3: Vector3) => {
+                this.x += vec3.x;
+                this.y += vec3.y;
+                this.z += vec3.z;
+                return this;
+            };
+            this.sub = (vec3: Vector3) => {
+                this.x -= vec3.x;
+                this.y -= vec3.y;
+                this.z -= vec3.z;
+                return this;
+            };
+            return this;
+        }),
+        Euler: jest.fn(function () {
+            this.set = jest.fn();
+            return this;
+        }),
+        Object3D: jest.fn(function () {
+            this.clear = jest.fn();
+            this.color = {};
+            this.intensity = 0;
+            this.layers = {
+                mask: 0,
+            };
+            this.shadow = {
+                radius: 0,
+                mapSize: { width: 0, height: 0 },
+                bias: 0,
+                camera: {
+                    near: 0,
+                    far: 0,
+                    fov: 0,
+                },
+            };
+            this.add = jest.fn();
+            this.sub = jest.fn();
+            this.children = [
+                {
+                    visible: true,
+                    material: {
+                        color: {},
+                    },
+                },
+            ];
+            this.userData = {};
+            this.position = new Vector3();
+            this.rotation = new Euler();
+            this.scale = new Vector3(1, 1, 1);
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
+            this.mesh = new Mesh();
+            this.traverse = jest.fn((callback) => {
+                callback(this.children[0]);
+            });
+            this.getWorldPosition = jest.fn(() => {
+                return new Vector3();
+            });
+            return this;
+        }),
+        Box3: jest.fn(function () {
+            this.min = new Vector3(Infinity, Infinity, Infinity);
+            this.max = new Vector3(-Infinity, -Infinity, -Infinity);
+            this.getCenter = jest.fn(() => {
+                return new Vector3(0, 0, 0);
+            });
+            this.expandByObject = jest.fn();
+
+            return this;
+        }),
+        Mesh: jest.fn(function () {
+            this.geometry = {
+                computeBoundingBox: jest.fn(),
+                boundingBox: new Box3(),
+            };
+            this.material = {};
+            this.castShadow = true;
+            this.receiveShadow = true;
+            this.layers = {
+                mask: 0,
+            };
+            this.updateWorldMatrix = jest.fn();
+            this.traverse = jest.fn();
+            this.removeFromParent = jest.fn();
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
+            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 () {
+            this.set = jest.fn();
+            return this;
+        }),
+    };
+});
+
+jest.mock('../../../exporters/usdz/USDZExporter', () => {
+    return {
+        DIVEUSDZExporter: jest.fn().mockImplementation(() => {
+            return {
+                parse: jest.fn(() => {
+                    return Promise.resolve(new Uint8Array());
+                }),
+            };
+        }),
+    };
+});
+
+URL.createObjectURL = jest.fn(() => 'blob:http://localhost:8080/');
+
+describe('DIVEARQuickLook', () => {
+    let mockScene: DIVEScene;
+    let mockOptions: DIVEAROptions;
+    let mockModels: Object3D[];
+
+    beforeEach(() => {
+        mockModels = [
+            new Object3D(),
+            new Object3D(),
+        ];
+        mockScene = {
+            Root: new Object3D(),
+        } as DIVEScene;
+        mockOptions = {
+            arPlacement: 'horizontal',
+            arScale: 'auto',
+        } as DIVEAROptions;
+    });
+
+    describe('Launch', () => {
+        it('should be a function', () => {
+            expect(DIVEARQuickLook.Launch).toBeInstanceOf(Function);
+        });
+
+        it('should return a promise', () => {
+            expect(
+                DIVEARQuickLook.Launch(mockScene, mockOptions),
+            ).toBeInstanceOf(Promise);
+        });
+
+        it('should not throw when called without options', () => {
+            const usdzParseSpy = jest.spyOn(
+                DIVEARQuickLook['_usdzExporter'],
+                'parse',
+            );
+
+            expect(
+                async () => await DIVEARQuickLook.Launch(mockScene),
+            ).not.toThrow();
+
+            expect(usdzParseSpy).toHaveBeenCalled();
+        });
+
+        it('should not throw when called with empty scene', () => {
+            const usdzParseSpy = jest.spyOn(
+                DIVEARQuickLook['_usdzExporter'],
+                'parse',
+            );
+
+            expect(
+                async () =>
+                    await DIVEARQuickLook.Launch(mockScene, mockOptions),
+            ).not.toThrow();
+
+            expect(usdzParseSpy).toHaveBeenCalled();
+        });
+
+        it('should not throw when called with filled scene', () => {
+            const usdzParseSpy = jest.spyOn(
+                DIVEARQuickLook['_usdzExporter'],
+                'parse',
+            );
+
+            mockScene.Root.children = mockModels;
+
+            expect(
+                async () =>
+                    await DIVEARQuickLook.Launch(mockScene, mockOptions),
+            ).not.toThrow();
+
+            expect(usdzParseSpy).toHaveBeenCalled();
+        });
+
+        it('should pass options to exporter', async () => {
+            const usdzParseSpy = jest.spyOn(
+                DIVEARQuickLook['_usdzExporter'],
+                'parse',
+            );
+
+            mockOptions.arPlacement = 'vertical';
+            mockOptions.arScale = 'fixed';
+
+            await DIVEARQuickLook.Launch(mockScene, mockOptions);
+
+            expect(usdzParseSpy).toHaveBeenCalledWith(expect.any(Object3D), {
+                quickLookCompatible: true,
+                ar: {
+                    anchoring: { type: 'plane' },
+                    planeAnchoring: {
+                        alignment: 'vertical',
+                    },
+                },
+            });
+        });
+
+        it('should reject when USDZExporter fails', async () => {
+            const usdzParseSpy = jest.spyOn(
+                DIVEARQuickLook['_usdzExporter'],
+                'parse',
+            );
+
+            usdzParseSpy.mockReturnValueOnce(Promise.reject());
+
+            await expect(
+                DIVEARQuickLook.Launch(mockScene, mockOptions),
+            ).rejects.toBeUndefined();
+        });
+    });
+});

package/src/ar/sceneviewer/SceneViewer.ts

@@ -0,0 +1,74 @@
+import { type DIVEScene } from '../../scene/Scene';
+import { type DIVEAROptions } from '../AR';
+
+export class DIVESceneViewer {
+    public static Launch(scene: DIVEScene, options?: DIVEAROptions): void {
+        // find url in scene (first object found that has a set uri)
+        const url = this.findSceneViewerSrc(scene);
+
+        // launch SceneViewer
+        this.launchSceneViewer(url, options);
+    }
+
+    private static launchSceneViewer(
+        url: string,
+        options?: DIVEAROptions,
+    ): void {
+        const anchor = document.createElement('a');
+        const noArViewerSigil = '#model-viewer-no-ar-fallback';
+
+        const location = self.location.toString();
+        const locationUrl = new URL(location);
+        const modelUrl = new URL(url, location);
+        const params = new URLSearchParams(modelUrl.search);
+
+        locationUrl.hash = noArViewerSigil;
+
+        // modelUrl can contain title/link/sound etc.
+        params.set('mode', 'ar_only');
+
+        if (options?.arScale === 'fixed') {
+            params.set('resizable', 'false');
+        }
+
+        if (options?.arPlacement === 'vertical') {
+            params.set('enable_vertical_placement', 'true');
+        }
+
+        // will be added later if needed
+        // if (params.has('sound')) {
+        //     const soundUrl = new URL(params.get('sound')!, location);
+        //     params.set('sound', soundUrl.toString());
+        // }
+        // if (params.has('link')) {
+        //     const linkUrl = new URL(params.get('link')!, location);
+        //     params.set('link', linkUrl.toString());
+        // }
+
+        const intent = `intent://arvr.google.com/scene-viewer/1.2?${
+            params.toString() + '&file=' + modelUrl.toString()
+        }#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=${encodeURIComponent(
+            locationUrl.toString(),
+        )};end;`;
+
+        anchor.setAttribute('href', intent);
+        anchor.click();
+    }
+
+    private static findSceneViewerSrc(scene: DIVEScene): string {
+        let uri: string | null = null;
+
+        scene.traverse((object) => {
+            if (uri) return;
+            if (object.userData.uri) {
+                uri = object.userData.uri;
+            }
+        });
+
+        if (!uri) {
+            throw new Error('No model found in scene');
+        }
+
+        return uri;
+    }
+}

package/src/ar/sceneviewer/__test__/SceneViewer.test.ts

@@ -0,0 +1,245 @@
+import { Box3, Color, Euler, Mesh, Object3D, Vector3 } from 'three';
+import { DIVEScene } from '../../../scene/Scene';
+import { DIVEAROptions } from '../../AR';
+import { DIVESceneViewer } from '../SceneViewer';
+
+jest.mock('../../../scene/Scene', () => {
+    return {
+        DIVEScene: jest.fn(function () {
+            this.add = jest.fn();
+            this.children = [];
+            this.Root = {
+                children: [],
+            };
+            this.traverse = jest.fn((callback) => {
+                this.Root.children.forEach((child: Object3D) => {
+                    callback(child);
+                });
+            });
+            return this;
+        }),
+    };
+});
+
+jest.mock('three', () => {
+    return {
+        Vector3: jest.fn(function (
+            x: number = 0,
+            y: number = 0,
+            z: number = 0,
+        ) {
+            this.x = x;
+            this.y = y;
+            this.z = z;
+            this.copy = (vec3: Vector3) => {
+                this.x = vec3.x;
+                this.y = vec3.y;
+                this.z = vec3.z;
+                return this;
+            };
+            this.set = (x: number, y: number, z: number) => {
+                this.x = x;
+                this.y = y;
+                this.z = z;
+                return this;
+            };
+            this.multiply = (vec3: Vector3) => {
+                this.x *= vec3.x;
+                this.y *= vec3.y;
+                this.z *= vec3.z;
+                return this;
+            };
+            this.clone = () => {
+                return new Vector3(this.x, this.y, this.z);
+            };
+            this.setY = (y: number) => {
+                this.y = y;
+                return this;
+            };
+            this.add = (vec3: Vector3) => {
+                this.x += vec3.x;
+                this.y += vec3.y;
+                this.z += vec3.z;
+                return this;
+            };
+            this.sub = (vec3: Vector3) => {
+                this.x -= vec3.x;
+                this.y -= vec3.y;
+                this.z -= vec3.z;
+                return this;
+            };
+            return this;
+        }),
+        Euler: jest.fn(function () {
+            this.set = jest.fn();
+            return this;
+        }),
+        Object3D: jest.fn(function () {
+            this.clear = jest.fn();
+            this.color = {};
+            this.intensity = 0;
+            this.layers = {
+                mask: 0,
+            };
+            this.shadow = {
+                radius: 0,
+                mapSize: { width: 0, height: 0 },
+                bias: 0,
+                camera: {
+                    near: 0,
+                    far: 0,
+                    fov: 0,
+                },
+            };
+            this.add = jest.fn();
+            this.sub = jest.fn();
+            this.children = [
+                {
+                    visible: true,
+                    material: {
+                        color: {},
+                    },
+                },
+            ];
+            this.userData = {};
+            this.position = new Vector3();
+            this.rotation = new Euler();
+            this.scale = new Vector3(1, 1, 1);
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
+            this.mesh = new Mesh();
+            this.traverse = jest.fn((callback) => {
+                callback(this.children[0]);
+            });
+            this.getWorldPosition = jest.fn(() => {
+                return new Vector3();
+            });
+            return this;
+        }),
+        Box3: jest.fn(function () {
+            this.min = new Vector3(Infinity, Infinity, Infinity);
+            this.max = new Vector3(-Infinity, -Infinity, -Infinity);
+            this.getCenter = jest.fn(() => {
+                return new Vector3(0, 0, 0);
+            });
+            this.expandByObject = jest.fn();
+
+            return this;
+        }),
+        Mesh: jest.fn(function () {
+            this.geometry = {
+                computeBoundingBox: jest.fn(),
+                boundingBox: new Box3(),
+            };
+            this.material = {};
+            this.castShadow = true;
+            this.receiveShadow = true;
+            this.layers = {
+                mask: 0,
+            };
+            this.updateWorldMatrix = jest.fn();
+            this.traverse = jest.fn();
+            this.removeFromParent = jest.fn();
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
+            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 () {
+            this.set = jest.fn();
+            return this;
+        }),
+    };
+});
+
+jest.mock('../../../exporters/usdz/USDZExporter', () => {
+    return {
+        DIVEUSDZExporter: jest.fn().mockImplementation(() => {
+            return {
+                parse: jest.fn(() => {
+                    return Promise.resolve(new Uint8Array());
+                }),
+            };
+        }),
+    };
+});
+
+URL.createObjectURL = jest.fn(() => 'blob:http://localhost:8080/');
+
+describe('DIVESceneViewer', () => {
+    let mockScene: DIVEScene;
+    let mockOptions: DIVEAROptions;
+    let mockModels: Object3D[];
+
+    beforeEach(() => {
+        mockModels = [
+            new Object3D(),
+            new Object3D(),
+            new Object3D(),
+        ];
+        mockModels[1].userData = {
+            uri: 'https://example.com',
+        };
+        mockScene = new DIVEScene();
+        mockOptions = {
+            arPlacement: 'horizontal',
+            arScale: 'auto',
+        } as DIVEAROptions;
+    });
+
+    describe('Launch', () => {
+        it('should be a function', () => {
+            expect(DIVESceneViewer.Launch).toBeInstanceOf(Function);
+        });
+
+        it('should not throw without options', () => {
+            mockScene.Root.children = mockModels;
+
+            expect(() => {
+                DIVESceneViewer.Launch(mockScene);
+            }).not.toThrow();
+        });
+
+        it('should not throw with options', () => {
+            mockScene.Root.children = mockModels;
+
+            expect(() => {
+                DIVESceneViewer.Launch(mockScene, mockOptions);
+            }).not.toThrow();
+        });
+
+        it('should not throw with alternated options', () => {
+            mockScene.Root.children = mockModels;
+
+            mockOptions = {
+                arPlacement: 'vertical',
+                arScale: 'fixed',
+            } as DIVEAROptions;
+
+            expect(() => {
+                DIVESceneViewer.Launch(mockScene, mockOptions);
+            }).not.toThrow();
+        });
+
+        it('should throw if no url is found', () => {
+            mockScene.Root.children = [
+                new Object3D(),
+                new Object3D(),
+                new Object3D(),
+            ];
+
+            expect(() => {
+                DIVESceneViewer.Launch(mockScene, mockOptions);
+            }).toThrow();
+        });
+    });
+});

package/src/ar/webxr/controller/WebXRController.ts

@@ -133,15 +133,7 @@ export class DIVEWebXRController extends Object3D {
         this._frameBuffer = frame;
 
         if (!this._placed) {
-            this._xrCamera.updateMatrixWorld();
-            this._scene.XRRoot.XRHandNode.position.copy(
-                this._handNodeInitialPosition
-                    .clone()
-                    .applyMatrix4(this._xrCamera.matrixWorld),
-            );
-            this._scene.XRRoot.XRHandNode.quaternion.setFromRotationMatrix(
-                this._xrCamera.matrixWorld,
-            );
+            this.updateHandNode();
 
             if (this._origin) {
                 this._origin.Update(frame);
@@ -149,6 +141,18 @@ export class DIVEWebXRController extends Object3D {
         }
     }
 
+    private updateHandNode(): void {
+        this._xrCamera.updateMatrixWorld();
+        this._scene.XRRoot.XRHandNode.position.copy(
+            this._handNodeInitialPosition
+                .clone()
+                .applyMatrix4(this._xrCamera.matrixWorld),
+        );
+        this._scene.XRRoot.XRHandNode.quaternion.setFromRotationMatrix(
+            this._xrCamera.matrixWorld,
+        );
+    }
+
     // placement
     private async initOrigin(): Promise<void> {
         // initialize origin
@@ -162,6 +166,8 @@ export class DIVEWebXRController extends Object3D {
 
     private placeObjects(matrix: Matrix4): void {
         this._scene.XRRoot.XRModelRoot.matrix.copy(matrix);
+
+        // we are copying children to a new array to keep the original array intact
         [...this._scene.XRRoot.XRHandNode.children].forEach((child) => {
             this._scene.XRRoot.XRModelRoot.add(child);
         });
@@ -290,7 +296,7 @@ export class DIVEWebXRController extends Object3D {
         // initialize crosshair
         this._scene.add(this._crosshair);
 
-        // hang current scene children to hang node
+        // hang current scene children to hand node
         const children: Object3D[] = [];
         this._scene.Root.children.forEach((child) => {
             const clone = child.clone();
@@ -310,7 +316,7 @@ export class DIVEWebXRController extends Object3D {
     private restoreScene(): void {
         this._scene.remove(this._crosshair);
 
-        // clear hang node and remove attached models
+        // clear hand node and remove attached models
         this._scene.XRRoot.XRHandNode.clear();
         this._scene.XRRoot.XRModelRoot.clear();
 

package/src/ar/webxr/origin/WebXROrigin.ts

@@ -180,6 +180,7 @@ export class DIVEWebXROrigin {
 
         this.matrix.fromArray(pose.transform.matrix);
 
+        // we have to wait for a certain amount of frames to make sure the origin is set
         if (this._raycastHitCounter > 50) {
             this._originSetResolve();
         }

package/src/com/Communication.ts

@@ -305,8 +305,9 @@ export class DIVECommunication {
                 break;
             }
             case 'LAUNCH_AR': {
-                this.ar.Launch();
-                returnValue = true;
+                returnValue = this.ar.Launch(
+                    payload as Actions['LAUNCH_AR']['PAYLOAD'],
+                );
                 break;
             }
             default: {
@@ -461,7 +462,7 @@ export class DIVECommunication {
 
         this.registered.delete(payload.id);
 
-        // detach from parent
+        // detach all children from parent if we delete a group
         Array.from(this.registered.values()).forEach((object) => {
             if (!object.parentId) return;
             if (object.parentId !== payload.id) return;