@shopware-ag/dive 1.19.1-beta.0 → 1.19.1-beta.2

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

@@ -1,190 +0,0 @@
-import { Box3, Color, Euler, Mesh, Object3D, Vector3 } from 'three';
-import { DIVEScene } from '../../../scene/Scene';
-import { ARSystemOptions } from '../../AR';
-import { SceneViewer } from '../SceneViewer';
-import { SystemInfo } from '../../../info/Info';
-
-// Mock DIVEInfo
-jest.mock('../../../info/Info', () => ({
-    DIVEInfo: {
-        GetSystem: jest.fn().mockReturnValue('Android'),
-        GetSupportsARQuickLook: jest.fn().mockReturnValue(false),
-    },
-}));
-
-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;
-        }),
-    };
-});
-
-// Mock URL and document APIs
-const mockLocation = new URL('https://example.com');
-const mockCreateElement = jest.fn();
-const mockSetAttribute = jest.fn();
-const mockClick = jest.fn();
-
-Object.defineProperty(window, 'location', {
-    value: mockLocation,
-    writable: true,
-});
-
-document.createElement = mockCreateElement.mockReturnValue({
-    setAttribute: mockSetAttribute,
-    click: mockClick,
-});
-
-describe('DIVESceneViewer', () => {
-    const mockUri = 'https://example.com/model.glb';
-    let mockOptions: ARSystemOptions;
-
-    beforeEach(() => {
-        mockOptions = {
-            arPlacement: 'horizontal',
-            arScale: 'auto',
-        };
-        jest.clearAllMocks();
-    });
-
-    describe('constructor', () => {
-        it('should create an instance', () => {
-            const sceneViewer = new SceneViewer();
-            expect(sceneViewer).toBeInstanceOf(SceneViewer);
-        });
-    });
-
-    describe('launch', () => {
-        it('should launch with default options', () => {
-            const sceneViewer = new SceneViewer();
-            sceneViewer.launch(mockUri);
-
-            expect(mockCreateElement).toHaveBeenCalledWith('a');
-            expect(mockSetAttribute).toHaveBeenCalledWith(
-                'href',
-                expect.stringContaining('mode=ar_preferred'),
-            );
-            expect(mockClick).toHaveBeenCalled();
-        });
-
-        it('should launch with custom options', () => {
-            const options: ARSystemOptions = {
-                arPlacement: 'vertical',
-                arScale: 'fixed',
-            };
-            const sceneViewer = new SceneViewer();
-            sceneViewer.launch(mockUri, options);
-
-            expect(mockCreateElement).toHaveBeenCalledWith('a');
-            expect(mockSetAttribute).toHaveBeenCalledWith(
-                'href',
-                expect.stringContaining('enable_vertical_placement=true'),
-            );
-            expect(mockSetAttribute).toHaveBeenCalledWith(
-                'href',
-                expect.stringContaining('resizable=false'),
-            );
-            expect(mockClick).toHaveBeenCalled();
-        });
-
-        it('should handle sound parameter in URL', () => {
-            const sceneViewer = new SceneViewer();
-            const params = new URLSearchParams();
-            params.set('sound', 'sound.mp3');
-
-            // Access private method for testing
-            const applySoundOption = (sceneViewer as any)._applySoundOption;
-            applySoundOption(params, mockLocation.toString());
-
-            expect(params.get('sound')).toBe('https://example.com/sound.mp3');
-        });
-
-        it('should handle link parameter in URL', () => {
-            const sceneViewer = new SceneViewer();
-            const params = new URLSearchParams();
-            params.set('link', 'details.html');
-
-            // Access private method for testing
-            const applyLinkOption = (sceneViewer as any)._applyLinkOption;
-            applyLinkOption(params, mockLocation.toString());
-
-            expect(params.get('link')).toBe('https://example.com/details.html');
-        });
-
-        it('should create intent URL with correct parameters', () => {
-            const sceneViewer = new SceneViewer();
-            const params = new URLSearchParams();
-            params.set('mode', 'ar_preferred');
-
-            // Access private method for testing and bind it to the instance
-            const createIntent = (sceneViewer as any)._createIntent.bind(
-                sceneViewer,
-            );
-            const intentUrl = createIntent(
-                mockLocation.toString(),
-                mockUri,
-                params,
-            );
-
-            expect(intentUrl).toContain(
-                'intent://arvr.google.com/scene-viewer/1.2',
-            );
-            expect(intentUrl).toContain('mode=ar_preferred');
-            expect(intentUrl).toContain('file=' + mockUri);
-            expect(intentUrl).toContain('scheme=https');
-            expect(intentUrl).toContain(
-                'package=com.google.android.googlequicksearchbox',
-            );
-        });
-
-        it('should handle relative model URLs', () => {
-            const relativeUri = '/models/model.glb';
-            const sceneViewer = new SceneViewer();
-            sceneViewer.launch(relativeUri);
-
-            expect(mockSetAttribute).toHaveBeenCalledWith(
-                'href',
-                expect.stringContaining(
-                    'file=https://example.com/models/model.glb',
-                ),
-            );
-        });
-
-        it('should handle absolute model URLs', () => {
-            const absoluteUri = 'https://cdn.example.com/model.glb';
-            const sceneViewer = new SceneViewer();
-            sceneViewer.launch(absoluteUri);
-
-            expect(mockSetAttribute).toHaveBeenCalledWith(
-                'href',
-                expect.stringContaining(
-                    'file=https://cdn.example.com/model.glb',
-                ),
-            );
-        });
-
-        it('should handle special characters in model URL', () => {
-            const specialUri = 'https://example.com/model with spaces.glb';
-            const sceneViewer = new SceneViewer();
-            sceneViewer.launch(specialUri);
-
-            expect(mockSetAttribute).toHaveBeenCalledWith(
-                'href',
-                expect.stringContaining(
-                    'file=https://example.com/model%20with%20spaces.glb',
-                ),
-            );
-        });
-    });
-});

