@shopware-ag/dive 1.16.24 → 1.16.26-beta.0

package/src/ar/webxr/raycaster/WebXRRaycaster.ts

@@ -0,0 +1,131 @@
+import { Matrix4, Mesh, Vector3 } from 'three';
+import { DIVERenderer } from '../../../renderer/Renderer';
+import { DIVEWebXRRaycasterAR } from './ar/WebXRRaycasterAR';
+import { DIVEWebXRRaycasterTHREE } from './three/WebXRRaycasterTHREE';
+import { DIVEScene } from '../../../scene/Scene';
+import { DIVEEventExecutor } from '../../../events/EventExecutor';
+
+/**
+ * object is undefined when AR world is hit.
+ */
+export type DIVEHitResult = {
+    point: Vector3;
+    matrix: Matrix4;
+    object?: Mesh;
+};
+
+export type DIVEWebXRRaycasterEvents = {
+    AR_HIT_FOUND: {
+        hit: DIVEHitResult;
+    };
+    AR_HIT_LOST: undefined;
+    SCENE_HIT_FOUND: {
+        hit: DIVEHitResult;
+    };
+    SCENE_HIT_LOST: undefined;
+};
+
+export class DIVEWebXRRaycaster extends DIVEEventExecutor<DIVEWebXRRaycasterEvents> {
+    private _session: XRSession;
+
+    private _initialized: boolean = false;
+
+    private _threeRaycaster: DIVEWebXRRaycasterTHREE;
+    private _arRaycaster: DIVEWebXRRaycasterAR;
+
+    private _arHitResultBuffer: DIVEHitResult[] = [];
+    private _sceneHitResultBuffer: DIVEHitResult[] = [];
+
+    // buffers
+    private _hasHit: boolean = false;
+
+    constructor(session: XRSession, renderer: DIVERenderer, scene: DIVEScene) {
+        super();
+
+        this._session = session;
+
+        this._threeRaycaster = new DIVEWebXRRaycasterTHREE(renderer, scene);
+        this._arRaycaster = new DIVEWebXRRaycasterAR(session, renderer);
+    }
+
+    public Dispose(): void {
+        // dispose code here
+        this._initialized = false;
+    }
+
+    public async Init(): Promise<this> {
+        if (!this._session) {
+            console.error(
+                'DIVEWebXRRaycaster: No session set in Init()! Aborting initialization...',
+            );
+            return Promise.reject();
+        }
+
+        if (this._initialized) {
+            console.error(
+                'DIVEWebXRRaycaster: Already initialized! Aborting initialization...',
+            );
+            return Promise.reject();
+        }
+
+        await this._threeRaycaster.Init();
+        await this._arRaycaster.Init();
+
+        console.log('DIVEWebXRRaycaster: Initialized');
+
+        this._initialized = true;
+
+        return Promise.resolve(this);
+    }
+
+    public GetARIntersections(frame: XRFrame): DIVEHitResult[] {
+        // check for ar hits
+        this._arHitResultBuffer = this._arRaycaster.GetIntersections(frame);
+        if (this._arHitResultBuffer.length > 0) {
+            // hit found
+            this.onARHitFound(this._arHitResultBuffer[0]);
+        } else {
+            // hit nothing
+            this.onARHitLost();
+        }
+        return this._arHitResultBuffer;
+    }
+
+    public GetSceneIntersections(): DIVEHitResult[] {
+        // check for scene hits
+        this._sceneHitResultBuffer = this._threeRaycaster.GetIntersections();
+        if (this._sceneHitResultBuffer.length > 0) {
+            // scene hit found
+            this.onSceneHitFound(this._sceneHitResultBuffer[0]);
+            // early return to prevent ar raycaster from overriding scene hit
+        } else {
+            // scene hit nothing
+            this.onSceneHitLost();
+        }
+        return this._sceneHitResultBuffer;
+    }
+
+    private onARHitFound(hit: DIVEHitResult): void {
+        this._hasHit = true;
+        this.dispatch('AR_HIT_FOUND', { hit });
+    }
+
+    private onARHitLost(): void {
+        if (!this._hasHit) return;
+
+        this._hasHit = false;
+        this.dispatch('AR_HIT_LOST');
+    }
+
+    private onSceneHitFound(hit: DIVEHitResult): void {
+        this._hasHit = true;
+        this.dispatch('SCENE_HIT_FOUND', { hit });
+    }
+
+    private onSceneHitLost(): void {
+        if (!this._hasHit) return;
+
+        this._hasHit = false;
+        this.dispatch('SCENE_HIT_LOST');
+    }
+}

