@combeenation/3d-viewer 5.1.2 → 5.2.0-alpha1

package/src/api/manager/gltfExportManager.ts

@@ -1,191 +1,191 @@
-import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
-import { Color3 } from '@babylonjs/core/Maths/math.color';
-import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
-import { GLTF2Export, IExportOptions } from '@babylonjs/serializers/glTF/2.0';
-import { isMeshIncludedInExclusionList } from '../util/structureHelper';
-import { merge } from 'lodash-es';
-import { Mesh } from '@babylonjs/core/Meshes/mesh';
-
-export class GltfExportManager {
-  /**
-   * Constructor.
-   */
-  protected constructor(protected viewer: Viewer) {}
-
-  /**
-   * Creates an {@link GltfExportManager}.
-   */
-  public static async create(viewer: Viewer): Promise<GltfExportManager> {
-    return new GltfExportManager(viewer);
-  }
-
-  /**
-   * Exports selected nodes to a file.
-   * @param filename optional name of the exported .GLB file.
-   * @param exportOptions export options to be merged with default options.
-   * @param excluded optional list of geometry (meshes, elements, variants, variantInstances) to be excluded from export.
-   */
-  public async exportGlb(
-    filename = 'glb-export.glb',
-    exportOptions: IExportOptions = {},
-    excluded?: ExcludedGeometryList
-  ): Promise<File | undefined> {
-    this.exportPreProcess();
-    const glbData = await GLTF2Export.GLBAsync(
-      this.viewer.scene,
-      'dummy',
-      this.gltfExportOptions(exportOptions, excluded)
-    );
-    this.exportPostProcess();
-    const resBlob = glbData.glTFFiles['dummy.glb']; // should be only one file for glb
-
-    // check if result is valid, according to the typings this could also be a string
-    if (resBlob instanceof Blob) {
-      if (!filename.endsWith('.glb')) {
-        filename += '.glb';
-      }
-      return new File([resBlob], filename);
-    } else {
-      // result was not a valid blob
-      return undefined;
-    }
-  }
-
-  /**
-   * Exports selected nodes to GLTF. This may result in more than one file, since textures are exported separately.
-   * @param filename name of the main (text-based) .GLTF file referring to separate texture files.
-   * @param exportOptions export options to be merged with default options.
-   * @param excluded optional list of geometry (meshes, elements, variants, variantInstances) to be excluded from export.
-   */
-  public async exportGltfToFile(filename: string, exportOptions: IExportOptions = {}, excluded?: ExcludedGeometryList) {
-    this.exportPreProcess();
-    await GLTF2Export.GLTFAsync(this.viewer.scene, filename, this.gltfExportOptions(exportOptions, excluded)).then(
-      glb => {
-        glb.downloadFiles();
-      }
-    );
-    this.exportPostProcess();
-  }
-
-  /**
-   * Exports selected nodes to GLB. This results in one binary file.
-   * @param filename name of the .GLB file.
-   * @param exportOptions export options to be merged with default options.
-   * @param excluded optional list of geometry (meshes, elements, variants, variantInstances) to be excluded from export
-   */
-  public async exportGlbToFile(filename: string, exportOptions: IExportOptions = {}, excluded?: ExcludedGeometryList) {
-    this.exportPreProcess();
-    await GLTF2Export.GLBAsync(this.viewer.scene, filename, this.gltfExportOptions(exportOptions, excluded)).then(
-      glb => {
-        glb.downloadFiles();
-      }
-    );
-    this.exportPostProcess();
-  }
-
-  /**
-   * Gets predefined {@link IExportOptions } merged with given ones.
-   */
-  protected gltfExportOptions(mergeWithOptions: IExportOptions = {}, excluded?: ExcludedGeometryList): IExportOptions {
-    const defaultOptions = {
-      // includeCoordinateSystemConversionNodes: true,
-      shouldExportNode: function (node: any) {
-        if (!node.isEnabled()) {
-          return false;
-        }
-        if (node.isVisible === false) {
-          return false;
-        }
-        if (node.name === '__bounding_box__') {
-          return false;
-        }
-        if (excluded && node instanceof Mesh && isMeshIncludedInExclusionList(node, excluded)) {
-          return false;
-        }
-        return true;
-      },
-    };
-    return merge({}, defaultOptions, mergeWithOptions);
-  }
-
-  /**
-   * Stuff to be done before exporting to GLTF
-   */
-  protected exportPreProcess() {
-    this.viewer.pauseRendering();
-    this.exchangeRefractionMaterials();
-  }
-
-  /**
-   * Stuff to be done after the GLTF export
-   */
-  protected exportPostProcess() {
-    this.restoreRefractionMaterials();
-    this.viewer.resumeRendering();
-  }
-
-  /**
-   * Materials with refraction set are not exported properly.
-   * Exchange all such (relevant) materials with a more export-friendly version
-   */
-  protected exchangeRefractionMaterials() {
-    for (const n of this.viewer.scene.getNodes()) {
-      if (!(n instanceof AbstractMesh)) continue;
-      if (!(n.material instanceof PBRMaterial)) continue;
-      if (!(n.material as PBRMaterial).subSurface.isRefractionEnabled) continue;
-      if ((n.material as PBRMaterial).transparencyMode !== PBRMaterial.PBRMATERIAL_OPAQUE) continue;
-      // if we're here, we have a node holding a material with set refraction whose transparencyMode is set to PBRMATERIAL_OPAQUE
-      n.material = this.createRefractionMaterialReplacement(n.material);
-    }
-  }
-
-  /**
-   * Restore original materials with set refraction.
-   */
-  protected restoreRefractionMaterials() {
-    for (const n of this.viewer.scene.getNodes()) {
-      if (!(n instanceof AbstractMesh)) continue;
-      if (!(n.material instanceof PBRMaterial)) continue;
-      if (!this.isMaterialClonedForExport(n.material)) continue;
-      // at this point we have a pbrmaterial tagged as cloned in its metadata that's set on a mesh
-
-      // restore and dispose
-      const currMaterial = n.material;
-      const prevMaterial = this.viewer.scene.getMaterialByUniqueID(n.material.metadata.clonedFrom);
-      if (prevMaterial) {
-        n.material = prevMaterial; // restore previous material
-        currMaterial.dispose(false, true); // dispose of clone
-      }
-    }
-  }
-
-  /**
-   * Create an export-friendly replacement material for a material using refraction.
-   * @param mat Material to be replaced
-   */
-  protected createRefractionMaterialReplacement(mat: PBRMaterial): PBRMaterial {
-    // if we're dealing with a clone already, return it instead of cloning
-    if (this.isMaterialClonedForExport(mat)) return mat;
-
-    // change material according to https://www.notion.so/combeenation/Glas-materials-don-t-look-glasy-after-export-d5fda2c6515e4420a8772744d3e6b460
-    let clonedMaterial = mat.clone(mat.name); // clone material. clone uses same name
-    clonedMaterial.metadata = { ...mat.metadata, clonedFrom: mat.uniqueId }; // create shallow copy of metadata on clone. see https://forum.babylonjs.com/t/the-metadata-of-the-mesh-cloned-by-the-instantiatemodelstoscene-method-is-a-shallow-copy/21563
-    clonedMaterial.refractionTexture = null;
-    clonedMaterial.metallicReflectanceTexture = null; // is this the correct one for metallic roughness?
-    clonedMaterial.alpha = 0.7;
-    clonedMaterial.albedoColor = new Color3(0.3, 0.3, 0.3);
-    clonedMaterial.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHABLEND;
-    clonedMaterial.metallic = 0.65;
-    clonedMaterial.roughness = 0.15;
-
-    return clonedMaterial;
-  }
-
-  /**
-   * Inspect if a material was temporarily cloned for GLB export
-   * @param mat Material to be inspected
-   */
-  protected isMaterialClonedForExport(mat: PBRMaterial): boolean {
-    return !!mat.metadata?.clonedFrom;
-  }
-}
+import { isMeshIncludedInExclusionList } from '../util/structureHelper';
+import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
+import { Color3 } from '@babylonjs/core/Maths/math.color';
+import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { GLTF2Export, IExportOptions } from '@babylonjs/serializers/glTF/2.0';
+import { merge } from 'lodash-es';
+
+export class GltfExportManager {
+  /**
+   * Constructor.
+   */
+  protected constructor(protected viewer: Viewer) {}
+
+  /**
+   * Creates an {@link GltfExportManager}.
+   */
+  public static async create(viewer: Viewer): Promise<GltfExportManager> {
+    return new GltfExportManager(viewer);
+  }
+
+  /**
+   * Exports selected nodes to a file.
+   * @param filename optional name of the exported .GLB file.
+   * @param exportOptions export options to be merged with default options.
+   * @param excluded optional list of geometry (meshes, elements, variants, variantInstances) to be excluded from export.
+   */
+  public async exportGlb(
+    filename = 'glb-export.glb',
+    exportOptions: IExportOptions = {},
+    excluded?: ExcludedGeometryList
+  ): Promise<File | undefined> {
+    this.exportPreProcess();
+    const glbData = await GLTF2Export.GLBAsync(
+      this.viewer.scene,
+      'dummy',
+      this.gltfExportOptions(exportOptions, excluded)
+    );
+    this.exportPostProcess();
+    const resBlob = glbData.glTFFiles['dummy.glb']; // should be only one file for glb
+
+    // check if result is valid, according to the typings this could also be a string
+    if (resBlob instanceof Blob) {
+      if (!filename.endsWith('.glb')) {
+        filename += '.glb';
+      }
+      return new File([resBlob], filename);
+    } else {
+      // result was not a valid blob
+      return undefined;
+    }
+  }
+
+  /**
+   * Exports selected nodes to GLTF. This may result in more than one file, since textures are exported separately.
+   * @param filename name of the main (text-based) .GLTF file referring to separate texture files.
+   * @param exportOptions export options to be merged with default options.
+   * @param excluded optional list of geometry (meshes, elements, variants, variantInstances) to be excluded from export.
+   */
+  public async exportGltfToFile(filename: string, exportOptions: IExportOptions = {}, excluded?: ExcludedGeometryList) {
+    this.exportPreProcess();
+    await GLTF2Export.GLTFAsync(this.viewer.scene, filename, this.gltfExportOptions(exportOptions, excluded)).then(
+      glb => {
+        glb.downloadFiles();
+      }
+    );
+    this.exportPostProcess();
+  }
+
+  /**
+   * Exports selected nodes to GLB. This results in one binary file.
+   * @param filename name of the .GLB file.
+   * @param exportOptions export options to be merged with default options.
+   * @param excluded optional list of geometry (meshes, elements, variants, variantInstances) to be excluded from export
+   */
+  public async exportGlbToFile(filename: string, exportOptions: IExportOptions = {}, excluded?: ExcludedGeometryList) {
+    this.exportPreProcess();
+    await GLTF2Export.GLBAsync(this.viewer.scene, filename, this.gltfExportOptions(exportOptions, excluded)).then(
+      glb => {
+        glb.downloadFiles();
+      }
+    );
+    this.exportPostProcess();
+  }
+
+  /**
+   * Gets predefined {@link IExportOptions } merged with given ones.
+   */
+  protected gltfExportOptions(mergeWithOptions: IExportOptions = {}, excluded?: ExcludedGeometryList): IExportOptions {
+    const defaultOptions = {
+      // includeCoordinateSystemConversionNodes: true,
+      shouldExportNode: function (node: any) {
+        if (!node.isEnabled()) {
+          return false;
+        }
+        if (node.isVisible === false) {
+          return false;
+        }
+        if (node.name === '__bounding_box__') {
+          return false;
+        }
+        if (excluded && node instanceof Mesh && isMeshIncludedInExclusionList(node, excluded)) {
+          return false;
+        }
+        return true;
+      },
+    };
+    return merge({}, defaultOptions, mergeWithOptions);
+  }
+
+  /**
+   * Stuff to be done before exporting to GLTF
+   */
+  protected exportPreProcess() {
+    this.viewer.pauseRendering();
+    this.exchangeRefractionMaterials();
+  }
+
+  /**
+   * Stuff to be done after the GLTF export
+   */
+  protected exportPostProcess() {
+    this.restoreRefractionMaterials();
+    this.viewer.resumeRendering();
+  }
+
+  /**
+   * Materials with refraction set are not exported properly.
+   * Exchange all such (relevant) materials with a more export-friendly version
+   */
+  protected exchangeRefractionMaterials() {
+    for (const n of this.viewer.scene.getNodes()) {
+      if (!(n instanceof AbstractMesh)) continue;
+      if (!(n.material instanceof PBRMaterial)) continue;
+      if (!(n.material as PBRMaterial).subSurface.isRefractionEnabled) continue;
+      if ((n.material as PBRMaterial).transparencyMode !== PBRMaterial.PBRMATERIAL_OPAQUE) continue;
+      // if we're here, we have a node holding a material with set refraction whose transparencyMode is set to PBRMATERIAL_OPAQUE
+      n.material = this.createRefractionMaterialReplacement(n.material);
+    }
+  }
+
+  /**
+   * Restore original materials with set refraction.
+   */
+  protected restoreRefractionMaterials() {
+    for (const n of this.viewer.scene.getNodes()) {
+      if (!(n instanceof AbstractMesh)) continue;
+      if (!(n.material instanceof PBRMaterial)) continue;
+      if (!this.isMaterialClonedForExport(n.material)) continue;
+      // at this point we have a pbrmaterial tagged as cloned in its metadata that's set on a mesh
+
+      // restore and dispose
+      const currMaterial = n.material;
+      const prevMaterial = this.viewer.scene.getMaterialByUniqueID(n.material.metadata.clonedFrom);
+      if (prevMaterial) {
+        n.material = prevMaterial; // restore previous material
+        currMaterial.dispose(false, true); // dispose of clone
+      }
+    }
+  }
+
+  /**
+   * Create an export-friendly replacement material for a material using refraction.
+   * @param mat Material to be replaced
+   */
+  protected createRefractionMaterialReplacement(mat: PBRMaterial): PBRMaterial {
+    // if we're dealing with a clone already, return it instead of cloning
+    if (this.isMaterialClonedForExport(mat)) return mat;
+
+    // change material according to https://www.notion.so/combeenation/Glas-materials-don-t-look-glasy-after-export-d5fda2c6515e4420a8772744d3e6b460
+    let clonedMaterial = mat.clone(mat.name); // clone material. clone uses same name
+    clonedMaterial.metadata = { ...mat.metadata, clonedFrom: mat.uniqueId }; // create shallow copy of metadata on clone. see https://forum.babylonjs.com/t/the-metadata-of-the-mesh-cloned-by-the-instantiatemodelstoscene-method-is-a-shallow-copy/21563
+    clonedMaterial.refractionTexture = null;
+    clonedMaterial.metallicReflectanceTexture = null; // is this the correct one for metallic roughness?
+    clonedMaterial.alpha = 0.7;
+    clonedMaterial.albedoColor = new Color3(0.3, 0.3, 0.3);
+    clonedMaterial.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHABLEND;
+    clonedMaterial.metallic = 0.65;
+    clonedMaterial.roughness = 0.15;
+
+    return clonedMaterial;
+  }
+
+  /**
+   * Inspect if a material was temporarily cloned for GLB export
+   * @param mat Material to be inspected
+   */
+  protected isMaterialClonedForExport(mat: PBRMaterial): boolean {
+    return !!mat.metadata?.clonedFrom;
+  }
+}

