@combeenation/3d-viewer 17.1.0 → 18.0.0-beta2

package/dist/lib-cjs/manager/html-anchor-manager.js

@@ -0,0 +1,228 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HtmlAnchorManager = void 0;
+const __1 = require("..");
+const html2canvas_1 = __importDefault(require("html2canvas"));
+/**
+ * Manager for mapping html elements to 3d positions in the scene.\
+ * Common use cases are:
+ * - **Hotspot buttons**: Interactively add/remove elements in the scene or just show some info on hovering
+ * - **Input fields**: Interactively change the size of an element
+ * - **Info label**: Just shows some information on a certain position within the scene
+ *
+ * Html anchors are also used as dimension lables in the {@link DimensionLineManager}
+ */
+class HtmlAnchorManager {
+    /** @internal */
+    constructor(viewer) {
+        this.viewer = viewer;
+        this._htmlAnchors = {};
+        this._anchorMeshMaterial = null;
+        const canvas = viewer.canvas;
+        if (!canvas) {
+            return;
+        }
+        // html element positions need to be updated after each camera render call
+        viewer.scene.onAfterRenderCameraObservable.add(() => {
+            Object.values(this._htmlAnchors).forEach(({ parentHtmlElement, anchorMesh, options }) => {
+                this._updateHtmlAnchor(parentHtmlElement, anchorMesh, viewer.scene.activeCamera, canvas.width, canvas.height, 1, options);
+            });
+        });
+    }
+    /**
+     * Assign a html element to a certain position in the scene.\
+     * The html elements 2d position will be updated on each camera render, so that the element appears like a "normal"
+     * mesh within the scene.
+     */
+    addHtmlAnchor(name, htmlElement, position, options) {
+        var _a;
+        const canvasParentHtmlElement = (_a = this.viewer.canvas) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!canvasParentHtmlElement) {
+            console.warn(`No parent for desired html anchor available`);
+            return;
+        }
+        if (this._htmlAnchors[name]) {
+            console.warn(`Html anchor "${name}" already exists`);
+            return;
+        }
+        const { parentNode, enablePointerEvents } = options !== null && options !== void 0 ? options : {};
+        // create a parent for the input html element, which will receive the updated style and transform data
+        // in this way the original input element remains untouched
+        const parentHtmlElement = document.createElement('div');
+        parentHtmlElement.dataset.anchorName = name;
+        parentHtmlElement.style.position = 'absolute';
+        parentHtmlElement.style.margin = '0';
+        parentHtmlElement.appendChild(htmlElement);
+        if (!enablePointerEvents) {
+            parentHtmlElement.style.pointerEvents = 'none';
+        }
+        canvasParentHtmlElement.appendChild(parentHtmlElement);
+        // NOTE: creates a sphere with fixed size, which could be problematic in scene with "strange" dimensions
+        // add a property for the sphere size if required
+        const anchorMesh = __1.MeshBuilder.CreateSphere(`${HtmlAnchorManager._HTML_ANCHOR_KEY}_${name}`, { diameter: 0.01 });
+        anchorMesh.position = position;
+        anchorMesh.parent = parentNode !== null && parentNode !== void 0 ? parentNode : null;
+        // anchor mesh will be invisible, we only need it for positioning and occlusion check
+        anchorMesh.material = this._getOrCreateAnchorMeshMaterial();
+        anchorMesh.occlusionType = __1.AbstractMesh.OCCLUSION_TYPE_OPTIMISTIC;
+        anchorMesh.occlusionQueryAlgorithmType = __1.AbstractMesh.OCCLUSION_ALGORITHM_TYPE_CONSERVATIVE;
+        // it's important that the occlusion check mesh is rendered after all "normal" meshes, which should be taken into
+        // account for the occlusion check
+        anchorMesh.renderingGroupId = 1;
+        this._htmlAnchors[name] = { parentHtmlElement, anchorMesh, options };
+    }
+    /**
+     * Remove html anchor element and disposes all associated ressources
+     */
+    removeHtmlAnchor(name) {
+        const htmlAnchor = this._htmlAnchors[name];
+        if (!htmlAnchor) {
+            console.warn(`Html anchor "${name}" does not exist`);
+            return;
+        }
+        htmlAnchor.parentHtmlElement.remove();
+        htmlAnchor.anchorMesh.dispose();
+        delete this._htmlAnchors[name];
+    }
+    /**
+     * Removes html anchor elements, as defined by the `groups` input
+     *
+     * @param groups if set, only html anchors which are part of these groups will be removed\
+     *               if left `undefined`, ALL html anchors will be removed
+     */
+    removeAllHtmlAnchors(groups) {
+        const anchorKeysToRemove = this.getHtmlAnchorKeys(groups, undefined, 
+        // system groups should not be remove, as there is a dedicated workflow
+        // (e.g. `DimensionLineManager.removeDimensionLine`) to do this
+        false);
+        anchorKeysToRemove.forEach(name => this.removeHtmlAnchor(name));
+    }
+    /**
+     * Creates a screenshot of defined html anchors and returns the associated canvas.\
+     * This function is used @internal from the main screenshot function.
+     */
+    createScreenshotCanvas(size, camera, htmlAnchorKeys) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const canvasParentHtmlElement = (_a = this.viewer.canvas) === null || _a === void 0 ? void 0 : _a.parentElement;
+            if (!canvasParentHtmlElement) {
+                console.warn(`No parent for html anchors available`);
+                return new HTMLCanvasElement();
+            }
+            const htmlContainer = document.createElement('div');
+            htmlContainer.style.width = `${size.canvasWidth}px`;
+            htmlContainer.style.height = `${size.canvasHeight}px`;
+            // the `html2canvas` library requires the html to be present in the DOM
+            // that's why we create it top level and move it out of the viewport
+            // @reviewer: maybe there is a smoother method of doing that?
+            document.body.append(htmlContainer);
+            htmlContainer.style.position = 'absolute';
+            htmlContainer.style.top = `${-size.canvasHeight}px`;
+            htmlAnchorKeys.forEach(key => {
+                const { parentHtmlElement, anchorMesh, options } = this._htmlAnchors[key];
+                // create clones of html anchors, so that the position of the original elements remains untouched
+                const clonedHtmlNode = parentHtmlElement.cloneNode(true);
+                htmlContainer.append(clonedHtmlNode);
+                // reposition that cloned html element, so that it fits to the desired camera position
+                const baseScale = size.canvasHeight / this.viewer.canvas.height;
+                this._updateHtmlAnchor(clonedHtmlNode, anchorMesh, camera, size.canvasWidth, size.canvasHeight, baseScale, options);
+            });
+            const screenshotHtmlCanvas = yield (0, html2canvas_1.default)(htmlContainer, {
+                width: size.imageWidth,
+                height: size.imageHeight,
+                // apply difference of canvas and image size as offsets
+                x: (size.canvasWidth - size.imageWidth) / 2,
+                y: (size.canvasHeight - size.imageHeight) / 2,
+                logging: false,
+                backgroundColor: null,
+            });
+            htmlContainer.remove();
+            return screenshotHtmlCanvas;
+        });
+    }
+    /**
+     * Receive html anchor keys that pass the `includeGroups` and `excludeGroups` filter
+     * @param allowSystemGroups defines if html anchors created by the viewer should be considered (e.g. dimension line
+     *                          labels)
+     * @internal
+     */
+    getHtmlAnchorKeys(includeGroups, excludeGroups, allowSystemGroups) {
+        const anchorKeys = Object.keys(this._htmlAnchors).filter(name => {
+            var _a;
+            const group = (_a = this._htmlAnchors[name].options) === null || _a === void 0 ? void 0 : _a.group;
+            const passIncludeGroupFilter = includeGroups === undefined || (group !== undefined && includeGroups.includes(group));
+            const passExcludeGroupFilter = excludeGroups === undefined || group === undefined || !excludeGroups.includes(group);
+            // ATM only dimension labels are system html anchors
+            const passSystemGroupFilter = allowSystemGroups || group !== __1.DimensionLineManager.DIMENSION_LINE_KEY;
+            return passIncludeGroupFilter && passExcludeGroupFilter && passSystemGroupFilter;
+        });
+        return anchorKeys;
+    }
+    /**
+     * Check if input mesh is a html anchor mesh, created by this manager.\
+     * This check is done via the material, as all html anchor meshes have the generic `_anchorMeshMaterial` set.
+     * @internal
+     */
+    isHtmlAnchorMesh(mesh) {
+        return mesh.material === this._anchorMeshMaterial;
+    }
+    _updateHtmlAnchor(parentHtmlElement, anchorMesh, camera, width, height, baseScale, options) {
+        const { hideIfOccluded, scaleWithCameraDistance } = options !== null && options !== void 0 ? options : {};
+        const viewMatrix = camera.getViewMatrix();
+        const projectionMatrix = camera.getProjectionMatrix();
+        const transformMatrix = viewMatrix.multiply(projectionMatrix);
+        // convert into 2d space
+        const vertexScreenCoords = __1.Vector3.Project(__1.Vector3.Zero(), anchorMesh.getWorldMatrix(), transformMatrix, new __1.Viewport(0, 0, width, height));
+        // base scale is used if width and height don't equal the viewer canvas, which is the case for screenshots
+        let scale = baseScale;
+        if (scaleWithCameraDistance) {
+            const meshWorldPos = anchorMesh.getAbsolutePosition();
+            // calculate camera world position manually, as there is no help function like for meshes
+            const camWorldMatrix = camera.computeWorldMatrix();
+            const camWorldPos = camWorldMatrix.getTranslation();
+            const distance = __1.Vector3.Distance(meshWorldPos, camWorldPos);
+            const frustumSlopeY = Math.tan(camera.fov / 2);
+            // if the distance from camera to mesh gets larger, the html elements scaling will be decreased
+            // we also consider the cameras FOV, so scale 1 means, that the resulting vertical frustum of the camera
+            // distance equals 1
+            // ...this is probably too small in some scenarios, so we might have to add a general scale setting here
+            scale *= 1 / (distance * frustumSlopeY);
+        }
+        const elementXOffset = (parentHtmlElement.offsetWidth * scale) / 2;
+        const elementYOffset = (parentHtmlElement.offsetHeight * scale) / 2;
+        // finally move and scale the HTML element
+        parentHtmlElement.style.transform = `translate3d(calc(${vertexScreenCoords.x}px - 50%), calc(${vertexScreenCoords.y}px - 50%), 0px) scale(${scale})`;
+        // check for occlusion if desired
+        // we use the opacity setting, which could also be animated nicely if we want
+        const isInViewport = vertexScreenCoords.x - elementXOffset > 0 &&
+            vertexScreenCoords.x + elementXOffset < width &&
+            vertexScreenCoords.y - elementYOffset > 0 &&
+            vertexScreenCoords.y + elementYOffset < height;
+        const isOccluded = hideIfOccluded && anchorMesh.isOccluded;
+        parentHtmlElement.style.opacity = isInViewport && !isOccluded ? '1' : '0';
+    }
+    _getOrCreateAnchorMeshMaterial() {
+        if (this._anchorMeshMaterial) {
+            return this._anchorMeshMaterial;
+        }
+        this._anchorMeshMaterial = new __1.StandardMaterial('$matAnchorMesh');
+        this._anchorMeshMaterial.alpha = 0;
+        this.viewer.scene.removeMaterial(this._anchorMeshMaterial);
+        return this._anchorMeshMaterial;
+    }
+}
+exports.HtmlAnchorManager = HtmlAnchorManager;
+HtmlAnchorManager._HTML_ANCHOR_KEY = '$htmlAnchor';
+//# sourceMappingURL=html-anchor-manager.js.map

