@combeenation/3d-viewer 4.0.0-beta3 → 4.0.0

package/dist/lib-cjs/api/classes/variant.d.ts

@@ -1,4 +1,5 @@
 import { AssetContainer } from '@babylonjs/core/assetContainer';
+import { Light } from '@babylonjs/core/Lights/light';
 import '@babylonjs/core/Loading/Plugins/babylonFileLoader';
 import { Material } from '@babylonjs/core/Materials/material';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
@@ -8,8 +9,11 @@ import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_transform';
 import '@babylonjs/loaders/glTF/2.0/glTFLoader';
 import { DottedPath } from './dottedPath';
 import { Element } from './element';
-import { ElementParameterizable } from './elementParameterizable';
+import { Parameterizable } from './parameterizable';
+import { ParameterObservable } from './parameterObservable';
+import { VariantParameterizable } from './variantParameterizable';
 import { Viewer } from './viewer';
+import { ViewerLight } from './viewerLight';
 import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_basisu';
 import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_clearcoat';
 import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_sheen';
@@ -23,13 +27,14 @@ import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_variants';
 /**
  * A concrete "Variant". Most of these are handled by either the {@link Viewer} or {@link VariantInstance}.
  */
-export declare class Variant extends ElementParameterizable {
+export declare class Variant extends Parameterizable {
     readonly name: string;
     protected readonly _structureJson: StructureJson;
     readonly viewer: Viewer;
     readonly parent?: Variant | undefined;
     assetContainer: AssetContainer;
     readonly elements: Element[];
+    readonly viewerLights: ViewerLight[];
     structureJson: StructureJson;
     protected _dottedNodes: Map<DottedPath, TransformNode> | undefined;
     protected readonly _children: Map<string, Variant>;
@@ -81,6 +86,10 @@ export declare class Variant extends ElementParameterizable {
      * The TransformNodes of the {@link Variant}.
      */
     get nodes(): TransformNode[];
+    /**
+     * The {@link ViewerLight}s of the {@link Variant}.
+     */
+    get lights(): Light[];
     /**
      * All TransformNodes of the {@link Variant} mapped flat with a {@link DottedPath}.
      */
@@ -93,6 +102,10 @@ export declare class Variant extends ElementParameterizable {
      * All {@link Element}s from this {@link Variant}'s parents.
      */
     get inheritedElements(): Element[];
+    /**
+     * All {@link ViewerLight}s inherited from this {@link Variant}'s parents.
+     */
+    get inheritedViewerLights(): ViewerLight[];
     /**
      * All TransformNodes inherited from this {@link Variant}'s parents.
      */
@@ -101,6 +114,10 @@ export declare class Variant extends ElementParameterizable {
      * All TransformNodes inherited from this {@link Variant}'s parents mapped flat with a {@link DottedPath}.
      */
     get inheritedDottedNodes(): Map<DottedPath, TransformNode>;
+    /**
+     * All Lights inherited from this {@link Variant}'s parents.
+     */
+    get inheritedLights(): Light[];
     /**
      * The {@link ParameterDeclarations} inherited from this {@link Variant}'s parents.
      */
@@ -129,6 +146,11 @@ export declare class Variant extends ElementParameterizable {
      * Uses the mechanism of {@link getDescendant} to resolve the appropriate variant in tree.
      */
     getElement(dottedPath: DottedPathArgument): Promise<Element>;
+    /**
+     * Gets the desired {@link ViewerLight} of the current {@link Variant} relative to its {@link DottedPath}.
+     * Uses the mechanism of {@link getDescendant} to resolve the appropriate variant in tree.
+     */
+    getViewerLight(dottedPath: DottedPathArgument): Promise<ViewerLight>;
     /**
      * A proxy for directly getting a Node from an {@link Element} by its {@link DottedPath}s.
      */
@@ -171,10 +193,28 @@ export declare class Variant extends ElementParameterizable {
      * @emits {@link Event.ASSET_LOADING_END}
      */
     protected loadAssets(): Promise<Variant>;
+    /**
+     * Commits given parameters to all {@link Element}s.
+     */
+    protected commitParametersToElements(parameters: ParameterBag): Promise<void>;
+    /**
+     * Commits given parameters to all {@link ViewerLight}s.
+     */
+    protected commitParametersToViewerLights(parameters: ParameterBag): Promise<void>;
+    /**
+     * Commits given parameters to a {@link VariantParameterizable} and updates the according definition with given
+     * key in the {@link StructureJson}. The `definitionKey` "elements" for example will update the definition in
+     * `this.structureJson.elements`.
+     */
+    protected commitParametersToVariantParameterizable(parameters: ParameterBag, parameterizable: VariantParameterizable, definitionKey: string): Promise<ParameterObservable>;
     /**
      * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
      */
-    protected commitParameterToElements(parameter: string, value: ParameterValue): Promise<void>;
+    protected commitParameterToElements(parameter: string, value: ParameterValue): Promise<Variant>;
+    /**
+     * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
+     */
+    protected commitParameterToViewerLights(parameter: string, value: ParameterValue): Promise<Variant>;
     /**
      * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
      */
@@ -182,7 +222,11 @@ export declare class Variant extends ElementParameterizable {
     /**
      * Creates {@link Element}s and clones nodes into them.
      */
-    protected createElements(): Variant;
+    protected createElements(): Promise<Variant>;
+    /**
+     * Creates {@link ViewerLight}s.
+     */
+    protected createViewerLights(): Promise<Variant>;
     /**
      * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
      */

package/dist/lib-cjs/api/classes/variant.js

@@ -14,9 +14,10 @@ var babylonHelper_1 = require("../util/babylonHelper");
 var resourceHelper_1 = require("../util/resourceHelper");
 var dottedPath_1 = require("./dottedPath");
 var element_1 = require("./element");
-var elementParameterizable_1 = require("./elementParameterizable");
 var event_1 = require("./event");
 var parameter_1 = require("./parameter");
+var parameterizable_1 = require("./parameterizable");
+var viewerLight_1 = require("./viewerLight");
 require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_basisu");
 require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_clearcoat");
 require("@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_sheen");
@@ -42,6 +43,7 @@ var Variant = /** @class */ (function (_super) {
         _this.viewer = viewer;
         _this.parent = parent;
         _this.elements = [];
+        _this.viewerLights = [];
         _this._children = new Map();
         _this._parameterObservers = new Map();
         /**
@@ -187,6 +189,16 @@ var Variant = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Variant.prototype, "lights", {
+        /**
+         * The {@link ViewerLight}s of the {@link Variant}.
+         */
+        get: function () {
+            return this.assetContainer.lights;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Variant.prototype, "dottedNodes", {
         /**
          * All TransformNodes of the {@link Variant} mapped flat with a {@link DottedPath}.
@@ -229,6 +241,20 @@ var Variant = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Variant.prototype, "inheritedViewerLights", {
+        /**
+         * All {@link ViewerLight}s inherited from this {@link Variant}'s parents.
+         */
+        get: function () {
+            var viewerLights = [];
+            this.ancestors.forEach(function (ancestor) {
+                viewerLights = lodash_es_1.concat(viewerLights, ancestor.viewerLights);
+            });
+            return lodash_es_1.concat(viewerLights, this.viewerLights);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Variant.prototype, "inheritedNodes", {
         /**
          * All TransformNodes inherited from this {@link Variant}'s parents.
@@ -257,6 +283,20 @@ var Variant = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Variant.prototype, "inheritedLights", {
+        /**
+         * All Lights inherited from this {@link Variant}'s parents.
+         */
+        get: function () {
+            var lights = [];
+            this.ancestors.forEach(function (ancestor) {
+                lights = lodash_es_1.concat(lights, ancestor.lights);
+            });
+            return lodash_es_1.concat(lights, this.lights);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Variant.prototype, "inheritedParameterDeclaration", {
         /**
          * The {@link ParameterDeclarations} inherited from this {@link Variant}'s parents.
@@ -418,6 +458,42 @@ var Variant = /** @class */ (function (_super) {
             });
         });
     };
+    /**
+     * Gets the desired {@link ViewerLight} of the current {@link Variant} relative to its {@link DottedPath}.
+     * Uses the mechanism of {@link getDescendant} to resolve the appropriate variant in tree.
+     */
+    Variant.prototype.getViewerLight = function (dottedPath) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _dottedPath, viewerLightName, variant, viewerLight;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _dottedPath = dottedPath_1.DottedPath.create(dottedPath);
+                        viewerLightName = _dottedPath.popPart();
+                        variant = this;
+                        if (!(_dottedPath.parts.length > 0)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.getDescendant(_dottedPath)];
+                    case 1:
+                        variant = _a.sent();
+                        _a.label = 2;
+                    case 2:
+                        if (variant.inheritedViewerLights.length === 0) {
+                            throw new Error("No viewerLights for variant \"" + variant.id + "\" found. " +
+                                "Either none are defined or they are not initialized (are you operating on the appropriate living?).");
+                        }
+                        variant.inheritedViewerLights.forEach(function (_viewerLight) {
+                            if (_viewerLight.name === viewerLightName) {
+                                viewerLight = _viewerLight;
+                            }
+                        });
+                        if (!viewerLight) {
+                            throw new Error("ViewerLight with name \"" + viewerLightName + "\" does not exist for variant \"" + variant.id + "\".");
+                        }
+                        return [2 /*return*/, viewerLight];
+                }
+            });
+        });
+    };
     /**
      * A proxy for directly getting a Node from an {@link Element} by its {@link DottedPath}s.
      */
@@ -488,10 +564,15 @@ var Variant = /** @class */ (function (_super) {
                         parent === null || parent === void 0 ? void 0 : parent._children.set(variant.name, variant);
                         variant.assetContainer = this.assetContainer;
                         variant.parameterObservers = lodash_es_1.cloneDeep(this.parameterObservers);
-                        variant.createElements();
+                        return [4 /*yield*/, variant.createElements()];
+                    case 2:
+                        _b.sent();
+                        return [4 /*yield*/, variant.createViewerLights()];
+                    case 3:
+                        _b.sent();
                         variant.addParameterObservers();
                         return [4 /*yield*/, variant.bootstrapParameters(parameters)];
-                    case 2:
+                    case 4:
                         _b.sent();
                         this.broadcastEvent(event_1.Event.VARIANT_CREATED, variant);
                         return [2 /*return*/, variant];
@@ -518,7 +599,7 @@ var Variant = /** @class */ (function (_super) {
      */
     Variant.prototype.commitParameters = function (parameters) {
         return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var oldParameters, _parameters, parameter, value, search, mergedParameters, structureParameters, _structureParameters, parameter, value, search, replacedStructureParameters, differentStructureParameters, parameter, newParameters, structure, parameter, value, search, observerPromises, _loop_1, this_1, parameter, elementPromises;
+            var oldParameters, _parameters, parameter, value, search, mergedParameters, structureParameters, _structureParameters, parameter, value, search, replacedStructureParameters, differentStructureParameters, parameter, newParameters, structure, parameter, value, search, observerPromises, _loop_1, this_1, parameter;
             var _this = this;
             return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
@@ -588,39 +669,22 @@ var Variant = /** @class */ (function (_super) {
                         _a.sent();
                         // broadcast that bag has been committed
                         this.broadcastEvent(event_1.Event.VARIANT_PARAMETER_BAG_COMMITTED, this, oldParameters, newParameters);
-                        elementPromises = this.elements.map(function (element) {
-                            var _elementDefinition = JSON.stringify(_this._structureJson.elements[element.name]);
-                            var elementParameters = {};
-                            for (var parameter in newParameters) {
-                                if (dottedPath_1.DottedPath.create(parameter).firstPart !== element.name) {
-                                    continue;
-                                }
-                                // we got an element parameter
-                                var newParameterValue = newParameters[parameter];
-                                var elementParameter = parameter.replace(element.name + ".", '');
-                                // If the variant is explicitly hidden, we must not override the visibility with element parameters. We need
-                                // an exception for visibility to avoid overloading already applied element parameters with element parameters
-                                // defined in the variant spec ("dotted parameters").
-                                // @see https://github.com/Combeenation/3d-viewer/issues/44
-                                if (elementParameter === parameter_1.Parameter.VISIBLE && newParameters[parameter_1.Parameter.VISIBLE] === false) {
-                                    newParameterValue = false;
-                                }
-                                elementParameters[elementParameter] = newParameterValue;
-                                var search = new RegExp("\\$\\{" + elementParameter + "\\}", 'g');
-                                _elementDefinition = _elementDefinition.replace(search, newParameterValue.toString());
-                            }
-                            _this.structureJson.elements[_this.name] = JSON.parse(_elementDefinition);
-                            return element.commitParameters(elementParameters);
-                        });
-                        return [4 /*yield*/, Promise.all(elementPromises)];
+                        // commit parameters to elements
+                        return [4 /*yield*/, this.commitParametersToElements(newParameters)];
                     case 2:
+                        // commit parameters to elements
                         _a.sent();
-                        if (!this.parent) return [3 /*break*/, 4];
-                        return [4 /*yield*/, this.parent.commitParameters(this.parameters)];
+                        // commit parameters to lights
+                        return [4 /*yield*/, this.commitParametersToViewerLights(newParameters)];
                     case 3:
+                        // commit parameters to lights
                         _a.sent();
-                        _a.label = 4;
-                    case 4: return [2 /*return*/, this];
+                        if (!this.parent) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.parent.commitParameters(this.parameters)];
+                    case 4:
+                        _a.sent();
+                        _a.label = 5;
+                    case 5: return [2 /*return*/, this];
                 }
             });
         });
@@ -674,7 +738,17 @@ var Variant = /** @class */ (function (_super) {
                             var nodes = _this.assetContainer.getNodes().filter(function (n) { return n instanceof transformNode_1.TransformNode; });
                             nodes.forEach(function (node) {
                                 babylonHelper_1.deactivateTransformNode(node, false);
-                                babylonHelper_1.injectTransformNodeMetadata(node, { dottedPath: babylonHelper_1.getDottedPathForTransformNode(node) }, false);
+                                babylonHelper_1.injectNodeMetadata(node, { dottedPath: babylonHelper_1.getDottedPathForNode(node) }, false);
+                            });
+                            _this.assetContainer.lights.forEach(function (light) {
+                                light.setEnabled(false);
+                                babylonHelper_1.injectNodeMetadata(light, { dottedPath: babylonHelper_1.getDottedPathForNode(light) }, false);
+                                _this.viewer.scene.addLight(light);
+                            });
+                            _this.assetContainer.cameras.forEach(function (camera) {
+                                camera.setEnabled(false);
+                                babylonHelper_1.injectNodeMetadata(camera, { dottedPath: babylonHelper_1.getDottedPathForNode(camera) }, false);
+                                _this.viewer.scene.addCamera(camera);
                             });
                             _this.broadcastEvent(event_1.Event.ASSET_LOADING_END, _this);
                             resolve(_this);
@@ -686,6 +760,79 @@ var Variant = /** @class */ (function (_super) {
             });
         });
     };
+    /**
+     * Commits given parameters to all {@link Element}s.
+     */
+    Variant.prototype.commitParametersToElements = function (parameters) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, Promise.all(this.elements.map(function (element) { return _this.commitParametersToVariantParameterizable(parameters, element, 'elements'); }))];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Commits given parameters to all {@link ViewerLight}s.
+     */
+    Variant.prototype.commitParametersToViewerLights = function (parameters) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, Promise.all(this.viewerLights.map(function (viewerLight) { return _this.commitParametersToVariantParameterizable(parameters, viewerLight, 'lights'); }))];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Commits given parameters to a {@link VariantParameterizable} and updates the according definition with given
+     * key in the {@link StructureJson}. The `definitionKey` "elements" for example will update the definition in
+     * `this.structureJson.elements`.
+     */
+    Variant.prototype.commitParametersToVariantParameterizable = function (parameters, parameterizable, definitionKey) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var initialDefinition, initialDefinitionStr, _parameters, parameter, dpp, parameterValue, parameterizableParameter, search, definition;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        initialDefinition = lodash_es_1.get(this._structureJson, definitionKey)[parameterizable.name];
+                        initialDefinitionStr = JSON.stringify(initialDefinition);
+                        _parameters = {};
+                        for (parameter in parameters) {
+                            dpp = dottedPath_1.DottedPath.create(parameter);
+                            if (dpp.shiftPart() !== parameterizable.name) {
+                                continue;
+                            }
+                            parameterValue = parameters[parameter];
+                            parameterizableParameter = dpp.path;
+                            // If the variant is explicitly hidden, we must not override the visibility with element parameters. We need
+                            // an exception for visibility to avoid overloading already applied element parameters with element parameters
+                            // defined in the variant spec ("dotted parameters").
+                            // @see https://github.com/Combeenation/3d-viewer/issues/44
+                            if (parameterizableParameter === parameter_1.Parameter.VISIBLE && parameters[parameter_1.Parameter.VISIBLE] === false) {
+                                parameterValue = false;
+                            }
+                            _parameters[parameterizableParameter] = parameterValue;
+                            search = new RegExp("\\$\\{" + parameterizableParameter + "\\}", 'g');
+                            initialDefinitionStr = initialDefinitionStr.replace(search, parameterValue.toString());
+                        }
+                        definition = lodash_es_1.get(this.structureJson, definitionKey);
+                        definition[this.name] = JSON.parse(initialDefinitionStr);
+                        lodash_es_1.set(this.structureJson, definitionKey, definition);
+                        return [4 /*yield*/, parameterizable.commitParameters(_parameters)];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    };
     /**
      * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
      */
@@ -703,7 +850,29 @@ var Variant = /** @class */ (function (_super) {
                         return [4 /*yield*/, Promise.all(promises)];
                     case 1:
                         _b.sent();
-                        return [2 /*return*/];
+                        return [2 /*return*/, this];
+                }
+            });
+        });
+    };
+    /**
+     * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
+     */
+    Variant.prototype.commitParameterToViewerLights = function (parameter, value) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var promises, _i, _a, viewerLight;
+            return tslib_1.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        promises = [];
+                        for (_i = 0, _a = this.viewerLights; _i < _a.length; _i++) {
+                            viewerLight = _a[_i];
+                            promises.push(viewerLight.commitParameter(parameter, value));
+                        }
+                        return [4 /*yield*/, Promise.all(promises)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/, this];
                 }
             });
         });
