@shopware-ag/dive 1.16.16-beta.0 → 1.16.16

package/src/scene/__test__/Scene.test.ts

@@ -1,7 +1,6 @@
 import { DIVEScene } from '../Scene';
 import { type Color } from 'three';
 import { type COMEntity } from '../../com/types';
-import { DIVERenderer } from '../../renderer/Renderer';
 
 const mock_AddSceneObject = jest.fn();
 const mock_UpdateSceneObject = jest.fn();
@@ -27,30 +26,6 @@ jest.mock('../root/Root', () => {
     };
 });
 
-jest.mock('../xrroot/XRRoot', () => {
-    return {
-        DIVEXRRoot: jest.fn(function (scene: DIVEScene) {
-            this.visible = true;
-            this.isObject3D = true;
-            this.parent = null;
-            this.dispatchEvent = jest.fn();
-            this.removeFromParent = jest.fn();
-            this.visible = true;
-            this.InitLightEstimation = jest.fn();
-            this.DisposeLightEstimation = jest.fn();
-            return this;
-        }),
-    };
-});
-
-jest.mock('../../renderer/Renderer.ts', () => {
-    return {
-        DIVERenderer: jest.fn(function () {}),
-    };
-});
-
-const mockRenderer = new DIVERenderer();
-
 describe('dive/scene/DIVEScene', () => {
     afterEach(() => {
         jest.clearAllMocks();
@@ -59,26 +34,17 @@ describe('dive/scene/DIVEScene', () => {
     it('should instantiate', () => {
         const scene = new DIVEScene();
         expect(scene).toBeDefined();
+        expect(scene.children).toHaveLength(3);
     });
 
-    it('should have Root', () => {
-        const scene = new DIVEScene();
-        expect(scene.Root).toBeDefined();
-    });
-
-    it('should have XRRoot', () => {
-        const scene = new DIVEScene();
-        expect(scene.XRRoot).toBeDefined();
-    });
-
-    it('should InitXR', () => {
+    it('should have Floor', () => {
         const scene = new DIVEScene();
-        expect(() => scene.InitXR(mockRenderer)).not.toThrow();
+        expect(scene.Floor).toBeDefined();
     });
 
-    it('should DisposeXR', () => {
+    it('should have Grid', () => {
         const scene = new DIVEScene();
-        expect(() => scene.DisposeXR()).not.toThrow();
+        expect(scene.Grid).toBeDefined();
     });
 
     it('should set background color', () => {

package/src/scene/root/Root.ts

@@ -238,7 +238,6 @@ export class DIVERoot extends Object3D {
             const created = new DIVEModel();
             sceneObject = created;
             sceneObject.userData.id = model.id;
-            sceneObject.userData.uri = model.uri;
             this.add(sceneObject);
         }
 

package/src/toolbox/BaseTool.ts

@@ -1,16 +1,10 @@
-import {
-    type Intersection,
-    type Object3D,
-    Raycaster,
-    Vector2,
-    Vector3,
-} from 'three';
+import { Intersection, Object3D, Raycaster, Vector2, Vector3 } from 'three';
 import {
     PRODUCT_LAYER_MASK,
     UI_LAYER_MASK,
 } from '../constant/VisibilityLayerMask';
-import { type DIVEScene } from '../scene/Scene';
-import type DIVEOrbitControls from '../controls/OrbitControls';
+import { DIVEScene } from '../scene/Scene';
+import DIVEOrbitControls from '../controls/OrbitControls';
 import { type DIVEDraggable } from '../interface/Draggable';
 import { type DIVEHoverable } from '../interface/Hoverable';
 import { findInterface } from '../helper/findInterface/findInterface';

package/src/toolbox/Toolbox.ts

@@ -1,5 +1,5 @@
 import type DIVEOrbitControls from '../controls/OrbitControls.ts';
-import { type DIVEScene } from '../scene/Scene.ts';
+import type { DIVEScene } from '../scene/Scene.ts';
 import { type DIVEBaseTool } from './BaseTool.ts';
 import { type DIVESelectTool } from './select/SelectTool.ts';
 

package/src/toolbox/__test__/Toolbox.test.ts

@@ -1,6 +1,6 @@
 import DIVEToolbox, { type ToolType } from '../Toolbox';
 import type DIVEOrbitControls from '../../controls/OrbitControls';
-import { type DIVEScene } from '../../scene/Scene';
+import type { DIVEScene } from '../../scene/Scene';
 
 /**
  * @jest-environment jsdom

package/src/toolbox/select/SelectTool.ts

@@ -1,5 +1,5 @@
 import { type Object3D } from 'three';
-import { type DIVEScene } from '../../scene/Scene.ts';
+import { DIVEScene } from '../../scene/Scene.ts';
 import DIVETransformTool from '../transform/TransformTool.ts';
 import { findInterface } from '../../helper/findInterface/findInterface.ts';
 import type DIVEOrbitControls from '../../controls/OrbitControls.ts';

package/src/toolbox/select/__test__/SelectTool.test.ts

@@ -100,7 +100,7 @@ jest.mock('three', () => {
 const mock_attach = jest.fn();
 const mock_detach = jest.fn();
 
-jest.mock('three/examples/jsm/controls/TransformControls', () => {
+jest.mock('three/examples/jsm/Addons.js', () => {
     return {
         TransformControls: jest.fn(function () {
             (this.addEventListener = (

package/src/toolbox/transform/TransformTool.ts

@@ -1,7 +1,7 @@
 import { DIVEBaseTool } from '../BaseTool.ts';
-import { type DIVEScene } from '../../scene/Scene.ts';
-import type DIVEOrbitControls from '../../controls/OrbitControls.ts';
-import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
+import { DIVEScene } from '../../scene/Scene.ts';
+import DIVEOrbitControls from '../../controls/OrbitControls.ts';
+import { TransformControls } from 'three/examples/jsm/Addons';
 import { type DIVEMovable } from '../../interface/Movable.ts';
 import { implementsInterface } from '../../helper/isInterface/implementsInterface.ts';
 
@@ -81,7 +81,7 @@ export default class DIVETransformTool extends DIVEBaseTool {
             this._gizmo.object.onMoveEnd();
         });
 
-        this._scene.add(this._gizmo);
+        scene.add(this._gizmo);
     }
 
     public Activate(): void {}

package/src/toolbox/transform/__test__/TransformTool.test.ts

@@ -99,7 +99,7 @@ jest.mock('three', () => {
 const mock_attach = jest.fn();
 const mock_detach = jest.fn();
 
-jest.mock('three/examples/jsm/controls/TransformControls', () => {
+jest.mock('three/examples/jsm/Addons.js', () => {
     return {
         TransformControls: jest.fn(function () {
             (this.addEventListener = (
@@ -189,7 +189,9 @@ describe('dive/toolbox/select/DIVETransformTool', () => {
         const transformTool = new DIVETransformTool(mockScene, mockController);
         expect(() => transformTool.SetGizmoVisibility(true)).not.toThrow();
 
-        mockScene.Root.children.includes = jest.fn().mockReturnValue(true);
+        expect(mockScene.add).toBeCalled();
+
+        mockScene.children.includes = jest.fn().mockReturnValue(true);
         expect(() => transformTool.SetGizmoVisibility(false)).not.toThrow();
     });
 });

package/src/ar/AR.ts

@@ -1,164 +0,0 @@
-import { DIVEInfo, WebXRUnsupportedReason } from '../info/Info';
-import { DIVEARQuickLook } from './arquicklook/ARQuickLook';
-import { DIVEWebXR } from './webxr/WebXR';
-import { type DIVEScene } from '../scene/Scene';
-import { type DIVERenderer } from '../renderer/Renderer';
-import DIVEOrbitControls from '../controls/OrbitControls';
-
-export class DIVEAR {
-    private _renderer: DIVERenderer;
-    private _scene: DIVEScene;
-    private _controller: DIVEOrbitControls;
-
-    private arPlacement: string = 'floor';
-    private arScale: string = 'auto';
-
-    constructor(
-        renderer: DIVERenderer,
-        scene: DIVEScene,
-        controller: DIVEOrbitControls,
-    ) {
-        this._renderer = renderer;
-        this._scene = scene;
-        this._controller = controller;
-    }
-
-    public async Launch(): Promise<void> {
-        const system = DIVEInfo.GetSystem();
-
-        if (system === 'iOS') {
-            const support = DIVEInfo.GetSupportsARQuickLook();
-            if (!support) {
-                console.log('ARQuickLook not supported');
-                return Promise.reject();
-            }
-
-            console.log('Launching AR on iOS');
-
-            // Launch ARQuickLook
-            await DIVEARQuickLook.Launch(this._scene);
-            return Promise.resolve();
-        }
-
-        if (system === 'Android') {
-            this.openSceneViewer();
-            return;
-
-            const support = await DIVEInfo.GetSupportsWebXR();
-            if (!support) {
-                console.log(
-                    'WebXR not supported. Reason: ' +
-                        WebXRUnsupportedReason[
-                            DIVEInfo.GetWebXRUnsupportedReason()!
-                        ],
-                );
-                return Promise.reject();
-            }
-
-            console.log('Launching AR on Android');
-            // Launch WebXR
-            await DIVEWebXR.Launch(
-                this._renderer,
-                this._scene,
-                this._controller,
-            );
-            return Promise.resolve();
-        }
-
-        console.log(
-            'AR not supported. Not a mobile system. (System is ' + system + ')',
-        );
-    }
-
-    private openSceneViewer(): void {
-        const src = this.createSceneViewerSrc();
-        const anchor = document.createElement('a');
-        const noArViewerSigil = '#model-viewer-no-ar-fallback';
-        // let isSceneViewerBlocked = false;
-
-        const location = self.location.toString();
-        const locationUrl = new URL(location);
-        const modelUrl = new URL(src, location);
-        if (modelUrl.hash) modelUrl.hash = '';
-        const params = new URLSearchParams(modelUrl.search);
-
-        locationUrl.hash = noArViewerSigil;
-
-        // modelUrl can contain title/link/sound etc.
-        params.set('mode', 'ar_preferred');
-        if (!params.has('disable_occlusion')) {
-            params.set('disable_occlusion', 'true');
-        }
-        if (this.arScale === 'fixed') {
-            params.set('resizable', 'false');
-        }
-        if (this.arPlacement === 'wall') {
-            params.set('enable_vertical_placement', 'true');
-        }
-        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());
-        }
-
-        console.log('modelUrl.toString()', modelUrl.toString());
-        console.log(
-            'encodeURIComponent(modelUrl.toString())',
-            encodeURIComponent(modelUrl.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;`;
-        // intent =
-        //     'intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;';
-        console.log({ intent });
-
-        const undoHashChange = (): void => {
-            if (self.location.hash === noArViewerSigil) {
-                // isSceneViewerBlocked = true;
-                // The new history will be the current URL with a new hash.
-                // Go back one step so that we reset to the expected URL.
-                // NOTE(cdata): this should not invoke any browser-level navigation
-                // because hash-only changes modify the URL in-place without
-                // navigating:
-                self.history.back();
-                console.warn(
-                    'Error while trying to present in AR with Scene Viewer',
-                );
-                console.warn('Falling back to next ar-mode');
-                // this[$selectARMode]();
-                // Would be nice to activateAR() here, but webXR fails due to not
-                // seeing a user activation.
-            }
-        };
-
-        self.addEventListener('hashchange', undoHashChange, { once: true });
-
-        anchor.setAttribute('href', intent);
-        console.log('Attempting to present in AR with Scene Viewer...');
-        anchor.click();
-    }
-
-    private createSceneViewerSrc(): string {
-        let uri: string | null = null;
-
-        this._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/arquicklook/ARQuickLook.ts

@@ -1,42 +0,0 @@
-import { Object3D } from 'three';
-import { type DIVEScene } from '../../scene/Scene';
-import { USDZExporter } from 'three/examples/jsm/exporters/USDZExporter';
-
-export class DIVEARQuickLook {
-    private static _usdzExporter: USDZExporter = new USDZExporter();
-
-    public static Launch(scene: DIVEScene): Promise<void> {
-        // create node to build usdz from
-        const quickLookScene = new Object3D();
-
-        // extract models from scene
-        quickLookScene.add(...this.extractModels(scene));
-
-        // launch ARQuickLook
-        return this.launchARFromNode(quickLookScene);
-    }
-
-    private static extractModels(scene: DIVEScene): Object3D[] {
-        // extract models
-        return scene.Root.children;
-    }
-
-    private static launchARFromNode(node: Object3D): Promise<void> {
-        // bundle USDZ
-        return this._usdzExporter
-            .parse(node, { quickLookCompatible: true })
-            .then((usdz: Uint8Array) => {
-                // create blob
-                const blob = new Blob([usdz], { type: 'model/vnd.usdz+zip' });
-                const url = URL.createObjectURL(blob);
-
-                // launch ARQuickLook
-                const a = document.createElement('a');
-                a.innerHTML = '<picture></picture>'; // This is actually needed so the viewer opens instantly
-                a.rel = 'ar';
-                a.href = url;
-                a.download = 'scene.usdz';
-                a.click();
-            });
-    }
-}

package/src/ar/webxr/WebXR.ts

@@ -1,176 +0,0 @@
-import { Vector3 } from 'three';
-import DIVEOrbitControls from '../../controls/OrbitControls';
-import { type DIVERenderer } from '../../renderer/Renderer';
-import { type DIVEScene } from '../../scene/Scene';
-import { Overlay } from './overlay/Overlay';
-import { DIVEWebXRController } from './controller/WebXRController';
-
-export class DIVEWebXR {
-    // general members
-    private static _renderer: DIVERenderer;
-    private static _scene: DIVEScene;
-    private static _controller: DIVEOrbitControls;
-
-    // camera reset members
-    private static _cameraPosition: Vector3;
-    private static _cameraTarget: Vector3;
-
-    // render loop members
-    private static _renderCallbackId: string | null = null;
-
-    // setup members
-    private static _session: XRSession | null = null;
-    private static _referenceSpaceType: XRReferenceSpaceType = 'local';
-    private static _overlay: Overlay | null = null;
-    private static _options = {
-        requiredFeatures: [
-            'local',
-            'hit-test',
-        ],
-        optionalFeatures: [
-            'light-estimation',
-            'local-floor',
-            'dom-overlay',
-            'depth-sensing',
-        ],
-        depthSensing: {
-            usagePreference: ['gpu-optimized'],
-            dataFormatPreference: [],
-        },
-        domOverlay: { root: {} as HTMLElement },
-    };
-
-    private static _xrController: DIVEWebXRController | null = null;
-
-    public static async Launch(
-        renderer: DIVERenderer,
-        scene: DIVEScene,
-        controller: DIVEOrbitControls,
-    ): Promise<void> {
-        this._renderer = renderer;
-        this._scene = scene;
-        this._controller = controller;
-
-        // setting camera reset values
-        this._cameraPosition = this._controller.object.position.clone();
-        this._cameraTarget = this._controller.target.clone();
-
-        if (!navigator.xr) {
-            console.error('WebXR not supported');
-            return Promise.reject();
-        }
-
-        // setup current instance
-        this._renderer.xr.enabled = true;
-        this._scene.InitXR(renderer);
-
-        // creating overlay
-        if (!DIVEWebXR._overlay) {
-            const overlay = new Overlay();
-            DIVEWebXR._overlay = overlay;
-        }
-        DIVEWebXR._options.domOverlay = { root: DIVEWebXR._overlay.Element };
-
-        // request session
-        const session = await navigator.xr.requestSession(
-            'immersive-ar',
-            this._options,
-        );
-        session.addEventListener('end', () => {
-            this._onSessionEnded();
-        });
-
-        // build up session
-        renderer.xr.setReferenceSpaceType(this._referenceSpaceType);
-        await renderer.xr.setSession(session);
-        DIVEWebXR._overlay.Element.style.display = '';
-        this._session = session;
-
-        // add end session event listener
-        DIVEWebXR._overlay.CloseButton.addEventListener('click', () =>
-            this.End(),
-        );
-
-        // start session
-        await this._onSessionStarted();
-
-        return Promise.resolve();
-    }
-
-    public static Update(_time: DOMHighResTimeStamp, frame: XRFrame): void {
-        if (!this._session) return;
-
-        if (this._xrController) {
-            this._xrController.Update(frame);
-        }
-    }
-
-    public static End(): void {
-        if (!this._session) return;
-        this._session.end();
-    }
-
-    private static async _onSessionStarted(): Promise<void> {
-        if (!this._session) return;
-
-        // add update callback to render loop
-        this._renderCallbackId = this._renderer.AddPreRenderCallback(
-            (time: DOMHighResTimeStamp, frame: XRFrame) => {
-                this.Update(time, frame);
-            },
-        );
-
-        this._xrController = new DIVEWebXRController(
-            this._session,
-            this._renderer,
-            this._scene,
-        );
-        await this._xrController.Init().catch(() => {
-            this.End();
-        });
-
-        return Promise.resolve();
-    }
-
-    private static _onSessionEnded(): void {
-        if (!this._session) return;
-
-        if (this._xrController) {
-            this._xrController.Dispose();
-        }
-
-        // remove Update() callback
-        if (this._renderCallbackId) {
-            this._renderer.RemovePreRenderCallback(this._renderCallbackId);
-            this._renderCallbackId = null;
-        }
-
-        // disable XR on renderer to restore canvas rendering
-        this._renderer.xr.enabled = false;
-
-        // resize renderer
-        const canvasWrapper = this._renderer.domElement.parentElement;
-        if (canvasWrapper) {
-            const { clientWidth, clientHeight } = canvasWrapper;
-            this._renderer.OnResize(clientWidth, clientHeight);
-
-            // resize camera
-            this._controller.object.OnResize(clientWidth, clientHeight);
-        }
-
-        // reset camera
-        this._controller.object.position.copy(this._cameraPosition);
-        this._controller.target.copy(this._cameraTarget);
-
-        // reset camera values
-        this._cameraPosition.set(0, 0, 0);
-        this._cameraTarget.set(0, 0, 0);
-
-        // dispose xr scene
-        this._scene.DisposeXR();
-
-        this._session.removeEventListener('end', this._onSessionEnded);
-        DIVEWebXR._overlay!.Element.style.display = 'none';
-        this._session = null;
-    }
-}