package/dist/lib-cjs/manager/html-anchor-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-anchor-manager.js","sourceRoot":"","sources":["../../../src/manager/html-anchor-manager.ts"],"names":[],"mappings":"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"}

package/dist/lib-cjs/manager/model-manager.d.ts

@@ -1,18 +1,5 @@
 import { AssetContainer, DecalConfiguration, TransformNode, Viewer } from '../index';
-/**
- * Contains cbn custom data, like decals.
- * This is just a temporary type, as the `loadAssetContainer` function only returns an asset container, which can be
- * altered by our file loader plugin.
- * After loading the model, `cbnData` is cropped and a pure asset container is available for further processing.
- *
- * @internal
- */
-export declare class ExtendedAssetContainer extends AssetContainer {
-    cbnData?: CbnBabylonFileData;
-}
-declare type CbnBabylonFileData = {
-    decals?: ParsedDecalConfiguration[];
-};
+import { BaseAsset } from '../internal/asset-helper';
 export declare type ParsedDecalConfiguration = DecalConfiguration & {
     materialId?: string;
     tags?: string;
@@ -45,17 +32,12 @@ export declare type ModelCloneOptions = {
     nodeNamingStrategy?: NodeNamingStrategy;
     tagNamingStrategy?: TagNamingStrategy;
 };
-declare type Model = {
-    name: string;
-    url: string;
-    state: ModelAssetState;
-    assetContainer: AssetContainer;
-    cbnBabylonFileData?: CbnBabylonFileData;
+declare type ModelAsset = BaseAsset & {
+    decals?: ParsedDecalConfiguration[];
     isClone: boolean;
     sourceModelName?: string;
     visibilityCallId?: number;
 };
-declare type ModelAssetState = 'notLoaded' | 'loading' | 'loaded' | 'inScene';
 /**
  * Manager for handling 3d models.\
  * Responsible for loading models and handling their visibility.\
@@ -65,13 +47,12 @@ export declare class ModelManager {
     protected viewer: Viewer;
     /**
      * CAUTION: this has to be in sync with the Combeenation backend!
-     * @internal
      */
     static readonly CBN_FALLBACK_MODEL_ASSET_NAME = "$fallback";
     protected _modelAssets: {
-        [name: string]: Model;
+        [name: string]: ModelAsset;
     };
-    protected _fallbackModelAsset: Model;
+    protected _fallbackModelAsset: ModelAsset;
     protected _loadModelPromises: {
         [modelName: string]: Promise<void>;
     };
@@ -84,6 +65,7 @@ export declare class ModelManager {
      * This function converts slash to dot notation, so that models can be target with slash and dot notation alike.
      */
     protected static _replaceSlashes(inputStr: string): string;
+    /** @internal */
     constructor(viewer: Viewer);
     /**
      * Creates content for the fallback model, which is actually just a black cube.
@@ -150,17 +132,17 @@ export declare class ModelManager {
     /**
      * Get model by name
      */
-    protected _getModel(name: string): Model | undefined;
+    protected _getModel(name: string): ModelAsset | undefined;
     /**
      * Load model into scene, but don't show it immediately
      */
-    protected _loadModel(model: Model): Promise<void>;
+    protected _loadModel(model: ModelAsset): Promise<void>;
     /**
      * Apply parameter to the model in the asset container.
      * This is typically done before the model is added to the scene to avoid changes on the visible model, which ensures
      * a smooth model switch behaviour.
      */
-    protected _prepareModelForScene(model: Model): Promise<void>;
+    protected _prepareModelForScene(model: ModelAsset): Promise<void>;
     /**
      * Add assets of asset container to scene, do the scene preparation if required.
      * CAUTION: model is expected to be in the correct loading state already.
@@ -168,15 +150,10 @@ export declare class ModelManager {
      * @param skipPreparation optionally skip applying parameter values to model before showing it
      *                        (see {@link _prepareModelForScene})
      */
-    protected _showModel(model: Model, skipPreparation?: boolean): Promise<void>;
+    protected _showModel(model: ModelAsset, skipPreparation?: boolean): Promise<void>;
     /**
      * Remove assets of asset container from scene
      */
-    protected _hideModel(model: Model): void;
-    /**
-     * Creates and assigns each "deferred" material to the corresponding mesh, if the mesh is visible.
-     * Model should be ready to use immediately after this function has done it's job.
-     */
-    protected _applyDeferredMaterialsForAllVisibleMeshes(model: Model): Promise<void>;
+    protected _hideModel(model: ModelAsset): void;
 }
 export {};

package/dist/lib-cjs/manager/model-manager.js

@@ -9,28 +9,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModelManager = exports.ExtendedAssetContainer = void 0;
+exports.ModelManager = void 0;
 const index_1 = require("../index");
+const asset_helper_1 = require("../internal/asset-helper");
 const cloning_helper_1 = require("../internal/cloning-helper");
-const metadata_helper_1 = require("../internal/metadata-helper");
 const lodash_es_1 = require("lodash-es");
-/**
- * Contains cbn custom data, like decals.
- * This is just a temporary type, as the `loadAssetContainer` function only returns an asset container, which can be
- * altered by our file loader plugin.
- * After loading the model, `cbnData` is cropped and a pure asset container is available for further processing.
- *
- * @internal
- */
-class ExtendedAssetContainer extends index_1.AssetContainer {
-}
-exports.ExtendedAssetContainer = ExtendedAssetContainer;
 /**
  * Manager for handling 3d models.\
  * Responsible for loading models and handling their visibility.\
  * Also contains advanced features like model cloning.
  */
 class ModelManager {
+    /** @internal */
     constructor(viewer) {
         this.viewer = viewer;
         this._modelAssets = {};
@@ -83,7 +73,7 @@ class ModelManager {
         for (const { name, url } of modelAssets) {
             const existingModel = this._modelAssets[name];
             if (existingModel) {
-                console.warn(`Model ${name} is already registered`);
+                console.warn(`Model "${name}" is already registered`);
                 return;
             }
             const model = { name, url, state: 'notLoaded', assetContainer: new index_1.AssetContainer(), isClone: false };
@@ -107,7 +97,7 @@ class ModelManager {
                 });
             }
             if (model.state !== 'notLoaded') {
-                console.warn(`Model ${name} is already loaded or currently loading`);
+                console.warn(`Model "${name}" is already loaded or currently loading`);
                 return;
             }
             yield this._loadModel(model);
@@ -121,14 +111,14 @@ class ModelManager {
      * @returns Array of changed visibility status, combined with the corresponding model name
      */
     setModelVisibility(modelVisibility) {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            const showModels = [];
-            const hideModels = [];
+            const modelsToShow = [];
+            const modelsToHide = [];
             if (!(0, lodash_es_1.isArray)(modelVisibility)) {
                 modelVisibility = [modelVisibility];
             }
-            for (const entry of modelVisibility) {
+            const loadModelProms = modelVisibility.map((entry) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
                 const model = this._getModel(entry.name);
                 if (!model) {
                     throw new index_1.ViewerError({
@@ -139,50 +129,61 @@ class ModelManager {
                 // there can be multiple "setModelVisibility" calls while the model is loading
                 // loading can be awaited, but it has to be ensured, that the last call of "setModelVisibility" has priority
                 // therefore we store the id of the call in the model
-                const curVisibilityCallId = ((_a = model.visibilityCallId) !== null && _a !== void 0 ? _a : 0) + 1;
-                model.visibilityCallId = curVisibilityCallId;
+                model.visibilityCallId = ((_a = model.visibilityCallId) !== null && _a !== void 0 ? _a : 0) + 1;
+                const curVisibilityCallId = model.visibilityCallId;
+                let showModel = false;
+                let hideModel = false;
                 if (entry.visible) {
                     if (model.state === 'notLoaded') {
                         yield this._loadModel(model);
                         // check if this is still the latest visibility call
                         if (model.visibilityCallId === curVisibilityCallId) {
-                            showModels.push(model);
+                            showModel = true;
                         }
                     }
                     else if (model.state === 'loading') {
                         yield this._loadModelPromises[model.name];
                         if (model.visibilityCallId === curVisibilityCallId) {
-                            showModels.push(model);
+                            showModel = true;
                         }
                     }
                     else if (model.state === 'loaded') {
-                        showModels.push(model);
+                        showModel = true;
                     }
                 }
                 else {
                     if (model.state === 'loading') {
                         yield this._loadModelPromises[model.name];
                         if (model.visibilityCallId === curVisibilityCallId) {
-                            hideModels.push(model);
+                            hideModel = true;
                         }
                     }
                     else if (model.state === 'inScene') {
-                        hideModels.push(model);
+                        hideModel = true;
                     }
                 }
-            }
-            for (const showModel of showModels) {
-                yield this._prepareModelForScene(showModel);
-            }
-            for (const showModel of showModels) {
-                yield this._showModel(showModel, true);
-            }
-            for (const hideModel of hideModels) {
-                this._hideModel(hideModel);
-            }
+                if (showModel) {
+                    yield this._prepareModelForScene(model);
+                    modelsToShow.push(model);
+                }
+                else if (hideModel) {
+                    modelsToHide.push(model);
+                }
+            }));
+            // model loading and preparation (e.g. create materials) is done simultaniously for all models to save time
+            // model (`ModelManager._loadModelPromises`) and material queues (`MaterialManager._createMaterialPromises`) are
+            // responsible for correct loading state handling of these instances
+            yield Promise.all(loadModelProms);
             const returnVal = [];
-            showModels.forEach(showModel => returnVal.push({ name: showModel.name, visible: true }));
-            hideModels.forEach(hideModel => returnVal.push({ name: hideModel.name, visible: false }));
+            modelsToShow.forEach(model => {
+                // show model is not async, as preparation has already been done
+                this._showModel(model, true);
+                returnVal.push({ name: model.name, visible: true });
+            });
+            modelsToHide.forEach(model => {
+                this._hideModel(model);
+                returnVal.push({ name: model.name, visible: false });
+            });
             return returnVal;
         });
     }
@@ -295,7 +296,7 @@ class ModelManager {
      * be useful e.g. for alterning decals.
      */
     getDecalsConfigurationOfModel(name) {
-        var _a, _b;
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const model = this._getModel(name);
             if (!model) {
@@ -313,14 +314,14 @@ class ModelManager {
             if (model.state !== 'inScene') {
                 yield this._prepareModelForScene(model);
             }
-            return (_b = (_a = model.cbnBabylonFileData) === null || _a === void 0 ? void 0 : _a.decals) !== null && _b !== void 0 ? _b : [];
+            return (_a = model.decals) !== null && _a !== void 0 ? _a : [];
         });
     }
     /**
      * Get model by name
      */
     _getModel(name) {
-        if (name === '$fallback') {
+        if (name === ModelManager.CBN_FALLBACK_MODEL_ASSET_NAME) {
             return this._fallbackModelAsset;
         }
         const replacedName = ModelManager._replaceSlashes(name);
@@ -333,53 +334,12 @@ class ModelManager {
     _loadModel(model) {
         return __awaiter(this, void 0, void 0, function* () {
             const loadModelPromise = () => __awaiter(this, void 0, void 0, function* () {
-                model.state = 'loading';
-                const curEnvTexture = this.viewer.scene.environmentTexture;
-                const curEnvIntensity = this.viewer.scene.environmentIntensity;
-                // CB-9240: Babylon.js doesn't recognize gzipped babylon files (`.babylon.gz`) as such, leading to a warning
-                // message, therefore we overwrite the plugin extension actively for such files
-                let pluginExtension;
-                try {
-                    // URL constructor can throw for "valid" URL, which happened to be the case for the test asset environment where
-                    // the urls are relative (starting with ".")
-                    const urlObj = new URL(model.url);
-                    if (urlObj.pathname.endsWith('.babylon.gz')) {
-                        pluginExtension = '.babylon';
-                    }
-                }
-                catch (e) { }
-                let assetContainer;
-                try {
-                    const fullContainer = (yield index_1.SceneLoader.LoadAssetContainerAsync('', model.url, this.viewer.scene, undefined, pluginExtension));
-                    // crop and store custom cbn data from .babylon file
-                    model.cbnBabylonFileData = fullContainer.cbnData;
-                    delete fullContainer.cbnData;
-                    // from here it's a basic asset container again
-                    assetContainer = fullContainer;
-                }
-                catch (e) {
-                    throw new index_1.ViewerError({
-                        id: index_1.ViewerErrorIds.AssetLoadingFailed,
-                        message: e.message,
-                    });
-                }
+                const { cbnData } = yield (0, asset_helper_1.loadAsset)(model, this.viewer);
+                model.decals = cbnData === null || cbnData === void 0 ? void 0 : cbnData.decals;
                 // remove all lights and cameras from the asset, as this data should be handled globally in the scene instead of
                 // being in a model context
-                [...assetContainer.lights].forEach(light => light.dispose());
-                [...assetContainer.cameras].forEach(camera => camera.dispose());
-                // materials should be a "global" thing and not assigned to an asset container
-                // this is not relevant in most of the cases, since materials are cropped from babylon models on the CBN server
-                // anyway
-                assetContainer.materials.forEach(material => {
-                    this.viewer.scene.addMaterial(material);
-                    material._parentContainer = null;
-                });
-                assetContainer.materials = [];
-                // environment texture and intensity has been overwritten by load asset container function
-                this.viewer.scene.environmentTexture = curEnvTexture;
-                this.viewer.scene.environmentIntensity = curEnvIntensity;
-                model.assetContainer = assetContainer;
-                model.state = 'loaded';
+                [...model.assetContainer.lights].forEach(light => light.dispose());
+                [...model.assetContainer.cameras].forEach(camera => camera.dispose());
                 delete this._loadModelPromises[model.name];
             });
             this._loadModelPromises[model.name] = loadModelPromise();
@@ -401,10 +361,7 @@ class ModelManager {
                 const sourceModel = this._getModel(model.sourceModelName);
                 yield this._prepareModelForScene(sourceModel);
             }
-            yield this.viewer.parameterManager.applyAllParameterValuesToModel(model.assetContainer);
-            // parameter manager did his job, now apply the deferred materials to all meshes that are not explicitely hidden by
-            // the parameter manager
-            yield this._applyDeferredMaterialsForAllVisibleMeshes(model);
+            yield (0, asset_helper_1.prepareAssetForScene)(model, this.viewer);
         });
     }
     /**
@@ -430,27 +387,10 @@ class ModelManager {
         model.assetContainer.removeFromScene();
         model.state = 'loaded';
     }
-    /**
-     * Creates and assigns each "deferred" material to the corresponding mesh, if the mesh is visible.
-     * Model should be ready to use immediately after this function has done it's job.
-     */
-    _applyDeferredMaterialsForAllVisibleMeshes(model) {
-        return __awaiter(this, void 0, void 0, function* () {
-            for (const mesh of model.assetContainer.meshes) {
-                const deferredMaterial = (0, metadata_helper_1.getInternalMetadataValue)(mesh, 'deferredMaterial');
-                const rawVisibleValue = this.viewer.parameterManager.getParameterValueOfNode(mesh, index_1.BuiltInParameter.Visible);
-                const visible = rawVisibleValue === undefined || index_1.ParameterManager.parseBoolean(rawVisibleValue) === true;
-                if (deferredMaterial && visible) {
-                    yield this.viewer.materialManager.setMaterialOnMesh(deferredMaterial, mesh);
-                }
-            }
-        });
-    }
 }
 exports.ModelManager = ModelManager;
 /**
  * CAUTION: this has to be in sync with the Combeenation backend!
- * @internal
  */
 ModelManager.CBN_FALLBACK_MODEL_ASSET_NAME = '$fallback';
 //# sourceMappingURL=model-manager.js.map