@combeenation/3d-viewer 5.0.2-beta1 → 5.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@combeenation/3d-viewer",
   "description": "Combeenation 3D Viewer",
-  "version": "5.0.2-beta1",
+  "version": "5.0.2",
   "homepage": "https://github.com/Combeenation/3d-viewer#readme",
   "keywords": [],
   "author": "",
@@ -43,10 +43,10 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@babylonjs/core": "^5.6.0",
-    "@babylonjs/inspector": "5.6.0",
+    "@babylonjs/core": "5.6.0",
     "@babylonjs/loaders": "5.6.0",
     "@babylonjs/materials": "5.6.0",
+    "@babylonjs/serializers": "5.6.0",
     "eventemitter3": "^4.0.0",
     "gsap": "^3.5.1",
     "lodash-es": "^4.17.15"

package/src/api/classes/viewer.ts

@@ -20,13 +20,14 @@ import { GltfExportManager } from '../manager/gltfExportManager';
 import { SceneManager } from '../manager/sceneManager';
 import { VariantInstanceManager } from '../manager/variantInstanceManager';
 import { SpecStorage } from '../store/specStorage';
-import { debounce, loadJson } from '../util/resourceHelper';
+import { debounce, loadJavascript, loadJson } from '../util/resourceHelper';
 import { Event } from './event';
 import { EventBroadcaster } from './eventBroadcaster';
 import { Parameter } from './parameter';
 import { Variant } from './variant';
 import { VariantInstance } from './variantInstance';
 import { IPointerEvent } from '@babylonjs/core/Events/deviceInputEvents';
+import { DebugLayer } from '@babylonjs/core/Debug/debugLayer';
 
 /**
  * The main exposed object. This is the entry point into the application
@@ -54,6 +55,8 @@ export class Viewer extends EventBroadcaster {
 
   protected _isRenderLoopPaused: boolean = false;
 
+  protected _inspectorLoaded: boolean = false;
+
   static version = version;
 
   /**
@@ -196,15 +199,20 @@ export class Viewer extends EventBroadcaster {
 
   /**
    * Enables the BabylonJS [Inspector](https://doc.babylonjs.com/toolsAndResources/tools/inspector).\
-   * Due to the enormous additional package size of the inspector, this feature is only available in development builds.
+   * Due to the enormous additional package size of the inspector, the CDN version is used instead of the corresponding npm package.
    */
   public async enableDebugLayer(options?: IInspectorOptions) {
-    if (process.env.NODE_ENV?.toLowerCase().includes('dev')) {
-      await import(/* webpackChunkName: "debug-inspector" */ '@babylonjs/inspector');
-      await this.scene.debugLayer.show(options);
-    } else {
-      console.warn('BabylonJS inspector is not supported in production builds!');
+    if (!this._inspectorLoaded) {
+      // CDN version of inspector requires the BabylonJS core to be available as CDN module as well
+      await loadJavascript('https://cdn.jsdelivr.net/npm/babylonjs@5.6.0/babylon.min.js');
+
+      DebugLayer.InspectorURL =
+        'https://cdn.jsdelivr.net/npm/babylonjs-inspector@5.6.0/babylon.inspector.bundle.max.min.js';
+
+      this._inspectorLoaded = true;
     }
+
+    await this.scene.debugLayer.show(options);
   }
 
   /**

package/src/api/util/resourceHelper.ts

@@ -37,6 +37,22 @@ const loadText = async function (path: string): Promise<string> {
   return response.text();
 };
 
+/**
+ * Loads a Javascript ressource.\
+ * Usefull for including packages via CDN (eg: BabylonJS Inspector)
+ */
+const loadJavascript = (url: string): Promise<void> =>
+  new Promise(resolve => {
+    const scriptEl = document.createElement('script');
+
+    scriptEl.setAttribute('src', url);
+    scriptEl.setAttribute('type', 'text/javascript');
+    scriptEl.setAttribute('crossorigin', 'anonymous');
+    scriptEl.onload = () => resolve();
+
+    document.head.appendChild(scriptEl);
+  });
+
 /**
  * Debounces: it limits the rate at which a function can fire.
  */
@@ -170,4 +186,4 @@ const _fetchBase64AssetUrl = async function (assetUrl: string): Promise<{ url: s
   });
 };
 
-export { sleep, loadJson, loadText, debounce, mergeMaps, createImageFromSvg, createImageFromImgSrc };
+export { sleep, loadJson, loadText, loadJavascript, debounce, mergeMaps, createImageFromSvg, createImageFromImgSrc };