@mml-io/3d-web-client-core 0.0.0-experimental-45912e3-20240802 → 0.0.0-experimental-4934217-20240805

package/build/index.js

@@ -2489,7 +2489,8 @@ import {
   InteractionManager,
   MMLClickTrigger,
   PromptManager,
-  LoadingProgressManager
+  LoadingProgressManager,
+  MMLDocumentTimeManager
 } from "mml-web";
 import { Group as Group3 } from "three";
 var MMLCompositionScene = class {
@@ -2506,6 +2507,7 @@ var MMLCompositionScene = class {
     this.interactionManager = interactionManager;
     this.interactionListener = interactionListener;
     this.loadingProgressManager = new LoadingProgressManager();
+    this.documentTimeManager = new MMLDocumentTimeManager();
     this.mmlScene = {
       getAudioListener: () => this.config.audioListener,
       getRenderer: () => this.config.renderer,
@@ -3445,24 +3447,27 @@ var TweakPane = class {
     this.characterControls = new CharacterControlsFolder(this.gui, false);
     this.toneMappingFolder.folder.hidden = rendererValues.toneMapping === 5 ? false : true;
     this.export = this.gui.addFolder({ title: "import / export", expanded: false });
-    this.setupGUIListeners();
-    window.addEventListener("keydown", (e) => {
-      this.processKey(e);
-    });
-  }
-  setupGUIListeners() {
+    this.eventHandlerCollection = new EventHandlerCollection();
     const gui = this.gui;
     const paneElement = gui.containerElem_;
     paneElement.style.right = this.guiVisible ? "0px" : "-450px";
-    this.gui.element.addEventListener("mouseenter", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mousemove", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mousedown", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
-    this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
+    this.eventHandlerCollection.add(this.gui.element, "mouseenter", () => setTweakpaneActive(true));
+    this.eventHandlerCollection.add(this.gui.element, "mousemove", () => setTweakpaneActive(true));
+    this.eventHandlerCollection.add(this.gui.element, "mousedown", () => setTweakpaneActive(true));
+    this.eventHandlerCollection.add(
+      this.gui.element,
+      "mouseleave",
+      () => setTweakpaneActive(false)
+    );
+    this.eventHandlerCollection.add(this.gui.element, "mouseup", () => setTweakpaneActive(false));
+    this.eventHandlerCollection.add(window, "keydown", (e) => {
+      this.processKey(e);
+    });
   }
   processKey(e) {
-    if (e.key === "p")
+    if (e.key === "p") {
       this.toggleGUI();
+    }
   }
   setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setSkyboxAzimuthalAngle, setSkyboxPolarAngle, setAmbientLight, setFog) {
     this.rendererFolder.setupChangeEvent(
@@ -3496,6 +3501,7 @@ var TweakPane = class {
     });
   }
   dispose() {
+    this.eventHandlerCollection.clear();
     this.gui.dispose();
     this.tweakPaneWrapper.remove();
   }
@@ -5153,12 +5159,12 @@ var Composer = class {
     this.width = 1;
     this.height = 1;
     this.resolution = new Vector27(this.width, this.height);
-    this.isEnvHDRI = false;
     this.bcs = BrightnessContrastSaturation;
     this.gaussGrainEffect = GaussGrainEffect;
     this.ambientLight = null;
+    this.skyboxState = { src: {}, latestPromise: null };
     this.sun = null;
-    var _a;
+    var _a, _b;
     this.scene = scene;
     this.postPostScene = new Scene4();
     this.camera = camera;
@@ -5271,6 +5277,13 @@ var Composer = class {
       this.sun = new Sun();
       this.scene.add(this.sun);
     }
+    if ((_b = this.environmentConfiguration) == null ? void 0 : _b.skybox) {
+      if ("hdrJpgUrl" in this.environmentConfiguration.skybox) {
+        this.useHDRJPG(this.environmentConfiguration.skybox.hdrJpgUrl);
+      } else if ("hdrUrl" in this.environmentConfiguration.skybox) {
+        this.useHDRI(this.environmentConfiguration.skybox.hdrUrl);
+      }
+    }
     this.updateSunValues();
     this.resizeListener = () => {
       this.fitContainer();
@@ -5278,6 +5291,19 @@ var Composer = class {
     window.addEventListener("resize", this.resizeListener, false);
     this.fitContainer();
   }
+  updateEnvironmentConfiguration(environmentConfiguration) {
+    this.environmentConfiguration = environmentConfiguration;
+    if (environmentConfiguration.skybox) {
+      if ("hdrJpgUrl" in environmentConfiguration.skybox) {
+        this.useHDRJPG(environmentConfiguration.skybox.hdrJpgUrl);
+      } else if ("hdrUrl" in environmentConfiguration.skybox) {
+        this.useHDRI(environmentConfiguration.skybox.hdrUrl);
+      }
+    }
+    this.updateSkyboxAndEnvValues();
+    this.updateAmbientLightValues();
+    this.updateSunValues();
+  }
   setupTweakPane(tweakPane) {
     tweakPane.setupRenderPane(
       this.effectComposer,
@@ -5368,71 +5394,71 @@ var Composer = class {
       0
     );
   }
-  useHDRJPG(url, fromFile = false) {
-    const pmremGenerator = new PMREMGenerator(this.renderer);
-    const hdrJpg = new HDRJPGLoader(this.renderer).load(url, () => {
-      const hdrJpgEquirectangularMap = hdrJpg.renderTarget.texture;
-      hdrJpgEquirectangularMap.mapping = EquirectangularReflectionMapping;
-      hdrJpgEquirectangularMap.needsUpdate = true;
-      const envMap = pmremGenerator.fromEquirectangular(hdrJpgEquirectangularMap).texture;
-      if (envMap) {
-        envMap.colorSpace = LinearSRGBColorSpace;
-        envMap.needsUpdate = true;
-        this.scene.environment = envMap;
-        this.scene.environmentIntensity = envValues.envMapIntensity;
-        this.scene.environmentRotation = new Euler3(
-          MathUtils.degToRad(envValues.skyboxPolarAngle),
-          MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
-          0
-        );
-        this.scene.background = envMap;
-        this.scene.backgroundIntensity = envValues.skyboxIntensity;
-        this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
-        this.scene.backgroundRotation = new Euler3(
-          MathUtils.degToRad(envValues.skyboxPolarAngle),
-          MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
-          0
-        );
-        this.isEnvHDRI = true;
+  async loadHDRJPG(url) {
+    return new Promise((resolve, reject) => {
+      const pmremGenerator = new PMREMGenerator(this.renderer);
+      const hdrJpg = new HDRJPGLoader(this.renderer).load(url, () => {
+        const hdrJpgEquirectangularMap = hdrJpg.renderTarget.texture;
+        hdrJpgEquirectangularMap.mapping = EquirectangularReflectionMapping;
+        hdrJpgEquirectangularMap.needsUpdate = true;
+        const envMap = pmremGenerator.fromEquirectangular(hdrJpgEquirectangularMap).texture;
         hdrJpgEquirectangularMap.dispose();
         pmremGenerator.dispose();
-      }
-      hdrJpg.dispose();
+        hdrJpg.dispose();
+        if (envMap) {
+          envMap.colorSpace = LinearSRGBColorSpace;
+          envMap.needsUpdate = true;
+          resolve(envMap);
+        } else {
+          reject("Failed to generate environment map");
+        }
+      });
     });
   }
-  useHDRI(url, fromFile = false) {
-    if (this.isEnvHDRI && fromFile === false || !this.renderer) {
-      return;
-    }
-    const pmremGenerator = new PMREMGenerator(this.renderer);
-    new RGBELoader(new LoadingManager()).load(
-      url,
-      (texture) => {
+  async loadHDRi(url) {
+    return new Promise((resolve, reject) => {
+      const pmremGenerator = new PMREMGenerator(this.renderer);
+      new RGBELoader(new LoadingManager()).load(url, (texture) => {
         const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        texture.dispose();
+        pmremGenerator.dispose();
         if (envMap) {
           envMap.colorSpace = LinearSRGBColorSpace;
           envMap.needsUpdate = true;
-          this.scene.environment = envMap;
-          this.scene.environmentIntensity = envValues.envMapIntensity;
-          this.scene.environmentRotation = new Euler3(
-            MathUtils.degToRad(envValues.skyboxPolarAngle),
-            MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
-            0
-          );
-          this.scene.background = envMap;
-          this.scene.backgroundIntensity = envValues.skyboxIntensity;
-          this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
-          this.isEnvHDRI = true;
-          texture.dispose();
-          pmremGenerator.dispose();
+          resolve(envMap);
+        } else {
+          reject("Failed to generate environment map");
         }
-      },
-      () => {
-      },
-      (error) => {
-        console.error(`Can't load ${url}: ${JSON.stringify(error)}`);
+      });
+    });
+  }
+  useHDRJPG(url, fromFile = false) {
+    if (this.skyboxState.src.hdrJpgUrl === url) {
+      return;
+    }
+    const hdrJPGPromise = this.loadHDRJPG(url);
+    this.skyboxState.src = { hdrJpgUrl: url };
+    this.skyboxState.latestPromise = hdrJPGPromise;
+    hdrJPGPromise.then((envMap) => {
+      if (this.skyboxState.latestPromise !== hdrJPGPromise) {
+        return;
       }
-    );
+      this.applyEnvMap(envMap);
+    });
+  }
+  useHDRI(url) {
+    if (this.skyboxState.src.hdrUrl === url) {
+      return;
+    }
+    const hdrPromise = this.loadHDRi(url);
+    this.skyboxState.src = { hdrUrl: url };
+    this.skyboxState.latestPromise = hdrPromise;
+    hdrPromise.then((envMap) => {
+      if (this.skyboxState.latestPromise !== hdrPromise) {
+        return;
+      }
+      this.applyEnvMap(envMap);
+    });
   }
   setHDRIFromFile() {
     if (!this.renderer)
@@ -5451,7 +5477,7 @@ var Composer = class {
       const fileURL = URL.createObjectURL(file);
       if (fileURL) {
         if (extension === "hdr") {
-          this.useHDRI(fileURL, true);
+          this.useHDRI(fileURL);
         } else if (extension === "jpg") {
           this.useHDRJPG(fileURL);
         } else {
@@ -5533,6 +5559,23 @@ var Composer = class {
     }
     this.setAmbientLight();
   }
+  applyEnvMap(envMap) {
+    this.scene.environment = envMap;
+    this.scene.environmentIntensity = envValues.envMapIntensity;
+    this.scene.environmentRotation = new Euler3(
+      MathUtils.degToRad(envValues.skyboxPolarAngle),
+      MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
+      0
+    );
+    this.scene.background = envMap;
+    this.scene.backgroundIntensity = envValues.skyboxIntensity;
+    this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
+    this.scene.backgroundRotation = new Euler3(
+      MathUtils.degToRad(envValues.skyboxPolarAngle),
+      MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
+      0
+    );
+  }
 };
 
 // src/time/TimeManager.ts