package/src/ar/webxr/raycaster/ar/WebXRRaycasterAR.ts

@@ -0,0 +1,102 @@
+import { Matrix4, Vector3 } from 'three';
+import { type DIVERenderer } from '../../../../renderer/Renderer';
+import { type DIVEHitResult } from '../WebXRRaycaster';
+
+export class DIVEWebXRRaycasterAR {
+    private _session: XRSession;
+    private _renderer: DIVERenderer;
+
+    private _transientHitTestSource: XRTransientInputHitTestSource | undefined;
+    private _referenceSpaceBuffer: XRReferenceSpace | null = null;
+
+    private _requesting: boolean = false;
+    private _initialized: boolean = false;
+
+    private _hitMatrixBuffer: Matrix4;
+
+    constructor(session: XRSession, renderer: DIVERenderer) {
+        this._session = session;
+        this._renderer = renderer;
+
+        this._hitMatrixBuffer = new Matrix4();
+    }
+
+    public Dispose(): void {
+        this._transientHitTestSource?.cancel();
+        this._transientHitTestSource = undefined;
+
+        this._initialized = false;
+    }
+
+    public async Init(): Promise<this> {
+        if (!this._session) {
+            console.error(
+                'DIVEWebXRRaycaster: No session set in Init()! Aborting initialization...',
+            );
+            return Promise.reject();
+        }
+
+        if (this._requesting) {
+            console.error(
+                'DIVEWebXRRaycaster: Currently initializing! Aborting initialization...',
+            );
+            return Promise.reject();
+        }
+
+        if (this._initialized) {
+            console.error(
+                'DIVEWebXRRaycaster: Already initialized! Aborting initialization...',
+            );
+            return Promise.reject();
+        }
+
+        this._requesting = true;
+        this._transientHitTestSource = await this._session
+            .requestHitTestSourceForTransientInput!({
+            profile: 'generic-touchscreen',
+        });
+        this._referenceSpaceBuffer = this._renderer.xr.getReferenceSpace();
+        this._requesting = false;
+
+        if (!this._transientHitTestSource) {
+            return Promise.reject();
+        }
+
+        this._initialized = true;
+
+        console.log('DIVEWebXRRaycasterAR: Initialized');
+
+        return Promise.resolve(this);
+    }
+
+    public GetIntersections(frame: XRFrame): DIVEHitResult[] {
+        if (!this._transientHitTestSource) return [];
+
+        const touches = frame.getHitTestResultsForTransientInput(
+            this._transientHitTestSource,
+        );
+        if (touches.length === 0) return [];
+
+        const hits = touches.map((touch: XRTransientInputHitTestResult) => {
+            if (!this._referenceSpaceBuffer) return undefined;
+            if (!touch.results[0]) return undefined;
+            if (!touch.results[0].getPose) return undefined;
+
+            const pose = touch.results[0].getPose(this._referenceSpaceBuffer);
+            if (!pose) return undefined;
+
+            this._hitMatrixBuffer.fromArray(pose.transform.matrix);
+            const position = new Vector3().setFromMatrixPosition(
+                this._hitMatrixBuffer,
+            );
+
+            return {
+                point: position,
+                matrix: this._hitMatrixBuffer,
+                object: undefined,
+            };
+        });
+
+        return hits.filter((hit) => hit !== undefined) as DIVEHitResult[];
+    }
+}

package/src/ar/webxr/raycaster/three/WebXRRaycasterTHREE.ts

