@shopware-ag/dive 1.5.0 → 1.6.0

package/src/com/__test__/Communication.test.ts

@@ -1,7 +1,4 @@
 import DIVECommunication from '../Communication';
-import DIVEScene from '../../scene/Scene';
-import DIVEToolbox from '../../toolbox/Toolbox';
-import DIVEMediaCreator from '../../mediacreator/MediaCreator';
 import '..';
 import '../types';
 import '../actions';
@@ -25,9 +22,13 @@ import '../actions/scene/updatescene';
 import '../actions/toolbox/select/setgizmomode';
 import '../actions/toolbox/transform/setgizmovisible';
 import '../actions/camera/getcameratransform';
-import DIVEOrbitControls from '../../controls/OrbitControls';
-import { COMLight, COMModel, COMPov } from '../types';
-import { Object3D } from 'three';
+import type DIVEScene from '../../scene/Scene';
+import type DIVEToolbox from '../../toolbox/Toolbox';
+import type DIVEOrbitControls from '../../controls/OrbitControls';
+import { type DIVERenderer } from '../../renderer/Renderer';
+import { type COMLight, type COMModel, type COMPov } from '../types';
+import { type Object3D } from 'three';
+import { DIVESelectTool, isSelectTool } from '../../toolbox/select/SelectTool';
 
 jest.mock('three/src/math/MathUtils', () => {
     return {
@@ -35,6 +36,33 @@ jest.mock('three/src/math/MathUtils', () => {
     }
 });
 
+jest.mock('../../mediacreator/MediaCreator', () => {
+    return {
+        default: jest.fn(function () {
+            this.GenerateMedia = jest.fn();
+
+            return this;
+        }),
+    }
+});
+
+jest.mock('../../toolbox/select/SelectTool', () => {
+    return {
+        isSelectTool: jest.fn().mockReturnValue(true),
+        DIVESelectTool: jest.fn().mockImplementation(() => {
+            return {
+                AttachGizmo: jest.fn(),
+                DetachGizmo: jest.fn(),
+            };
+        }),
+    }
+});
+
+const mockRenderer = {
+    render: jest.fn(),
+    OnResize: jest.fn(),
+} as unknown as DIVERenderer;
+
 const mockScene = {
     SetBackground: jest.fn(),
     AddSceneObject: jest.fn(),
@@ -56,8 +84,12 @@ const mockScene = {
             },
             SetVisibility: jest.fn(),
             SetColor: jest.fn(),
-        }
+        },
+        Grid: {
+            SetVisibility: jest.fn(),
+        },
     },
+    ComputeSceneBB: jest.fn(),
 } as unknown as DIVEScene;
 
 const mockController = {
@@ -108,33 +140,44 @@ const mockController = {
             clone: jest.fn().mockReturnValue({ x: 1, y: 2, z: 3 }),
             copy: jest.fn(),
         },
+        quaternion: {
+            x: 1,
+            y: 2,
+            z: 3,
+            w: 4,
+            clone: jest.fn().mockReturnValue({ x: 1, y: 2, z: 3, w: 4 }),
+            copy: jest.fn(),
+        },
         SetCameraLayer: jest.fn(),
+        OnResize: jest.fn(),
+        layers: {
+            mask: 1,
+        },
     },
     MoveTo: jest.fn(),
     RevertLast: jest.fn(),
+    ComputeEncompassingView: jest.fn().mockReturnValue({
+        position: { x: 1, y: 2, z: 3 },
+        target: { x: 4, y: 5, z: 6 }
+    }),
 } as unknown as DIVEOrbitControls;
 
-const mockAttach = jest.fn();
-const mockDetach = jest.fn();
 const mockToolBox = {
     UseTool: jest.fn(),
     GetActiveTool: jest.fn().mockReturnValue({
-        AttachGizmo: mockAttach,
-        DetachGizmo: mockDetach,
+        AttachGizmo: jest.fn(),
+        DetachGizmo: jest.fn(),
     }),
     SetGizmoMode: jest.fn(),
     SetGizmoVisibility: jest.fn(),
 } as unknown as DIVEToolbox;
 
