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

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

@@ -1,6 +1,7 @@
 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();
@@ -26,6 +27,30 @@ 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();
@@ -34,17 +59,26 @@ describe('dive/scene/DIVEScene', () => {
     it('should instantiate', () => {
         const scene = new DIVEScene();
         expect(scene).toBeDefined();
-        expect(scene.children).toHaveLength(3);
     });
 
-    it('should have Floor', () => {
+    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', () => {
         const scene = new DIVEScene();
-        expect(scene.Floor).toBeDefined();
+        expect(() => scene.InitXR(mockRenderer)).not.toThrow();
     });
 
-    it('should have Grid', () => {
+    it('should DisposeXR', () => {
         const scene = new DIVEScene();
-        expect(scene.Grid).toBeDefined();
+        expect(() => scene.DisposeXR()).not.toThrow();
     });
 
     it('should set background color', () => {

package/src/scene/root/Root.ts

@@ -238,6 +238,7 @@ 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/scene/xrroot/XRRoot.ts

@@ -0,0 +1,56 @@
+import { Mesh, Object3D, PlaneGeometry, ShadowMaterial } from 'three';
+import { DIVERoot } from '../root/Root';
+import { type DIVERenderer } from '../../renderer/Renderer';
+import { DIVEXRLightRoot } from './xrlightroot/XRLightRoot';
+import { type DIVEScene } from '../Scene';
+
+export class DIVEXRRoot extends Object3D {
+    private _xrLightRoot: DIVEXRLightRoot;
+    private _xrModelRoot: DIVERoot;
+    private _xrHandNode: Object3D;
+
+    public get XRModelRoot(): DIVERoot {
+        return this._xrModelRoot;
+    }
+
+    public get XRLightRoot(): DIVEXRLightRoot {
+        return this._xrLightRoot;
+    }
+
+    public get XRHandNode(): Object3D {
+        return this._xrHandNode;
+    }
+
+    private _xrShadowPlane: Mesh;
+
+    constructor(scene: DIVEScene) {
+        super();
+        this.name = 'XRRoot';
+
+        this._xrModelRoot = new DIVERoot();
+        this._xrModelRoot.name = 'XRModelRoot';
+        this.add(this._xrModelRoot);
+
+        this._xrShadowPlane = new Mesh(
+            new PlaneGeometry(100, 100),
+            new ShadowMaterial({ opacity: 1, transparent: true }),
+        );
+        this._xrModelRoot.add(this._xrShadowPlane);
+
+        this._xrLightRoot = new DIVEXRLightRoot(scene);
+        this._xrLightRoot.name = 'XRLightRoot';
+        this.add(this._xrLightRoot);
+
+        this._xrHandNode = new Object3D();
+        this._xrHandNode.name = 'XRHandNode';
+        this.add(this._xrHandNode);
+    }
+
+    public InitLightEstimation(renderer: DIVERenderer): void {
+        this._xrLightRoot.InitLightEstimation(renderer);
+    }
+
+    public DisposeLightEstimation(): void {
+        this._xrLightRoot.DisposeLightEstimation();
+    }
+}

package/src/scene/xrroot/xrlightroot/XRLightRoot.ts

@@ -0,0 +1,80 @@
+import { XREstimatedLight } from 'three/examples/jsm/webxr/XREstimatedLight';
+import { type DIVERenderer } from '../../../renderer/Renderer';
+import { Object3D } from 'three';
+import { type DIVEScene } from '../../Scene';
+import { PRODUCT_LAYER_MASK } from '../../../constant/VisibilityLayerMask';
+import { DIVERoot } from '../../root/Root';
+
+export class DIVEXRLightRoot extends Object3D {
+    private _scene: DIVEScene;
+
+    private _xrLight: XREstimatedLight | null;
+    private _lightRoot: DIVERoot;
+
+    constructor(scene: DIVEScene) {
+        super();
+        this.name = 'XRLightRoot';
+
+        this._scene = scene;
+
+        // placeholder for XR light
+        this._xrLight = null;
+
+        // add scene
+        this._lightRoot = new DIVERoot();
+        this._lightRoot.UpdateSceneObject({
+            id: 'XRSceneLight',
+            entityType: 'light',
+            name: 'XRSceneLight',
+            type: 'scene',
+            color: 0xffffff,
+            intensity: 1,
+            enabled: true,
+            visible: true,
+        });
+        this.add(this._lightRoot);
+    }
+
+    public InitLightEstimation(renderer: DIVERenderer): void {
+        if (!this._xrLight) {
+            this._xrLight = new XREstimatedLight(renderer, true);
+            this._xrLight.layers.mask = PRODUCT_LAYER_MASK;
+            this.add(this._xrLight);
+        }
+
+        this._xrLight.addEventListener('estimationstart', () => {
+            this.onEstimationStart();
+        });
+        this._xrLight.addEventListener('estimationend', () => {
+            this.onEstimationEnd();
+        });
+    }
+
+    public DisposeLightEstimation(): void {
+        if (!this._xrLight) return;
+
+        this._xrLight.removeEventListener('estimationstart', () => {
+            this.onEstimationStart();
+        });
+        this._xrLight.removeEventListener('estimationend', () => {
+            this.onEstimationEnd();
+        });
+    }
+
+    private onEstimationStart(): void {
+        this._lightRoot.visible = false;
+
+        if (!this._xrLight) return;
+
+        if (this._xrLight.environment) {
+            this._scene.environment = this._xrLight.environment;
+        }
+    }
+
+    private onEstimationEnd(): void {
+        this._lightRoot.visible = true;
+        this._scene.environment = null;
+
+        if (!this._xrLight) return;
+    }
+}

package/src/toolbox/BaseTool.ts

@@ -1,10 +1,16 @@
-import { Intersection, Object3D, Raycaster, Vector2, Vector3 } from 'three';
+import {
+    type Intersection,
+    type Object3D,
+    Raycaster,
+    Vector2,
+    Vector3,
+} from 'three';
 import {
     PRODUCT_LAYER_MASK,
     UI_LAYER_MASK,
 } from '../constant/VisibilityLayerMask';
-import { DIVEScene } from '../scene/Scene';
-import DIVEOrbitControls from '../controls/OrbitControls';
+import { type DIVEScene } from '../scene/Scene';
+import type 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 { DIVEScene } from '../../scene/Scene.ts';
+import { type 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/Addons.js', () => {
+jest.mock('three/examples/jsm/controls/TransformControls', () => {
     return {
         TransformControls: jest.fn(function () {
             (this.addEventListener = (

package/src/toolbox/transform/TransformTool.ts

@@ -1,7 +1,7 @@
 import { DIVEBaseTool } from '../BaseTool.ts';
-import { DIVEScene } from '../../scene/Scene.ts';
-import DIVEOrbitControls from '../../controls/OrbitControls.ts';
-import { TransformControls } from 'three/examples/jsm/Addons';
+import { type DIVEScene } from '../../scene/Scene.ts';
+import type DIVEOrbitControls from '../../controls/OrbitControls.ts';
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
 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();
         });
 
-        scene.add(this._gizmo);
+        this._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/Addons.js', () => {
+jest.mock('three/examples/jsm/controls/TransformControls', () => {
     return {
         TransformControls: jest.fn(function () {
             (this.addEventListener = (
@@ -189,9 +189,7 @@ describe('dive/toolbox/select/DIVETransformTool', () => {
         const transformTool = new DIVETransformTool(mockScene, mockController);
         expect(() => transformTool.SetGizmoVisibility(true)).not.toThrow();
 
-        expect(mockScene.add).toBeCalled();
-
-        mockScene.children.includes = jest.fn().mockReturnValue(true);
+        mockScene.Root.children.includes = jest.fn().mockReturnValue(true);
         expect(() => transformTool.SetGizmoVisibility(false)).not.toThrow();
     });
 });