@@ -0,0 +1,49 @@
+import {
+    type Intersection,
+    type Mesh,
+    Raycaster,
+    type XRTargetRaySpace,
+} from 'three';
+import { type DIVERenderer } from '../../../../renderer/Renderer';
+import { type DIVEScene } from '../../../../scene/Scene';
+import { type DIVEHitResult } from '../WebXRRaycaster';
+
+export class DIVEWebXRRaycasterTHREE {
+    private _renderer: DIVERenderer;
+    private _scene: DIVEScene;
+
+    private _controller: XRTargetRaySpace;
+
+    // internal raycaster
+    private _raycaster: Raycaster = new Raycaster();
+
+    constructor(renderer: DIVERenderer, scene: DIVEScene) {
+        this._renderer = renderer;
+        this._scene = scene;
+
+        this._controller = this._renderer.xr.getController(0);
+    }
+
+    public async Init(): Promise<this> {
+        console.log('DIVEWebXRRaycasterTHREE: Initialized');
+        return Promise.resolve(this);
+    }
+
+    public GetIntersections(): DIVEHitResult[] {
+        this._controller.updateMatrixWorld();
+        this._raycaster.setFromXRController(this._controller);
+        const intersections = this._raycaster.intersectObjects(
+            this._scene.XRRoot.XRModelRoot.children,
+        );
+
+        if (intersections.length === 0) return [];
+
+        return intersections.map((intersection: Intersection) => {
+            return {
+                point: intersection.point,
+                matrix: intersection.object.matrixWorld,
+                object: intersection.object as Mesh,
+            };
+        });
+    }
+}

package/src/ar/webxr/touchscreencontrols/WebXRTouchscreenControls.ts