package/src/api/manager/sceneManager.ts

@@ -1,127 +1,127 @@
-import { Camera } from '@babylonjs/core/Cameras/camera';
-import { Scene as BabylonScene } from '@babylonjs/core/scene';
-import { cloneDeep, concat, merge } from 'lodash-es';
-import { ParameterObservable } from '../classes/parameterObservable';
-import { Event } from '../classes/event';
-import { SpecStorage } from '../store/specStorage';
-import { mergeMaps } from '../util/resourceHelper';
-import { Parameter } from '../classes/parameter';
-import { changeEnvironment } from '../util/babylonHelper';
-
-export class SceneManager extends ParameterObservable {
-  protected readonly _parameterObservers: Map<string, ParameterObserver[]> = new Map();
-
-  /**
-   * Constructor.
-   */
-  protected constructor(public scene: BabylonScene) {
-    super();
-    this.addParameterObservers();
-  }
-
-  /**
-   * Creates a {@link SceneManager} based on given BabylonJS scene.
-   */
-  public static async create(scene: BabylonScene): Promise<SceneManager> {
-    const sceneManager = new SceneManager(scene);
-    await sceneManager.bootstrapParameters(SpecStorage.get<ParameterBag>('scene.parameters'));
-    return sceneManager;
-  }
-
-  /**
-   * The active `Camera`.
-   */
-  get activeCamera(): Camera {
-    if (!this.scene.activeCamera) {
-      throw new Error('Scene has no active camera.');
-    }
-    return this.scene.activeCamera;
-  }
-
-  /**
-   * Places the given {@link ParameterBag} in the {@link SceneManager}'s parameters, replaces all patterns in the
-   * {@link StructureJson} and broadcasts all {@link ParameterObserver}s.
-   *
-   * @emit {@link Event.SCENE_PARAMETER_COMMITTED}
-   */
-  public async commitParameters(parameters?: ParameterBag): Promise<SceneManager> {
-    if (!parameters) {
-      parameters = {};
-    }
-    const oldParameters = cloneDeep(this.parameters);
-    merge(this.parameters, parameters);
-
-    // handle parameter observers
-    let observerPromises: Promise<void | ParameterObserver>[] = [];
-    for (const parameter in this.parameters) {
-      const oldParameterValue = oldParameters[parameter];
-      const newParameterValue = this.parameters[parameter];
-      this.assertParameter(Parameter.declarations, parameter, newParameterValue);
-      if (oldParameterValue === newParameterValue) {
-        continue;
-      }
-      // parameter changed
-      const parameterObservers = mergeMaps(this._parameterObservers, this.parameterObservers);
-      if (parameterObservers.has(parameter)) {
-        const observers = parameterObservers.get(parameter)!;
-        observerPromises = concat(
-          observerPromises,
-          observers.map(observer => {
-            const observerResult = observer(this, oldParameterValue, newParameterValue);
-            const observerPromise = Promise.resolve(observerResult);
-            observerPromise.then(() => {
-              this.broadcastEvent(
-                Event.SCENE_PARAMETER_COMMITTED,
-                this,
-                parameter,
-                oldParameterValue,
-                newParameterValue
-              );
-            });
-            return observerPromise;
-          })
-        );
-      }
-    }
-    await Promise.all(observerPromises);
-    return this;
-  }
-
-  protected addParameterObservers(): SceneManager {
-    const handleEnvParamChange = (manager: SceneManager, oldValue: ParameterValue, newValue: ParameterValue) => {
-      const params = {
-        color: manager.parameters[Parameter.ENVIRONMENT_COLOR],
-        intensity: manager.parameters[Parameter.ENVIRONMENT_INTENSITY],
-        env: manager.parameters[Parameter.ENVIRONMENT],
-        background: manager.parameters[Parameter.ENVIRONMENT_BACKGROUND],
-        rotation: manager.parameters[Parameter.ENVIRONMENT_ROTATION],
-        useDefault: manager.parameters[Parameter.ENVIRONMENT_USEDEFAULT],
-      };
-      const envDef: EnvironmentDefinition = {
-        environmentColor: params.color ? Parameter.parseColor(params.color) : undefined,
-        environmentIntensity: params.intensity !== undefined ? Parameter.parseNumber(params.intensity) : undefined,
-        environment: params.env ? (params.env as string) : undefined,
-        environmentBackground: params.background ? (params.background as string) : undefined,
-        environmentRotation: params.rotation !== undefined ? Parameter.parseNumber(params.rotation) : undefined,
-        environmentUseDefault: params.useDefault ? Parameter.parseBoolean(params.useDefault) : undefined,
-      };
-      changeEnvironment(manager.scene, envDef);
-    };
-
-    this._parameterObservers.set(Parameter.ENVIRONMENT_COLOR, [handleEnvParamChange]);
-    this._parameterObservers.set(Parameter.ENVIRONMENT_ROTATION, [handleEnvParamChange]);
-    this._parameterObservers.set(Parameter.ENVIRONMENT_USEDEFAULT, [handleEnvParamChange]);
-    this._parameterObservers.set(Parameter.ENVIRONMENT, [handleEnvParamChange]);
-    this._parameterObservers.set(Parameter.ENVIRONMENT_BACKGROUND, [handleEnvParamChange]);
-    this._parameterObservers.set(Parameter.ENVIRONMENT_INTENSITY, [handleEnvParamChange]);
-    return this;
-  }
-
-  /**
-   * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
-   */
-  protected async bootstrapParameters(parameters?: ParameterBag): Promise<SceneManager> {
-    await this.commitParameters(merge(cloneDeep(this.parameters), parameters));
-    return this;
-  }
-}
+import { Event } from '../classes/event';
+import { Parameter } from '../classes/parameter';
+import { ParameterObservable } from '../classes/parameterObservable';
+import { SpecStorage } from '../store/specStorage';
+import { changeEnvironment } from '../util/babylonHelper';
+import { mergeMaps } from '../util/resourceHelper';
+import { Camera } from '@babylonjs/core/Cameras/camera';
+import { Scene as BabylonScene } from '@babylonjs/core/scene';
+import { cloneDeep, concat, merge } from 'lodash-es';
+
+export class SceneManager extends ParameterObservable {
+  protected readonly _parameterObservers: Map<string, ParameterObserver[]> = new Map();
+
+  /**
+   * Constructor.
+   */
+  protected constructor(public scene: BabylonScene) {
+    super();
+    this.addParameterObservers();
+  }
+
+  /**
+   * Creates a {@link SceneManager} based on given BabylonJS scene.
+   */
+  public static async create(scene: BabylonScene): Promise<SceneManager> {
+    const sceneManager = new SceneManager(scene);
+    await sceneManager.bootstrapParameters(SpecStorage.get<ParameterBag>('scene.parameters'));
+    return sceneManager;
+  }
+
+  /**
+   * The active `Camera`.
+   */
+  get activeCamera(): Camera {
+    if (!this.scene.activeCamera) {
+      throw new Error('Scene has no active camera.');
+    }
+    return this.scene.activeCamera;
+  }
+
+  /**
+   * Places the given {@link ParameterBag} in the {@link SceneManager}'s parameters, replaces all patterns in the
+   * {@link StructureJson} and broadcasts all {@link ParameterObserver}s.
+   *
+   * @emit {@link Event.SCENE_PARAMETER_COMMITTED}
+   */
+  public async commitParameters(parameters?: ParameterBag): Promise<SceneManager> {
+    if (!parameters) {
+      parameters = {};
+    }
+    const oldParameters = cloneDeep(this.parameters);
+    merge(this.parameters, parameters);
+
+    // handle parameter observers
+    let observerPromises: Promise<void | ParameterObserver>[] = [];
+    for (const parameter in this.parameters) {
+      const oldParameterValue = oldParameters[parameter];
+      const newParameterValue = this.parameters[parameter];
+      this.assertParameter(Parameter.declarations, parameter, newParameterValue);
+      if (oldParameterValue === newParameterValue) {
+        continue;
+      }
+      // parameter changed
+      const parameterObservers = mergeMaps(this._parameterObservers, this.parameterObservers);
+      if (parameterObservers.has(parameter)) {
+        const observers = parameterObservers.get(parameter)!;
+        observerPromises = concat(
+          observerPromises,
+          observers.map(observer => {
+            const observerResult = observer(this, oldParameterValue, newParameterValue);
+            const observerPromise = Promise.resolve(observerResult);
+            observerPromise.then(() => {
+              this.broadcastEvent(
+                Event.SCENE_PARAMETER_COMMITTED,
+                this,
+                parameter,
+                oldParameterValue,
+                newParameterValue
+              );
+            });
+            return observerPromise;
+          })
+        );
+      }
+    }
+    await Promise.all(observerPromises);
+    return this;
+  }
+
+  protected addParameterObservers(): SceneManager {
+    const handleEnvParamChange = (manager: SceneManager, oldValue: ParameterValue, newValue: ParameterValue) => {
+      const params = {
+        color: manager.parameters[Parameter.ENVIRONMENT_COLOR],
+        intensity: manager.parameters[Parameter.ENVIRONMENT_INTENSITY],
+        env: manager.parameters[Parameter.ENVIRONMENT],
+        background: manager.parameters[Parameter.ENVIRONMENT_BACKGROUND],
+        rotation: manager.parameters[Parameter.ENVIRONMENT_ROTATION],
+        useDefault: manager.parameters[Parameter.ENVIRONMENT_USEDEFAULT],
+      };
+      const envDef: EnvironmentDefinition = {
+        environmentColor: params.color ? Parameter.parseColor(params.color) : undefined,
+        environmentIntensity: params.intensity !== undefined ? Parameter.parseNumber(params.intensity) : undefined,
+        environment: params.env ? (params.env as string) : undefined,
+        environmentBackground: params.background ? (params.background as string) : undefined,
+        environmentRotation: params.rotation !== undefined ? Parameter.parseNumber(params.rotation) : undefined,
+        environmentUseDefault: params.useDefault ? Parameter.parseBoolean(params.useDefault) : undefined,
+      };
+      changeEnvironment(manager.scene, envDef);
+    };
+
+    this._parameterObservers.set(Parameter.ENVIRONMENT_COLOR, [handleEnvParamChange]);
+    this._parameterObservers.set(Parameter.ENVIRONMENT_ROTATION, [handleEnvParamChange]);
+    this._parameterObservers.set(Parameter.ENVIRONMENT_USEDEFAULT, [handleEnvParamChange]);
+    this._parameterObservers.set(Parameter.ENVIRONMENT, [handleEnvParamChange]);
+    this._parameterObservers.set(Parameter.ENVIRONMENT_BACKGROUND, [handleEnvParamChange]);
+    this._parameterObservers.set(Parameter.ENVIRONMENT_INTENSITY, [handleEnvParamChange]);
+    return this;
+  }
+
+  /**
+   * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
+   */
+  protected async bootstrapParameters(parameters?: ParameterBag): Promise<SceneManager> {
+    await this.commitParameters(merge(cloneDeep(this.parameters), parameters));
+    return this;
+  }
+}