@mml-io/3d-web-client-core 0.0.0-experimental-0d0c89d-20240206 → 0.0.0-experimental-248ff6a-20240207

package/build/character/CharacterModel.d.ts

@@ -1,3 +1,4 @@
+import { type MMLCharacterDescription } from "@mml-io/3d-web-avatar";
 import { AnimationAction, AnimationMixer, Bone, Object3D } from "three";
 import { AnimationConfig, CharacterDescription } from "./Character";
 import { CharacterMaterial } from "./CharacterMaterial";
@@ -13,6 +14,7 @@ export declare class CharacterModel {
     animations: Record<string, AnimationAction>;
     animationMixer: AnimationMixer | null;
     currentAnimation: AnimationState;
+    mmlCharacterDescription: MMLCharacterDescription;
     constructor(characterDescription: CharacterDescription, animationConfig: AnimationConfig, characterModelLoader: CharacterModelLoader);
     init(): Promise<void>;
     private applyCustomMaterial;

package/build/index.js

@@ -262,7 +262,7 @@ import { Color as Color3, Group, Vector3 as Vector34 } from "three";
 
 // src/character/CharacterModel.ts
 import {
-  Character as MMLCharacter,
+  MMLCharacter,
   ModelLoader,
   parseMMLDescription
 } from "@mml-io/3d-web-avatar";
@@ -706,7 +706,7 @@ var CharacterModel = class {
     this.animationMixer = new AnimationMixer(this.mesh);
   }
   async composeMMLCharacter(mmlCharacterDescription) {
-    var _a, _b, _c;
+    var _a, _b;
     if (((_a = mmlCharacterDescription.base) == null ? void 0 : _a.url.length) === 0) {
       throw new Error(
         "ERROR: An MML Character Description was provided but it's not a valid <m-character> string, or a valid URL"
@@ -715,14 +715,13 @@ var CharacterModel = class {
     let mergedCharacter = null;
     if (mmlCharacterDescription) {
       const characterBase = ((_b = mmlCharacterDescription.base) == null ? void 0 : _b.url) || null;
-      const parts = [];
-      (_c = mmlCharacterDescription.parts) == null ? void 0 : _c.forEach((part) => {
-        if (part.url)
-          parts.push(part.url);
-      });
       if (characterBase) {
+        this.mmlCharacterDescription = mmlCharacterDescription;
         const mmlCharacter = new MMLCharacter(new ModelLoader());
-        mergedCharacter = await mmlCharacter.mergeBodyParts(characterBase, parts);
+        mergedCharacter = await mmlCharacter.mergeBodyParts(
+          characterBase,
+          mmlCharacterDescription.parts
+        );
         if (mergedCharacter) {
           return mergedCharacter.children[0].children[0];
         }
@@ -2360,18 +2359,15 @@ var RendererStatsFolder = class {
       FPS: "0"
     };
     this.folder = parentFolder.addFolder({ title: "renderStats", expanded });
-    this.performance = this.folder.addFolder({ title: "performance", expanded: true });
-    this.defails = this.folder.addFolder({ title: "pipeline details", expanded: false });
-    this.folder.addBlade({ view: "separator" });
-    this.performance.addBinding(this.statsData, "FPS", { readonly: true });
-    this.performance.addBinding(this.statsData, "deltaTime", { readonly: true });
-    this.performance.addBinding(this.statsData, "rawDeltaTime", { readonly: true });
-    this.defails.addBinding(this.statsData, "triangles", { readonly: true });
-    this.defails.addBinding(this.statsData, "geometries", { readonly: true });
-    this.defails.addBinding(this.statsData, "textures", { readonly: true });
-    this.defails.addBinding(this.statsData, "shaders", { readonly: true });
-    this.defails.addBinding(this.statsData, "postPasses", { readonly: true });
-    this.defails.addBinding(this.statsData, "drawCalls", { readonly: true });
+    this.folder.addBinding(this.statsData, "FPS", { readonly: true });
+    this.folder.addBinding(this.statsData, "deltaTime", { readonly: true });
+    this.folder.addBinding(this.statsData, "rawDeltaTime", { readonly: true });
+    this.folder.addBinding(this.statsData, "triangles", { readonly: true });
+    this.folder.addBinding(this.statsData, "geometries", { readonly: true });
+    this.folder.addBinding(this.statsData, "textures", { readonly: true });
+    this.folder.addBinding(this.statsData, "shaders", { readonly: true });
+    this.folder.addBinding(this.statsData, "postPasses", { readonly: true });
+    this.folder.addBinding(this.statsData, "drawCalls", { readonly: true });
   }
   update(renderer, composer, timeManager) {
     const { geometries, textures } = renderer.info.memory;
@@ -2718,7 +2714,7 @@ var ToneMappingFolder = class {
 // src/tweakpane/tweakPaneStyle.ts
 var tweakPaneStyle = `
 :root {
-  --tp-base-background-color: rgba(0, 0, 0, 0.6);
+  --tp-base-background-color: rgba(12, 12, 12, 0.6);
   --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
   --tp-button-background-color: hsla(0, 0%, 80%, 1);
   --tp-button-background-color-active: hsla(0, 0%, 100%, 1);
@@ -2739,6 +2735,9 @@ var tweakPaneStyle = `
   --tp-label-foreground-color: hsla(0, 0%, 100%, 0.6);
   --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);
   --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .tp-brkv {
@@ -2748,28 +2747,40 @@ var tweakPaneStyle = `
 }
 
 .tp-dfwv {
+  z-index: 100;
   color: white;
-  backdrop-filter: blur(12px);
-  width: 360px !important;
+  width: 600px !important;
   display: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
+.tp-fldv {
+  margin: 1px 0px 0px 0px !important;
+}
+
+.tp-fldv_b {
+  overflow: visible !important;
+}
+
 .tp-fldv_t {
-  font-size: 11px;
-  background-color: rgba(0, 0, 0, 0.1);
+  font-size: 13px;
+  font-weight: 900;
+  color: #ffffff;
+  background-color: rgba(70, 70, 70, 0.3);
+  border-top: 1px solid rgba(210, 210, 210, 0.1);
+  border-radius: 3px;
 }
 
 .tp-lblv_l {
-  font-size: 11px;
+  font-size: 12px;
   padding-left: 0px !important;
   padding-right: 0px !important;
 }
 
 .tp-lblv_v {
-  width: 180px;
+  width: 150px;
 }
 
 .tp-sldtxtv_t {
@@ -2777,9 +2788,13 @@ var tweakPaneStyle = `
 }
 
 .tp-sglv_i {
-  font-size: 11px;
+  font-size: 12px;
   color: rgba(255, 255, 255, 0.7);
 }
+
+.tp-ckbv_w {
+  border: 1px solid rgba(200, 200, 250, 0.2);
+}
 `;
 
 // src/tweakpane/TweakPane.ts
@@ -2788,9 +2803,13 @@ var TweakPane = class {
     this.renderer = renderer;
     this.scene = scene;
     this.composer = composer;
-    this.gui = new Pane();
     this.saveVisibilityInLocalStorage = true;
     this.guiVisible = false;
+    const appWrapper = document.getElementById("app");
+    const tweakPaneWrapper = document.createElement("div");
+    tweakPaneWrapper.id = "tweakpane-panel";
+    appWrapper.appendChild(tweakPaneWrapper);
+    this.gui = new Pane({ container: tweakPaneWrapper });
     this.gui.registerPlugin(EssentialsPlugin);
     if (this.saveVisibilityInLocalStorage) {
       const localStorageGuiVisible = localStorage.getItem("guiVisible");
@@ -2817,21 +2836,22 @@ var TweakPane = class {
     this.toneMappingFolder.folder.hidden = rendererValues.toneMapping === 5 ? false : true;
     this.export = this.gui.addFolder({ title: "import / export", expanded: false });
     window.addEventListener("keydown", this.processKey.bind(this));
-    this.setupGUIListeners.bind(this)();
     this.setupRenderPane = this.setupRenderPane.bind(this);
-  }
-  processKey(e) {
-    if (e.key === "p")
-      this.toggleGUI();
+    this.setupGUIListeners.bind(this)();
   }
   setupGUIListeners() {
     const gui = this.gui;
     const paneElement = gui.containerElem_;
-    paneElement.style.display = this.guiVisible ? "unset" : "none";
+    paneElement.style.right = this.guiVisible ? "0px" : "-450px";
+    this.gui.element.addEventListener("mouseenter", () => setTweakpaneActive(true));
     this.gui.element.addEventListener("mousedown", () => setTweakpaneActive(true));
     this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
     this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
   }
+  processKey(e) {
+    if (e.key === "p")
+      this.toggleGUI();
+  }
   setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setAmbientLight, setFog) {
     this.rendererFolder.setupChangeEvent(
       this.scene,
@@ -2903,10 +2923,10 @@ var TweakPane = class {
     input.click();
   }
   toggleGUI() {
+    this.guiVisible = !this.guiVisible;
     const gui = this.gui;
     const paneElement = gui.containerElem_;
-    paneElement.style.display = this.guiVisible ? "none" : "unset";
-    this.guiVisible = !this.guiVisible;
+    paneElement.style.right = this.guiVisible ? "0px" : "-450px";
     if (this.saveVisibilityInLocalStorage) {
       localStorage.setItem("guiVisible", this.guiVisible === true ? "true" : "false");
     }