@@ -0,0 +1,356 @@
+import { Vector2 } from 'three';
+import { DIVEEventExecutor } from '../../../events/EventExecutor';
+
+export type DIVETouchscreenEvents = {
+    TOUCH_START: {
+        touches: {
+            current: Vector2;
+        }[];
+        touchCount: number;
+    };
+    TOUCH_MOVE: {
+        touches: {
+            current: Vector2;
+            delta: Vector2;
+        }[];
+        touchCount: number;
+    };
+    TOUCH_END: {
+        touches: {
+            current: Vector2;
+        }[];
+        touchCount: number;
+    };
+    ROTATE_START: {
+        current: number;
+    };
+    ROTATE_MOVE: {
+        current: number;
+        delta: number;
+    };
+    ROTATE_END: {
+        current: number;
+    };
+    PINCH_START: {
+        current: number;
+    };
+    PINCH_MOVE: {
+        current: number;
+        delta: number;
+    };
+    PINCH_END: {
+        current: number;
+    };
+};
+
+type DIVETouch = {
+    start: Vector2;
+    current: Vector2;
+    delta: Vector2;
+};
+
+export class DIVEWebXRTouchscreenControls extends DIVEEventExecutor<DIVETouchscreenEvents> {
+    // general members
+    private _session: XRSession;
+
+    // touch members
+    private _touchCount: number = 0;
+    private _touches: DIVETouch[] = [];
+
+    // rotate members
+    private _handleRotateStarted: boolean = false;
+    private _handleRotateMoved: boolean = false;
+    private _handleRotateEnded: boolean = false;
+
+    private _startAngle: number = 0;
+    private _lastAngle: number = 0;
+    private _angleDelta: number = 0;
+
+    // scale members
+    private _handlePinchStarted: boolean = false;
+    private _handlePinchMoved: boolean = false;
+    private _handlePinchEnded: boolean = false;
+
+    private _scaleDistanceStart: number = 0;
+    private _currentDistance: number = 1;
+    private _deltaDistance: number = 0;
+
+    constructor(session: XRSession) {
+        super();
+
+        this._session = session;
+
+        this._touches = [
+            {
+                start: new Vector2(),
+                current: new Vector2(),
+                delta: new Vector2(),
+            },
+            {
+                start: new Vector2(),
+                current: new Vector2(),
+                delta: new Vector2(),
+            },
+        ];
+
+        this._handleRotateStarted = false;
+
+        window.addEventListener('touchstart', (e: TouchEvent) =>
+            this.onTouchStart(e),
+        );
+        window.addEventListener('touchmove', (e: TouchEvent) =>
+            this.onTouchMove(e),
+        );
+        window.addEventListener('touchend', (e: TouchEvent) =>
+            this.onTouchEnd(e),
+        );
+
+        this._session.addEventListener('selectstart', () =>
+            this.onSessionSelectStart(),
+        );
+        this._session.addEventListener('selectend', () =>
+            this.onSessionSelectEnd(),
+        );
+    }
+
+    public Dispose(): void {
+        window.removeEventListener('touchstart', (e: TouchEvent) =>
+            this.onTouchStart(e),
+        );
+        window.removeEventListener('touchmove', (e: TouchEvent) =>
+            this.onTouchMove(e),
+        );
+        window.removeEventListener('touchend', (e: TouchEvent) =>
+            this.onTouchEnd(e),
+        );
+
+        this._session.removeEventListener('selectstart', () =>
+            this.onSessionSelectStart(),
+        );
+        this._session.removeEventListener('selectend', () =>
+            this.onSessionSelectEnd(),
+        );
+    }
+
+    private onTouchStart(event: TouchEvent): void {
+        this._touchCount = event.touches.length;
+
+        this._touches[0].start.set(
+            event.touches[0].clientX,
+            event.touches[0].clientY,
+        );
+        this._touches[0].current.set(
+            event.touches[0].clientX,
+            event.touches[0].clientY,
+        );
+        this._touches[0].delta.set(0, 0);
+
+        if (this._touchCount > 1) {
+            this._touches[1].start.set(
+                event.touches[1].clientX,
+                event.touches[1].clientY,
+            );
+            this._touches[1].current.set(
+                event.touches[1].clientX,
+                event.touches[1].clientY,
+            );
+            this._touches[1].delta.set(0, 0);
+        }
+
+        if (this._touchCount === 2) {
+            this.handleRotateStart();
+            this.handlePinchStart();
+        }
+
+        if (this._handleRotateStarted) {
+            this.dispatch('ROTATE_START', {
+                current: 0,
+            });
+            this._handleRotateStarted = false;
+        }
+
+        if (this._handlePinchStarted) {
+            this.dispatch('PINCH_START', {
+                current: 0,
+            });
+            this._handlePinchStarted = false;
+        }
+    }
+
+    private onTouchMove(event: TouchEvent): void {
+        this._touchCount = event.touches.length;
+
+        this._touches[0].start.set(
+            event.touches[0].clientX,
+            event.touches[0].clientY,
+        );
+        this._touches[0].current.set(
+            event.touches[0].clientX,
+            event.touches[0].clientY,
+        );
+        this._touches[0].delta.copy(
+            this._touches[0].current.clone().sub(this._touches[0].start),
+        );
+
+        if (this._touchCount > 1) {
+            this._touches[1].start.set(
+                event.touches[1].clientX,
+                event.touches[1].clientY,
+            );
+            this._touches[1].current.set(
+                event.touches[1].clientX,
+                event.touches[1].clientY,
+            );
+            this._touches[1].delta.copy(
+                this._touches[1].current.clone().sub(this._touches[1].start),
+            );
+        }
+
+        if (this._touchCount === 2) {
+            this.handleRotateMoved();
+            this.handlePinchMoved();
+        }
+
+        if (this._touchCount === 1) {
+            this.dispatch('TOUCH_MOVE', {
+                touches: [
+                    {
+                        current: this._touches[0].current.clone(),
+                        delta: this._touches[0].delta.clone(),
+                    },
+                    {
+                        current: this._touches[1].current.clone(),
+                        delta: this._touches[1].delta.clone(),
+                    },
+                ],
+                touchCount: this._touchCount,
+            });
+        }
+
+        if (this._touchCount === 2) {
+            if (this._handleRotateMoved) {
+                this.dispatch('ROTATE_MOVE', {
+                    current: this._lastAngle,
+                    delta: this._angleDelta,
+                });
+                this._handleRotateMoved = false;
+            }
+
+            if (this._handlePinchMoved) {
+                this.dispatch('PINCH_MOVE', {
+                    current: this._currentDistance,
+                    delta: this._deltaDistance,
+                });
+                this._handlePinchMoved = false;
+            }
+        }
+    }
+
+    private onTouchEnd(event: TouchEvent): void {
+        this._touchCount = event.touches.length;
+
+        if (this._touchCount === 0) {
+            this._touches[0].start.set(0, 0);
+            this._touches[0].current.set(0, 0);
+            this._touches[0].delta.set(0, 0);
+        }
+
+        if (this._touchCount === 1) {
+            this.handleRotateEnded();
+            this.handlePinchEnded();
+
+            this._touches[1].start.set(0, 0);
+            this._touches[1].current.set(0, 0);
+            this._touches[1].delta.set(0, 0);
+        }
+
+        if (this._handleRotateEnded) {
+            this.dispatch('ROTATE_END', {
+                current: this._lastAngle,
+            });
+            this._handleRotateEnded = false;
+        }
+
+        if (this._handlePinchEnded) {
+            this.dispatch('PINCH_END', {
+                current: this._currentDistance,
+            });
+            this._handlePinchEnded = false;
+        }
+    }
+
+    private onSessionSelectStart(): void {
+        this.dispatch('TOUCH_START', {
+            touches: [
+                {
+                    current: this._touches[0].current.clone(),
+                },
+                {
+                    current: this._touches[1].current.clone(),
+                },
+            ],
+            touchCount: this._touchCount,
+        });
+    }
+
+    private onSessionSelectEnd(): void {
+        this.dispatch('TOUCH_END', {
+            touches: [
+                {
+                    current: this._touches[0].current.clone(),
+                },
+                {
+                    current: this._touches[1].current.clone(),
+                },
+            ],
+            touchCount: this._touchCount,
+        });
+    }
+
+    // rotation handler
+    private handleRotateStart(): void {
+        this._handleRotateStarted = true;
+        this._startAngle = this._touches[1].start
+            .clone()
+            .sub(this._touches[0].current)
+            .angle();
+    }
+
+    private handleRotateMoved(): void {
+        this._handleRotateMoved = true;
+        const currentAngle = this._touches[1].current
+            .clone()
+            .sub(this._touches[0].current)
+            .angle();
+        this._angleDelta = currentAngle - this._startAngle;
+        this._lastAngle = this._angleDelta * -1;
+    }
+
+    private handleRotateEnded(): void {
+        this._handleRotateEnded = true;
+    }
+
+    // pinch handler
+    private handlePinchStart(): void {
+        this._handlePinchStarted = true;
+
+        this._scaleDistanceStart = this._touches[1].start.distanceTo(
+            this._touches[0].current,
+        );
+    }
+
+    private handlePinchMoved(): void {
+        this._handlePinchMoved = true;
+
+        const beforeDistance = this._currentDistance;
+        const distance = this._touches[1].current.distanceTo(
+            this._touches[0].current,
+        );
+        this._currentDistance = distance / this._scaleDistanceStart;
+        this._deltaDistance = this._currentDistance - beforeDistance;
+    }
+
+    private handlePinchEnded(): void {
+        this._handlePinchEnded = true;
+    }
+}

package/src/axiscamera/AxisCamera.ts

@@ -1,7 +1,7 @@
 import {
     AxesHelper,
     Color,
-    Material,
+    type Material,
     Matrix4,
     OrthographicCamera,
     Vector4,
@@ -16,9 +16,9 @@ import {
     AxesColorGreenLetter,
     AxesColorBlueLetter,
 } from '../constant/AxisHelperColors.ts';
-import { DIVERenderer } from '../renderer/Renderer.ts';
-import { DIVEScene } from '../scene/Scene.ts';
-import DIVEOrbitControls from '../controls/OrbitControls.ts';
+import { type DIVERenderer } from '../renderer/Renderer.ts';
+import { type DIVEScene } from '../scene/Scene.ts';
+import type DIVEOrbitControls from '../controls/OrbitControls.ts';
 
 /**
  * Shows the scene axes in the bottom left corner of the screen.

package/src/axiscamera/__test__/AxisCamera.test.ts

@@ -118,6 +118,10 @@ const mockScene = {
         Grid: {
             SetVisibility: jest.fn(),
         },
+        HelperRoot: {
+            add: jest.fn(),
+            remove: jest.fn(),
+        },
     },
 } as unknown as DIVEScene;