package/src/ar/webxr/WebXR.ts

@@ -1,177 +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)
-            .catch((reason) => {
-                return Promise.reject(reason);
-            });
-        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;
-    }
-}

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

@@ -1,340 +0,0 @@
-import {
-    Matrix4,
-    Mesh,
-    Object3D,
-    Quaternion,
-    Vector3,
-    WebXRArrayCamera,
-} from 'three';
-import { DIVERenderer } from '../../../renderer/Renderer';
-import { DIVEScene } from '../../../scene/Scene';
-import { DIVEWebXRCrosshair } from '../crosshair/WebXRCrosshair';
-import { DIVEWebXRRaycaster } from '../raycaster/WebXRRaycaster';
-import { DIVEWebXROrigin } from '../origin/WebXROrigin';
-import {
-    DIVETouchscreenEvents,
-    DIVEWebXRTouchscreenControls,
-} from '../touchscreencontrols/WebXRTouchscreenControls';
-import { type DIVEMovable } from '../.././../interface/Movable';
-import { findInterface } from '../../../helper/findInterface/findInterface';
-
-export class DIVEWebXRController extends Object3D {
-    // general members
-    private _renderer: DIVERenderer;
-    private _scene: DIVEScene;
-    private _session: XRSession;
-
-    private _frameBuffer: XRFrame | null = null;
-
-    // raycaster members
-    private _xrRaycaster: DIVEWebXRRaycaster;
-    private _origin: DIVEWebXROrigin;
-
-    // crosshair
-    private _crosshair: DIVEWebXRCrosshair;
-
-    // controller members
-    private _touchscreenControls: DIVEWebXRTouchscreenControls;
-    private _handNodeInitialPosition = new Vector3();
-    private _xrCamera: WebXRArrayCamera;
-    private _placed: boolean = false;
-
-    // grabbing
-    private _grabbedObject: Object3D | null = null;
-    private _arHitPosition: Vector3 = new Vector3();
-    private _arHitQuaternion: Quaternion = new Quaternion();
-    private _arHitScale: Vector3 = new Vector3(1, 1, 1);
-
-    // grabbing position
-    private _initialObjectPosition: Vector3 | null = null;
-    private _initialRaycastHit: Vector3 | null = null;
-    private _deltaRaycastHit: Vector3 = new Vector3();
-
-    // grabbing rotation
-    private _touchQuaterion: Quaternion = new Quaternion();
-
-    // grabbing scale
-    private _touchScale: number = 1;
-    private _scaleThreshold: number = 0.1;
-
-    constructor(session: XRSession, renderer: DIVERenderer, scene: DIVEScene) {
-        super();
-
-        this._renderer = renderer;
-        this._scene = scene;
-        this._session = session;
-
-        this._xrRaycaster = new DIVEWebXRRaycaster(session, renderer, scene);
-        this._origin = new DIVEWebXROrigin(this._session, this._renderer, [
-            'plane',
-        ]);
-
-        this._crosshair = new DIVEWebXRCrosshair();
-        this._crosshair.visible = false;
-
-        this._xrCamera = this._renderer.xr.getCamera();
-
-        this._scene.XRRoot.XRHandNode.position.set(0, -0.05, -0.25);
-        this._handNodeInitialPosition =
-            this._scene.XRRoot.XRHandNode.position.clone();
-
-        this._touchscreenControls = new DIVEWebXRTouchscreenControls(
-            this._session,
-        );
-
-        // translating
-        this._touchscreenControls.Subscribe('TOUCH_START', () =>
-            this.onTouchStart(),
-        );
-        this._touchscreenControls.Subscribe('TOUCH_MOVE', () =>
-            this.onTouchMove(),
-        );
-        this._touchscreenControls.Subscribe('TOUCH_END', (p) =>
-            this.onTouchEnd(p),
-        );
-
-        // rotating
-        this._touchscreenControls.Subscribe('ROTATE_START', () =>
-            this.onRotateStart(),
-        );
-        this._touchscreenControls.Subscribe('ROTATE_MOVE', (p) =>
-            this.onRotateMove(p),
-        );
-
-        // scaling
-        this._touchscreenControls.Subscribe('PINCH_START', () =>
-            this.onPinchStart(),
-        );
-        this._touchscreenControls.Subscribe('PINCH_MOVE', (p) =>
-            this.onPinchMove(p),
-        );
-    }
-
-    public async Init(): Promise<this> {
-        this.prepareScene();
-
-        await this.initOrigin();
-        await this.initRaycaster();
-
-        return Promise.resolve(this);
-    }
-
-    public Dispose(): void {
-        this.restoreScene();
-
-        this._origin.Dispose();
-        this._xrRaycaster.Dispose();
-
-        // reset placement members
-        this._placed = false;
-    }
-
-    public Update(frame: XRFrame): void {
-        this._frameBuffer = frame;
-
-        if (!this._placed) {
-            this.updateHandNode();
-
-            if (this._origin) {
-                this._origin.Update(frame);
-            }
-        }
-    }
-
-    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
-        this._origin = await this._origin.Init();
-
-        // set resolve callback: place objects at origin when it is set
-        this._origin.originSet.then(() => {
-            this.placeObjects(this._origin.matrix);
-        });
-    }
-
-    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);
-        });
-        this._placed = true;
-    }
-
-    // grabbing
-    private updateObject(): void {
-        if (!this._grabbedObject) return;
-
-        this._grabbedObject.position.copy(this._arHitPosition);
-        this._grabbedObject.quaternion.copy(
-            this._arHitQuaternion.clone().multiply(this._touchQuaterion),
-        );
-        this._grabbedObject.scale.copy(
-            new Vector3(
-                this._touchScale,
-                this._touchScale,
-                this._touchScale,
-            ).multiply(this._arHitScale),
-        );
-    }
-
-    private onTouchStart(): void {
-        const sceneHits = this._xrRaycaster.GetSceneIntersections();
-        console.log('sceneHits', sceneHits);
-        if (sceneHits.length === 0) return;
-        if (!sceneHits[0].object) return;
-
-        const moveable = findInterface<DIVEMovable>(
-            sceneHits[0].object,
-            'isMovable',
-        );
-        if (!moveable) return;
-
-        this._grabbedObject = moveable;
-    }
-
-    private onTouchMove(): void {
-        // raycast ar
-        if (!this._frameBuffer) return;
-        if (!this._grabbedObject) return;
-
-        const intersections = this._xrRaycaster.GetARIntersections(
-            this._frameBuffer,
-        );
-        if (intersections.length === 0) {
-            this._crosshair.visible = false;
-            return;
-        }
-
-        const hit = intersections[0];
-
-        this._crosshair.visible = true;
-        this._crosshair.matrix.copy(hit.matrix);
-
-        if (!this._grabbedObject) return;
-
-        // if initial values have been reset by TOUCH_END event then set them again
-        if (!this._initialObjectPosition || !this._initialRaycastHit) {
-            this._initialObjectPosition = this._grabbedObject.position.clone();
-            this._initialRaycastHit = hit.point.clone();
-        }
-
-        // decompose hit matrix to apply hit matrix to object
-        hit.matrix.decompose(
-            this._arHitPosition,
-            this._arHitQuaternion,
-            this._arHitScale,
-        );
-
-        // calculate raycast hit delta
-        this._deltaRaycastHit.copy(
-            hit.point.clone().sub(this._initialRaycastHit),
-        );
-
-        // apply moved raycast delta to actual object position
-        this._arHitPosition.copy(
-            this._initialObjectPosition.clone().add(this._deltaRaycastHit),
-        );
-
-        console.log('arHitPosition', this._arHitPosition);
-
-        this.updateObject();
-    }
-
-    private onTouchEnd(payload: DIVETouchscreenEvents['TOUCH_END']): void {
-        if (payload.touchCount === 0) {
-            this._crosshair.visible = false;
-
-            // reset grab
-            this._initialObjectPosition = null;
-            this._initialRaycastHit = null;
-            this._grabbedObject = null;
-        }
-    }
-
-    private _startTouchQuaternion: Quaternion = new Quaternion();
-    private onRotateStart(): void {
-        this._startTouchQuaternion = this._touchQuaterion.clone();
-    }
-
-    private onRotateMove(payload: DIVETouchscreenEvents['ROTATE_MOVE']): void {
-        this._touchQuaterion.setFromAxisAngle(
-            new Vector3(0, -1, 0),
-            payload.delta * 3,
-        );
-        this._touchQuaterion.multiply(this._startTouchQuaternion);
-        this.updateObject();
-    }
-
-    private _startTouchScale: number = 1;
-    private onPinchStart(): void {
-        this._startTouchScale = this._touchScale;
-    }
-
-    private onPinchMove(payload: DIVETouchscreenEvents['PINCH_MOVE']): void {
-        this._touchScale = this._startTouchScale * payload.current;
-        this.updateObject();
-    }
-
-    // prepare & cleanup scene
-    private prepareScene(): void {
-        this._scene.XRRoot.XRModelRoot.matrixAutoUpdate = false;
-
-        // initialize crosshair
-        this._scene.add(this._crosshair);
-
-        // hang current scene children to hand node
-        const children: Object3D[] = [];
-        this._scene.Root.children.forEach((child) => {
-            const clone = child.clone();
-            clone.layers.enableAll();
-            clone.traverse((obj) => {
-                obj.layers.enableAll();
-                if (obj instanceof Mesh) {
-                    obj.scale.set(0.1, 0.1, 0.1);
-                }
-            });
-            clone.position.set(0, 0, 0);
-            children.push(clone);
-        });
-        this._scene.XRRoot.XRHandNode.add(...children);
-    }
-
-    private restoreScene(): void {
-        this._scene.remove(this._crosshair);
-
-        // clear hand node and remove attached models
-        this._scene.XRRoot.XRHandNode.clear();
-        this._scene.XRRoot.XRModelRoot.clear();
-
-        this._scene.XRRoot.XRModelRoot.matrixAutoUpdate = true;
-    }
-
-    // raycast
-    private async initRaycaster(): Promise<void> {
-        // initialize raycaster
-        await this._xrRaycaster.Init();
-
-        // check if successful
-        if (!this._xrRaycaster) {
-            console.error(
-                'Raycaster not initialized successfully. Aborting WebXR...',
-            );
-            this.Dispose();
-            return Promise.reject();
-        }
-    }
-}