-const mockMediaCreator = {
-    GenerateMedia: jest.fn(),
-} as unknown as DIVEMediaCreator;
 let testCom: DIVECommunication;
 
 
 describe('dive/communication/DIVECommunication', () => {
     beforeEach(() => {
-        testCom = new DIVECommunication(mockScene, mockController, mockToolBox, mockMediaCreator);
+        testCom = new DIVECommunication(mockRenderer, mockScene, mockController, mockToolBox);
     });
 
     afterEach(() => {
@@ -193,13 +236,6 @@ describe('dive/communication/DIVECommunication', () => {
         expect(() => testCom.PerformAction('ADD_OBJECT', payload)).not.toThrow();
     });
 
-    // it('should not dispatch with invalid action type', () => {
-    //     const listener = jest.fn();
-    //     testCom.Subscribe('GET_ALL_OBJECTS', listener);
-    //     testCom.dispatch('INVALID_ACTION_TYPE', {});
-    //     expect(listener).toHaveBeenCalledTimes(0);
-    // });
-
     it('should perform action ADD_OBJECT', () => {
         const payload = {
             entityType: "light",
@@ -434,6 +470,19 @@ describe('dive/communication/DIVECommunication', () => {
         expect(successSet).toBe(true);
     });
 
+    it('should perform action COMPUTE_ENCOMPASSING_VIEW', () => {
+        const payload = {};
+        const transform = testCom.PerformAction('COMPUTE_ENCOMPASSING_VIEW', payload);
+        expect(transform).toStrictEqual({
+            position: { x: 1, y: 2, z: 3 },
+            target: { x: 4, y: 5, z: 6 }
+        });
+        expect(payload).toStrictEqual({
+            position: { x: 1, y: 2, z: 3 },
+            target: { x: 4, y: 5, z: 6 }
+        });
+    });
+
     it('should perform action GET_ALL_SCENE_DATA', () => {
         testCom.PerformAction('ADD_OBJECT', {
             entityType: "pov",
@@ -544,7 +593,6 @@ describe('dive/communication/DIVECommunication', () => {
         jest.spyOn(mockScene, 'GetSceneObject').mockReturnValueOnce({ isSelectable: true } as unknown as Object3D);
         const success3 = testCom.PerformAction('SELECT_OBJECT', { id: 'test0' });
         expect(success3).toBe(true);
-        expect(mockAttach).toHaveBeenCalledTimes(1);
     });
 
     it('should perform action DESELECT_OBJECT', () => {
@@ -570,7 +618,6 @@ describe('dive/communication/DIVECommunication', () => {
         jest.spyOn(mockScene, 'GetSceneObject').mockReturnValueOnce({ isSelectable: true } as unknown as Object3D);
         const success3 = testCom.PerformAction('DESELECT_OBJECT', { id: 'test0' });
         expect(success3).toBe(true);
-        expect(mockDetach).toHaveBeenCalledTimes(1);
     });
 
     it('should perform action SET_CAMERA_TRANSFORM', () => {
@@ -647,6 +694,7 @@ describe('dive/communication/DIVECommunication', () => {
             backgroundColor: 'ffffff',
             floorEnabled: true,
             floorColor: 'ffffff',
+            gridEnabled: true,
         });
         expect(success0).toBe(true);
 
@@ -655,6 +703,7 @@ describe('dive/communication/DIVECommunication', () => {
             backgroundColor: undefined,
             floorEnabled: undefined,
             floorColor: undefined,
+            gridEnabled: undefined,
         });
         expect(success1).toBe(true);
     });

package/src/com/actions/camera/computeencompassingview.ts

@@ -0,0 +1,9 @@
+import { Vector3Like } from "three";
+
+export default interface COMPUTE_ENCOMPASSING_VIEW {
+    'PAYLOAD': object,
+    'RETURN': {
+        position: Vector3Like,
+        target: Vector3Like
+    },
+};

package/src/com/actions/index.ts

@@ -20,6 +20,7 @@ import DESELECT_OBJECT from "./object/deselectobject.ts";
 import GET_CAMERA_TRANSFORM from "./camera/getcameratransform.ts";
 import DROP_IT from "./object/model/dropit.ts";
 import SET_GIZMO_VISIBILITY from "./toolbox/transform/setgizmovisible.js";
+import COMPUTE_ENCOMPASSING_VIEW from "./camera/computeencompassingview.ts";
 
 export type Actions = {
     GET_ALL_SCENE_DATA: GET_ALL_SCENE_DATA,
@@ -37,6 +38,7 @@ export type Actions = {
     GET_CAMERA_TRANSFORM: GET_CAMERA_TRANSFORM,
     MOVE_CAMERA: MOVE_CAMERA,
     RESET_CAMERA: RESET_CAMERA,
+    COMPUTE_ENCOMPASSING_VIEW: COMPUTE_ENCOMPASSING_VIEW,
     SET_CAMERA_LAYER: SET_CAMERA_LAYER,
     ZOOM_CAMERA: ZOOM_CAMERA,
     SET_GIZMO_MODE: SET_GIZMO_MODE,

package/src/com/actions/scene/updatescene.ts

@@ -2,6 +2,7 @@ export default interface UPDATE_SCENE {
     'PAYLOAD': {
         name?: string,
         backgroundColor?: string | number,
+        gridEnabled?: boolean,
         floorEnabled?: boolean,
         floorColor?: string | number
     },

package/src/controls/OrbitControls.ts

@@ -1,7 +1,7 @@
 import { OrbitControls } from "three/examples/jsm/Addons.js";
 import DIVEPerspectiveCamera from "../camera/PerspectiveCamera.ts";
-import DIVERenderer from "../renderer/Renderer.ts";
-import { MathUtils, Vector3Like } from "three";
+import { DIVERenderer } from "../renderer/Renderer.ts";
+import { type Box3, MathUtils, Vector3, Vector3Like } from "three";
 import { Easing, Tween } from "@tweenjs/tween.js";
 
 export type DIVEOrbitControlsSettings = {
@@ -49,6 +49,18 @@ export default class DIVEOrbitControls extends OrbitControls {
         this.dampingFactor = settings.dampingFactor;
     }
 
+    public ComputeEncompassingView(bb: Box3): { position: Vector3Like, target: Vector3Like } {
+        const center = bb.getCenter(new Vector3());
+        const size = bb.getSize(new Vector3());
+        const distance = Math.max(size.x, size.y, size.z) * 1.25;
+        const direction = this.object.position.clone().normalize();
+
+        return {
+            position: direction.multiplyScalar(distance),
+            target: center,
+        };
+    }
+
     public ZoomIn(by?: number): void {
         const zoomBy = by || DIVEOrbitControls.DEFAULT_ZOOM_FACTOR;
         const { minDistance, maxDistance } = this;

package/src/controls/__test__/OrbitControls.test.ts

@@ -1,6 +1,7 @@
 import DIVEOrbitControls from '../OrbitControls';
-import DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
-import DIVERenderer, { DIVERendererDefaultSettings } from '../../renderer/Renderer';
+import type DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
+import { DIVERenderer } from '../../renderer/Renderer';
+import { Box3 } from 'three';
 
 jest.mock('three/examples/jsm/Addons.js', () => {
     return {
@@ -88,11 +89,32 @@ const moveToDuration = 1000;
 
 const mockCamera = {
     position: {
-        clone: jest.fn(),
+        clone: jest.fn(() => {
+            return mockCamera.position;
+        }),
+        normalize: jest.fn(() => {
+            return mockCamera.position;
+        }),
+        multiplyScalar: jest.fn(() => {
+            return mockCamera.position;
+        }),
     },
     lookAt: jest.fn(),
 } as unknown as DIVEPerspectiveCamera;
-const mockRenderer: DIVERenderer = new DIVERenderer(DIVERendererDefaultSettings);
+const mockRenderer = {
+    render: jest.fn(),
+    OnResize: jest.fn(),
+    getViewport: jest.fn(),
+    setViewport: jest.fn(),
+    AddPreRenderCallback: jest.fn((callback) => {
+        callback();
+    }),
+    AddPostRenderCallback: jest.fn((callback) => {
+        callback();
+    }),
+    RemovePreRenderCallback: jest.fn(),
+    RemovePostRenderCallback: jest.fn(),
+} as unknown as DIVERenderer;
 
 describe('dive/controls/DIVEOrbitControls', () => {
     afterEach(() => {
@@ -104,6 +126,11 @@ describe('dive/controls/DIVEOrbitControls', () => {
         expect(controller).toBeDefined();
     });
 
+    it('should compute encompassing view', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
+        expect(() => controller.ComputeEncompassingView(new Box3())).not.toThrow();
+    });
+
     it('should zoom in with default value', () => {
         const controller = new DIVEOrbitControls(mockCamera, mockRenderer);
         expect(() => controller.ZoomIn()).not.toThrow();

package/src/dive.ts

@@ -1,9 +1,7 @@
-import { Vector4 } from "three";
-import DIVERenderer, { DIVERendererDefaultSettings, DIVERendererSettings } from "./renderer/Renderer.ts";
+import { DIVERenderer, DIVERendererDefaultSettings, DIVERendererSettings } from "./renderer/Renderer.ts";
 import DIVEScene from "./scene/Scene.ts";
 import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings, DIVEPerspectiveCameraSettings } from "./camera/PerspectiveCamera.ts";
 import DIVEOrbitControls, { DIVEOrbitControlsDefaultSettings, DIVEOrbitControlsSettings } from "./controls/OrbitControls.ts";
-import DIVEMediaCreator from "./mediacreator/MediaCreator.ts";
 import DIVEToolbox from "./toolbox/Toolbox.ts";
 import DIVECommunication from "./com/Communication.ts";
 import DIVEAnimationSystem from "./animation/AnimationSystem.ts";
@@ -13,9 +11,11 @@ import { getObjectDelta } from "./helper/getObjectDelta/getObjectDelta.ts";
 import type { Actions } from './com/actions/index.ts';
 import type { COMPov, COMLight, COMModel, COMEntity } from './com/types.ts';
 import { DIVEMath } from './math/index.ts';
+import { generateUUID } from "three/src/math/MathUtils";
 
 export type DIVESettings = {
     autoResize: boolean;
+    displayAxes: boolean;
     renderer: DIVERendererSettings;
     perspectiveCamera: DIVEPerspectiveCameraSettings;
     orbitControls: DIVEOrbitControlsSettings;
@@ -23,6 +23,7 @@ export type DIVESettings = {
 
 export const DIVEDefaultSettings: DIVESettings = {
     autoResize: true,
+    displayAxes: false,
     renderer: DIVERendererDefaultSettings,
     perspectiveCamera: DIVEPerspectiveCameraDefaultSettings,
     orbitControls: DIVEOrbitControlsDefaultSettings,
@@ -52,6 +53,71 @@ export const DIVEDefaultSettings: DIVESettings = {
  */
 
 export default class DIVE {
+    // static members
+    public static QuickView(uri: string): DIVE {
+        const dive = new DIVE();
+
+        dive.Communication.PerformAction('SET_CAMERA_TRANSFORM', {
+            position: { x: 0, y: 2, z: 2 },
+            target: { x: 0, y: 0.5, z: 0 },
+        });
+
+        // generate scene light id
+        const lightid = generateUUID();
+
+        // add scene light
+        dive.Communication.PerformAction('ADD_OBJECT', {
+            entityType: 'light',
+            type: 'scene',
+            name: 'light',
+            id: lightid,
+            enabled: true,
+            visible: true,
+            intensity: 1,
+            color: 0xffffff,
+        });
+
+        // generate model id
+        const modelid = generateUUID();
+
+        // add loaded listener
+        dive.Communication.Subscribe('MODEL_LOADED', (data) => {
+            if (data.id !== modelid) return;
+            dive.Communication.PerformAction('PLACE_ON_FLOOR', {
+                id: modelid,
+            });
+
+            const transform = dive.Communication.PerformAction('COMPUTE_ENCOMPASSING_VIEW', {});
+
+            dive.Communication.PerformAction('SET_CAMERA_TRANSFORM', {
+                position: transform.position,
+                target: transform.target,
+            });
+        });
+
+        // instantiate model
+        dive.Communication.PerformAction('ADD_OBJECT', {
+            entityType: 'model',
+            name: 'object',
+            id: modelid,
+            position: { x: 0, y: 0, z: 0 },
+            rotation: { x: 0, y: 0, z: 0 },
+            scale: { x: 1, y: 1, z: 1 },
+            uri: uri,
+            visible: true,
+            loaded: false,
+        });
+
+        // set scene properties
+        dive.Communication.PerformAction('UPDATE_SCENE', {
+            backgroundColor: 0xffffff,
+            gridEnabled: false,
+            floorColor: 0xffffff,
+        });
+
+        return dive;
+    }
+
     // descriptive members
     private _settings: DIVESettings;
     private _resizeObserverId: string;
@@ -63,13 +129,12 @@ export default class DIVE {
     private scene: DIVEScene;
     private perspectiveCamera: DIVEPerspectiveCamera;
     private orbitControls: DIVEOrbitControls;
-    private mediaCreator: DIVEMediaCreator;
     private toolbox: DIVEToolbox;
     private communication: DIVECommunication;
 
     // additional components
-    private animationSystem: DIVEAnimationSystem;
-    private axisCamera: DIVEAxisCamera;
+    private animationSystem: DIVEAnimationSystem | null;
+    private axisCamera: DIVEAxisCamera | null;
 
     // getters
     public get Communication(): DIVECommunication {
@@ -108,6 +173,13 @@ export default class DIVE {
             }
         }
 
+        if (settingsDelta.displayAxes) {
+            this.axisCamera = new DIVEAxisCamera(this.renderer, this.scene, this.orbitControls);
+        } else {
+            this.axisCamera?.Dispose();
+            this.axisCamera = null;
+        }
+
         Object.assign(this._settings, settings);
     }
 
@@ -123,38 +195,18 @@ export default class DIVE {
         this.scene = new DIVEScene();
         this.perspectiveCamera = new DIVEPerspectiveCamera(this._settings.perspectiveCamera);
         this.orbitControls = new DIVEOrbitControls(this.perspectiveCamera, this.renderer, this._settings.orbitControls);
-        this.mediaCreator = new DIVEMediaCreator(this.renderer, this.scene, this.orbitControls);
         this.toolbox = new DIVEToolbox(this.scene, this.orbitControls);
-        this.communication = new DIVECommunication(this.scene, this.orbitControls, this.toolbox, this.mediaCreator);
+        this.communication = new DIVECommunication(this.renderer, this.scene, this.orbitControls, this.toolbox);
 
         // initialize animation system
-        this.animationSystem = new DIVEAnimationSystem();
-        this.renderer.AddPreRenderCallback(() => {
-            this.animationSystem.update();
-        })
+        this.animationSystem = null;
 
         // initialize axis camera
-        this.axisCamera = new DIVEAxisCamera();
-        this.scene.add(this.axisCamera);
-        const restoreViewport = new Vector4();
-
-        this.renderer.AddPostRenderCallback(() => {
-            const restoreBackground = this.scene.background;
-            this.scene.background = null;
-
-            this.renderer.getViewport(restoreViewport);
-            this.renderer.setViewport(0, 0, 150, 150);
-            this.renderer.autoClear = false;
-
-            this.axisCamera.SetFromCameraMatrix(this.perspectiveCamera.matrix);
-
-            this.renderer.render(this.scene, this.axisCamera);
-
-            this.renderer.setViewport(restoreViewport);
-            this.renderer.autoClear = true;
-
-            this.scene.background = restoreBackground;
-        });
+        if (this._settings.displayAxes) {
+            this.axisCamera = new DIVEAxisCamera(this.renderer, this.scene, this.orbitControls);
+        } else {
+            this.axisCamera = null;
+        }
 
         // add resize observer if autoResize is enabled
         if (this._settings.autoResize) {
@@ -172,6 +224,14 @@ export default class DIVE {
         }
     }
 
+    public Dispose(): void {
+        this.removeResizeObserver();
+        this.renderer.Dispose();
+        this.axisCamera?.Dispose();
+        this.toolbox.Dispose();
+        this.communication.DestroyInstance();
+    }
+
     // methods
     public OnResize(width: number, height: number): void {
         // resize renderer

package/src/grid/Grid.ts

@@ -19,4 +19,8 @@ export default class DIVEGrid extends Object3D {
 
         this.add(grid);
     }
+
+    public SetVisibility(visible: boolean): void {
+        this.visible = visible;
+    }
 }

package/src/grid/__test__/Grid.test.ts

@@ -16,4 +16,11 @@ describe('dive/grid/DIVEGrid', () => {
         expect((grid.children[0] as GridHelper).material.depthTest).toBe(false);
         expect((grid.children[0] as GridHelper).layers.mask).toBe(HELPER_LAYER_MASK);
     });
+
+    it('should set visibility', () => {
+        grid.SetVisibility(false);
+        expect(grid.visible).toBe(false);
+        grid.SetVisibility(true);
+        expect(grid.visible).toBe(true);
+    });
 });

package/src/interface/Selectable.ts

@@ -14,4 +14,21 @@ export interface DIVESelectable {
 
 export function isSelectable(object: Object3D): object is Object3D & DIVESelectable {
     return 'isSelectable' in object;
+}
+
+export function findSelectableInterface(child: Object3D): (Object3D & DIVESelectable) | undefined {
+    if (child === undefined) return undefined;
+
+    if (child.parent === null) {
+        // in this case it is the scene itself
+        return undefined;
+    }
+
+    if (isSelectable(child)) {
+        // in this case it is the Selectable
+        return child;
+    }
+
+    // search recursively in parent
+    return findSelectableInterface(child.parent);
 }

package/src/interface/__test__/Interfaces.test.ts

@@ -21,6 +21,24 @@ describe('interfaces', () => {
         expect(Selectable_DEF.isSelectable(Selectable as unknown as Object3D)).toBe(true);
     });
 
+    it('should find Selectable', () => {
+        let Selectable = {
+            isSelectable: true,
+        } as unknown as Object3D & Selectable_DEF.DIVESelectable;
+        expect(Selectable_DEF.findSelectableInterface(Selectable as unknown as Object3D)).toBe(Selectable);
+
+        let parent = {
+            isSelectable: true,
+        }
+        Selectable = {
+            parent: parent,
+        } as unknown as Object3D & Selectable_DEF.DIVESelectable;
+        expect(Selectable_DEF.findSelectableInterface(Selectable as unknown as Object3D)).toBe(parent);
+
+        Selectable = { isSelectable: true, parent: null } as unknown as Object3D & Selectable_DEF.DIVESelectable;
+        expect(Selectable_DEF.findSelectableInterface(Selectable as unknown as Object3D)).toBe(undefined);
+    });
+
     it('should identify Draggable', () => {
         const Draggable = { isDraggable: true };
         expect(Draggable_DEF.isDraggable(Draggable as unknown as Object3D)).toBe(true);

package/src/mediacreator/MediaCreator.ts

@@ -1,6 +1,6 @@
 import DIVEPerspectiveCamera from "../camera/PerspectiveCamera.ts";
 import DIVEScene from "../scene/Scene.ts";
-import DIVERenderer from "../renderer/Renderer.ts";
+import { DIVERenderer } from "../renderer/Renderer.ts";
 import DIVEOrbitControls from "../controls/OrbitControls.ts";
 import { Vector3Like } from "three";
 
@@ -10,7 +10,7 @@ import { Vector3Like } from "three";
  * @module
  */
 
-export default class DIVEMediaCreator {
+export class DIVEMediaCreator {
     private renderer: DIVERenderer;
     private scene: DIVEScene;
     private controller: DIVEOrbitControls;

package/src/mediacreator/__test__/MediaCreator.test.ts

@@ -1,5 +1,5 @@
-import DIVEMediaCreator from '../MediaCreator';
-import DIVERenderer from '../../renderer/Renderer';
+import { DIVEMediaCreator } from '../MediaCreator';
+import { DIVERenderer } from '../../renderer/Renderer';
 import DIVEScene from '../../scene/Scene';
 import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings } from '../../camera/PerspectiveCamera';
 import { COMPov } from '../../com';
@@ -71,14 +71,16 @@ jest.mock('../../controls/OrbitControls', () => {
 });
 
 jest.mock('../../renderer/Renderer', () => {
-    return jest.fn(function () {
-        this.domElement = {
-            toDataURL: mock_toDataURL,
-        }
-        this.render = mock_render;
-        this.OnResize = jest.fn();
-        return this;
-    });
+    return {
+        DIVERenderer: jest.fn(function () {
+            this.domElement = {
+                toDataURL: mock_toDataURL,
+            }
+            this.render = mock_render;
+            this.OnResize = jest.fn();
+            return this;
+        })
+    }
 });
 
 let mediaCreator: DIVEMediaCreator;

package/src/renderer/Renderer.ts

@@ -26,7 +26,7 @@ export const DIVERendererDefaultSettings: DIVERendererSettings = {
  * @module
  */
 
-export default class DIVERenderer extends WebGLRenderer {
+export class DIVERenderer extends WebGLRenderer {
     // basic functionality members
     private paused: boolean = false;
     private running: boolean = false;
@@ -52,6 +52,12 @@ export default class DIVERenderer extends WebGLRenderer {
         this.debug.checkShaderErrors = false;
     }
 
+    // Stops renderings and disposes the renderer.
+    public Dispose(): void {
+        this.StopRenderer();
+        this.dispose();
+    }
+
     // Starts the renderer with the given scene and camera.
     public StartRenderer(scene: Scene, cam: Camera): void {
         this.setAnimationLoop(() => { this.internal_render(scene, cam) });