@@ -719,6 +888,9 @@ var Variant = /** @class */ (function (_super) {
                     switch (_a.label) {
                         case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.VISIBLE, newValue)];
                         case 1:
+                            _a.sent();
+                            return [4 /*yield*/, variant.commitParameterToViewerLights(parameter_1.Parameter.VISIBLE, newValue)];
+                        case 2:
                             _a.sent();
                             return [2 /*return*/];
                     }
@@ -731,6 +903,9 @@ var Variant = /** @class */ (function (_super) {
                     switch (_a.label) {
                         case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.SCALING, newValue)];
                         case 1:
+                            _a.sent();
+                            return [4 /*yield*/, variant.commitParameterToViewerLights(parameter_1.Parameter.SCALING, newValue)];
+                        case 2:
                             _a.sent();
                             return [2 /*return*/];
                     }
@@ -815,6 +990,9 @@ var Variant = /** @class */ (function (_super) {
                     switch (_a.label) {
                         case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.POSITION, newValue)];
                         case 1:
+                            _a.sent();
+                            return [4 /*yield*/, variant.commitParameterToViewerLights(parameter_1.Parameter.POSITION, newValue)];
+                        case 2:
                             _a.sent();
                             return [2 /*return*/];
                     }
@@ -826,6 +1004,45 @@ var Variant = /** @class */ (function (_super) {
                 return tslib_1.__generator(this, function (_a) {
                     switch (_a.label) {
                         case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.ROTATION, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, variant.commitParameterToViewerLights(parameter_1.Parameter.ROTATION, newValue)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.CAST_SHADOW, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.CAST_SHADOW_FROM_LIGHTS, newValue)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        ]);
+        this._parameterObservers.set(parameter_1.Parameter.RECEIVE_SHADOWS, [
+            function (variant, oldValue, newValue) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, variant.commitParameterToElements(parameter_1.Parameter.RECEIVE_SHADOWS, newValue)];
                         case 1:
                             _a.sent();
                             return [2 /*return*/];
@@ -839,18 +1056,75 @@ var Variant = /** @class */ (function (_super) {
      * Creates {@link Element}s and clones nodes into them.
      */
     Variant.prototype.createElements = function () {
-        var _this = this;
-        for (var elementName in this.structureJson.elements || {}) {
-            this.elements.push(new element_1.Element(this, elementName));
-        }
-        // inject node meta to all inherited elements
-        // we do this to inject the deepest and most concrete variant information to all cloned nodes in the tree
-        this.inheritedElements.forEach(function (element) {
-            element.nodes.forEach(function (node) {
-                babylonHelper_1.injectTransformNodeMetadata(node, { variant: _this, element: element });
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _a, _b, _i, name_2, _c, _d;
+            var _this = this;
+            return tslib_1.__generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        _a = [];
+                        for (_b in this.structureJson.elements || {})
+                            _a.push(_b);
+                        _i = 0;
+                        _e.label = 1;
+                    case 1:
+                        if (!(_i < _a.length)) return [3 /*break*/, 4];
+                        name_2 = _a[_i];
+                        _d = (_c = this.elements).push;
+                        return [4 /*yield*/, element_1.Element.create(this, name_2)];
+                    case 2:
+                        _d.apply(_c, [_e.sent()]);
+                        _e.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4:
+                        // inject node meta to all inherited elements
+                        // we do this to inject the deepest and most concrete variant information to all cloned nodes in the tree
+                        this.inheritedElements.forEach(function (element) {
+                            element.nodes.forEach(function (node) {
+                                babylonHelper_1.injectNodeMetadata(node, { variant: _this, variantParameterizable: element });
+                            });
+                        });
+                        return [2 /*return*/, this];
+                }
+            });
+        });
+    };
+    /**
+     * Creates {@link ViewerLight}s.
+     */
+    Variant.prototype.createViewerLights = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _a, _b, _i, name_3, _c, _d;
+            var _this = this;
+            return tslib_1.__generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        _a = [];
+                        for (_b in this.structureJson.lights || {})
+                            _a.push(_b);
+                        _i = 0;
+                        _e.label = 1;
+                    case 1:
+                        if (!(_i < _a.length)) return [3 /*break*/, 4];
+                        name_3 = _a[_i];
+                        _d = (_c = this.viewerLights).push;
+                        return [4 /*yield*/, viewerLight_1.ViewerLight.create(this, name_3)];
+                    case 2:
+                        _d.apply(_c, [_e.sent()]);
+                        _e.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4:
+                        this.inheritedViewerLights.forEach(function (viewerLight) {
+                            babylonHelper_1.injectNodeMetadata(viewerLight.light, { variant: _this, variantParameterizable: viewerLight });
+                        });
+                        return [2 /*return*/, this];
+                }
             });
         });
-        return this;
     };
     /**
      * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
@@ -869,6 +1143,6 @@ var Variant = /** @class */ (function (_super) {
         });
     };
     return Variant;
-}(elementParameterizable_1.ElementParameterizable));
+}(parameterizable_1.Parameterizable));
 exports.Variant = Variant;
 //# sourceMappingURL=variant.js.map