@mml-io/3d-web-client-core 0.20.0 → 0.21.0

package/build/index.js

@@ -487,7 +487,7 @@ var CameraManager = class {
 };
 
 // src/character/Character.ts
-import { Color as Color3, Group, Vector3 as Vector34 } from "three";
+import { Color as Color3, Group, Vector3 as Vector35 } from "three";
 
 // src/character/CharacterModel.ts
 import {
@@ -498,7 +498,9 @@ import { ModelLoader } from "@mml-io/model-loader";
 import {
   AnimationClip,
   AnimationMixer,
-  LoopRepeat
+  Box3,
+  LoopRepeat,
+  Vector3 as Vector33
 } from "three";
 
 // src/character/CharacterMaterial.ts
@@ -786,6 +788,7 @@ var _CharacterModel = class _CharacterModel {
     this.config = config;
     this.mesh = null;
     this.headBone = null;
+    this.characterHeight = null;
     this.materials = /* @__PURE__ */ new Map();
     this.animations = {};
     this.animationMixer = null;
@@ -794,41 +797,49 @@ var _CharacterModel = class _CharacterModel {
   }
   async init() {
     await this.loadMainMesh();
-    await this.setAnimationFromFile(
-      this.config.animationConfig.idleAnimationFileUrl,
-      0 /* idle */,
-      true
-    );
-    await this.setAnimationFromFile(
-      this.config.animationConfig.jogAnimationFileUrl,
-      1 /* walking */,
-      true
-    );
-    await this.setAnimationFromFile(
-      this.config.animationConfig.sprintAnimationFileUrl,
-      2 /* running */,
-      true
-    );
-    await this.setAnimationFromFile(
-      this.config.animationConfig.airAnimationFileUrl,
-      4 /* air */,
-      true
-    );
-    await this.setAnimationFromFile(
-      this.config.animationConfig.doubleJumpAnimationFileUrl,
-      6 /* doubleJump */,
-      false,
-      1.45
-    );
-    this.applyCustomMaterials();
+    if (this.mesh) {
+      await this.setAnimationFromFile(
+        this.config.animationConfig.idleAnimationFileUrl,
+        0 /* idle */,
+        true
+      );
+      await this.setAnimationFromFile(
+        this.config.animationConfig.jogAnimationFileUrl,
+        1 /* walking */,
+        true
+      );
+      await this.setAnimationFromFile(
+        this.config.animationConfig.sprintAnimationFileUrl,
+        2 /* running */,
+        true
+      );
+      await this.setAnimationFromFile(
+        this.config.animationConfig.airAnimationFileUrl,
+        4 /* air */,
+        true
+      );
+      await this.setAnimationFromFile(
+        this.config.animationConfig.doubleJumpAnimationFileUrl,
+        6 /* doubleJump */,
+        false,
+        1.45
+      );
+      this.applyCustomMaterials();
+    }
   }
   applyCustomMaterials() {
     if (!this.mesh)
       return;
+    const boundingBox = new Box3();
+    this.mesh.updateWorldMatrix(true, true);
+    boundingBox.expandByObject(this.mesh);
+    this.characterHeight = boundingBox.max.y - boundingBox.min.y;
     this.mesh.traverse((child) => {
       if (child.isBone) {
         if (child.name === "head") {
+          const worldPosition = new Vector33();
           this.headBone = child;
+          this.headBone.getWorldPosition(worldPosition);
         }
       }
       if (child.isMesh || child.isSkinnedMesh) {
@@ -931,23 +942,31 @@ var _CharacterModel = class _CharacterModel {
     return null;
   }
   async loadMainMesh() {
-    const mainMesh = await this.loadCharacterFromDescription();
-    if (typeof mainMesh !== "undefined") {
+    let mainMesh = null;
+    try {
+      mainMesh = await this.loadCharacterFromDescription();
+    } catch (error) {
+      console.error("Failed to load character from description", error);
+    }
+    if (mainMesh) {
       this.setMainMesh(mainMesh);
-    } else {
-      throw new Error("ERROR: No Character Model was loaded");
     }
   }
-  cleanAnimationClips(skeletalMesh, animationClip) {
+  cleanAnimationClips(skeletalMesh, animationClip, keepRootBonePositionAnimation) {
     const availableBones = /* @__PURE__ */ new Set();
-    skeletalMesh.traverse((child) => {
-      const asBone = child;
-      if (asBone.isBone) {
-        availableBones.add(child.name);
-      }
-    });
+    if (skeletalMesh) {
+      skeletalMesh.traverse((child) => {
+        const asBone = child;
+        if (asBone.isBone) {
+          availableBones.add(child.name);
+        }
+      });
+    }
     animationClip.tracks = animationClip.tracks.filter((track) => {
       const [trackName, trackProperty] = track.name.split(".");
+      if (keepRootBonePositionAnimation && trackName === "root" && trackProperty === "position") {
+        return true;
+      }
       const shouldAnimate = availableBones.has(trackName) && trackProperty !== "position" && trackProperty !== "scale";
       return shouldAnimate;
     });
@@ -956,7 +975,7 @@ var _CharacterModel = class _CharacterModel {
   async setAnimationFromFile(animationFileUrl, animationType, loop = true, playbackSpeed = 1) {
     return new Promise(async (resolve, reject) => {
       const animation = await this.config.characterModelLoader.load(animationFileUrl, "animation");
-      const cleanAnimation = this.cleanAnimationClips(this.mesh, animation);
+      const cleanAnimation = this.cleanAnimationClips(this.mesh, animation, true);
       if (typeof animation !== "undefined" && cleanAnimation instanceof AnimationClip) {
         this.animations[animationType] = this.animationMixer.clipAction(cleanAnimation);
         this.animations[animationType].stop();
@@ -1105,17 +1124,10 @@ var CharacterSpeakingIndicator = class {
 };
 
 // src/character/CharacterTooltip.ts
-import {
-  Color as Color2,
-  FrontSide,
-  LinearFilter as LinearFilter2,
-  Mesh as Mesh3,
-  MeshBasicMaterial as MeshBasicMaterial2,
-  PlaneGeometry
-} from "three";
+import { Color as Color2, FrontSide, LinearFilter as LinearFilter2, Sprite, SpriteMaterial } from "three";
 
 // src/character/CanvasText.ts
-import { Texture, LinearFilter, RGBAFormat, MeshBasicMaterial } from "three";
+import { Texture, LinearFilter, RGBAFormat } from "three";
 function getTextAlignOffset(textAlign, width) {
   switch (textAlign) {
     case "center":
@@ -1126,7 +1138,8 @@ function getTextAlignOffset(textAlign, width) {
       return 0;
   }
 }
-function printAtWordWrap(context, fullText, x, y, lineHeight, fitWidth, padding, alignment) {
+function printAtWordWrap(context, fullText, textAlign, y, lineHeight, fitWidth, padding) {
+  const x = getTextAlignOffset(textAlign, fitWidth - padding * 2);
   const lines = fullText.split("\n");
   let currentLine = 0;
   for (const text of lines) {
@@ -1143,7 +1156,30 @@ function printAtWordWrap(context, fullText, x, y, lineHeight, fitWidth, padding,
       const textWidth = context.measureText(str).width;
       if (textWidth + padding * 2 > fitWidth) {
         if (lastWordIndex === 1) {
-          lastWordIndex = 2;
+          const word = words[0];
+          let charIndex = 1;
+          while (charIndex < word.length) {
+            const substring = word.substring(0, charIndex);
+            const subWidth = context.measureText(substring).width;
+            if (subWidth + padding * 2 > fitWidth) {
+              if (charIndex === 1)
+                charIndex = 2;
+              context.fillText(
+                word.substring(0, charIndex - 1),
+                x + padding,
+                y + lineHeight * currentLine + padding
+              );
+              currentLine++;
+              words[0] = word.substring(charIndex - 1);
+              break;
+            }
+            charIndex++;
+          }
+          if (charIndex >= word.length) {
+            lastWordIndex = 2;
+          } else {
+            continue;
+          }
         }
         context.fillText(
           words.slice(0, lastWordIndex - 1).join(" "),
@@ -1158,64 +1194,96 @@ function printAtWordWrap(context, fullText, x, y, lineHeight, fitWidth, padding,
       }
     }
     if (lastWordIndex > 0 && words.length > 0) {
-      const xOffset = alignment === "center" ? 0 : padding;
-      context.fillText(words.join(" "), x + xOffset, y + lineHeight * currentLine + padding);
+      context.fillText(words.join(" "), x + padding, y + lineHeight * currentLine + padding);
       currentLine++;
     }
   }
 }
-function CanvasText(message, options) {
-  const fontsize = options.fontSize;
-  const textColor = options.textColorRGB255A1;
-  const backgroundColor = options.backgroundColorRGB255A1 || { r: 255, g: 255, b: 255, a: 1 };
-  const padding = options.paddingPx || 0;
-  const font = options.font || "Arial";
-  const fontString = (options.bold ? "bold " : "") + fontsize + "px " + font;
-  const canvas2 = document.createElement("canvas");
-  const ct = canvas2.getContext("2d");
-  const textAlign = options.alignment ?? "left";
-  if (options.dimensions) {
-    canvas2.width = options.dimensions.width;
-    canvas2.height = options.dimensions.height;
-    ct.clearRect(0, 0, canvas2.width, canvas2.height);
-    ct.font = fontString;
-    ct.textAlign = textAlign;
-    ct.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
-    ct.lineWidth = 0;
-    ct.fillRect(0, 0, canvas2.width, canvas2.height);
-    ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
-    ct.font = fontString;
-    printAtWordWrap(
-      ct,
-      message,
-      getTextAlignOffset(textAlign, canvas2.width),
-      fontsize,
-      fontsize,
-      canvas2.width,
-      padding,
-      textAlign
-    );
-  } else {
-    ct.font = fontString;
-    const metrics = ct.measureText(message);
-    const textWidth = metrics.width;
-    const textHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
-    canvas2.width = textWidth + padding * 2;
-    canvas2.height = textHeight + padding;
-    ct.clearRect(0, 0, canvas2.width, canvas2.height);
-    ct.font = fontString;
-    ct.textAlign = textAlign;
-    ct.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
-    ct.lineWidth = 0;
-    ct.fillRect(0, 0, canvas2.width, canvas2.height);
-    ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
-    ct.font = fontString;
-    ct.fillText(message, padding + getTextAlignOffset(textAlign, textWidth), textHeight);
-  }
-  return canvas2;
-}
+var CanvasText = class {
+  constructor() {
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+  }
+  renderText(message, options) {
+    const fontsize = options.fontSize;
+    const textColor = options.textColorRGB255A1;
+    const backgroundColor = options.backgroundColorRGB255A1 || { r: 255, g: 255, b: 255, a: 1 };
+    const padding = options.paddingPx || 0;
+    const font = options.font || "Arial";
+    const fontString = (options.bold ? "bold " : "") + fontsize + "px " + font;
+    const textAlign = options.alignment ?? "left";
+    if (options.dimensions && options.dimensions.maxWidth === void 0) {
+      this.canvas.width = options.dimensions.width;
+      this.canvas.height = options.dimensions.height;
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.context.font = fontString;
+      this.context.textAlign = textAlign;
+      this.context.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
+      this.context.lineWidth = 0;
+      this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+      this.context.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
+      printAtWordWrap(
+        this.context,
+        message,
+        textAlign,
+        fontsize,
+        fontsize,
+        this.canvas.width,
+        padding
+      );
+      return this.canvas;
+    } else {
+      this.context.font = fontString;
+      this.context.textAlign = textAlign;
+      const metrics = this.context.measureText(message);
+      const textWidth = metrics.width;
+      const textHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
+      if (options.dimensions && options.dimensions.maxWidth !== void 0) {
+        const maxWidthWithoutPadding = options.dimensions.maxWidth - padding * 2;
+        if (textWidth > maxWidthWithoutPadding) {
+          const lineCount = Math.ceil(textWidth / maxWidthWithoutPadding);
+          this.canvas.width = options.dimensions.maxWidth;
+          this.canvas.height = textHeight * lineCount + padding * 2;
+          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+          this.context.font = fontString;
+          this.context.textAlign = textAlign;
+          this.context.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
+          this.context.lineWidth = 0;
+          this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+          this.context.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
+          printAtWordWrap(
+            this.context,
+            message,
+            textAlign,
+            fontsize,
+            fontsize,
+            this.canvas.width,
+            padding
+          );
+          return this.canvas;
+        } else {
+        }
+      }
+      this.canvas.width = textWidth + padding * 2;
+      this.canvas.height = textHeight + padding * 2;
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.context.font = fontString;
+      this.context.textAlign = textAlign;
+      this.context.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
+      this.context.lineWidth = 0;
+      this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+      this.context.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
+      this.context.fillText(
+        message,
+        padding + getTextAlignOffset(textAlign, textWidth),
+        textHeight
+      );
+    }
+    return this.canvas;
+  }
+};
 function THREECanvasTextTexture(text, options) {
-  const canvas2 = CanvasText(text, options);
+  const canvas2 = new CanvasText().renderText(text, options);
   const texture = new Texture(canvas2);
   texture.minFilter = LinearFilter;
   texture.magFilter = LinearFilter;
@@ -1229,46 +1297,46 @@ var fontScale = 5;
 var defaultLabelColor = new Color2(0);
 var defaultFontColor = new Color2(16777215);
 var defaultLabelAlignment = "center" /* center */;
-var defaultLabelFontSize = 8;
-var defaultLabelPadding = 8;
-var defaultLabelWidth = 0.25;
-var defaultLabelHeight = 0.1;
-var defaultLabelCastShadows = true;
-var tooltipGeometry = new PlaneGeometry(1, 1, 1, 1);
-var CharacterTooltip = class extends Mesh3 {
+var defaultLabelFontSize = 10;
+var defaultLabelPadding = 10;
+var defaultVisibleOpacity = 0.85;
+var defaultSecondsToFadeOut = null;
+var CharacterTooltip = class extends Sprite {
   constructor(configArg) {
-    super(tooltipGeometry);
-    this.visibleOpacity = 0.85;
+    super();
     this.targetOpacity = 0;
     this.fadingSpeed = 0.02;
-    this.secondsToFadeOut = 10;
+    this.content = null;
+    this.hideTimeout = null;
     this.config = {
       alignment: defaultLabelAlignment,
-      width: defaultLabelWidth,
-      height: defaultLabelHeight,
       fontSize: defaultLabelFontSize,
       padding: defaultLabelPadding,
       color: defaultLabelColor,
       fontColor: defaultFontColor,
-      castShadows: defaultLabelCastShadows,
+      visibleOpacity: defaultVisibleOpacity,
+      secondsToFadeOut: defaultSecondsToFadeOut,
       ...configArg
     };
-    this.tooltipMaterial = new MeshBasicMaterial2({
+    this.material = new SpriteMaterial({
       map: null,
       transparent: true,
-      opacity: 0,
+      opacity: this.config.visibleOpacity,
       side: FrontSide
     });
-    this.material = this.tooltipMaterial;
     this.position.set(0, 1.6, 0);
     this.visible = false;
   }
+  setHeightOffset(height) {
+    this.position.y = height + this.scale.y / 2;
+  }
   redrawText(content) {
-    if (!this.tooltipMaterial) {
+    if (content === this.content) {
       return;
     }
-    if (this.tooltipMaterial.map) {
-      this.tooltipMaterial.map.dispose();
+    this.content = content;
+    if (this.material.map) {
+      this.material.map.dispose();
     }
     const { texture, width, height } = THREECanvasTextTexture(content, {
       bold: true,
@@ -1286,51 +1354,63 @@ var CharacterTooltip = class extends Mesh3 {
         b: this.config.color.b * 255,
         a: 1
       },
-      alignment: this.config.alignment
+      alignment: this.config.alignment,
+      dimensions: this.config.maxWidth !== void 0 ? {
+        maxWidth: this.config.maxWidth
+      } : void 0
     });
-    this.tooltipMaterial.map = texture;
-    this.tooltipMaterial.map.magFilter = LinearFilter2;
-    this.tooltipMaterial.map.minFilter = LinearFilter2;
-    this.tooltipMaterial.needsUpdate = true;
+    this.material.map = texture;
+    this.material.map.magFilter = LinearFilter2;
+    this.material.map.minFilter = LinearFilter2;
+    this.material.needsUpdate = true;
     this.scale.x = width / (100 * fontScale);
     this.scale.y = height / (100 * fontScale);
-    this.position.y = 1.4;
   }
-  setText(text, temporary = false) {
+  setText(text, onRemove) {
     const sanitizedText = text.replace(/(\r\n|\n|\r)/gm, "");
-    this.redrawText(sanitizedText);
     this.visible = true;
-    this.targetOpacity = this.visibleOpacity;
-    if (temporary) {
-      setTimeout(() => {
+    this.targetOpacity = this.config.visibleOpacity;
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+    if (this.config.secondsToFadeOut !== null) {
+      this.hideTimeout = setTimeout(() => {
+        this.hideTimeout = null;
         this.hide();
-      }, this.secondsToFadeOut * 1e3);
+        if (onRemove) {
+          onRemove();
+        }
+      }, this.config.secondsToFadeOut * 1e3);
     }
+    this.redrawText(sanitizedText);
   }
   hide() {
     this.targetOpacity = 0;
   }
-  update(camera) {
-    this.lookAt(camera.position);
-    const opacity = this.tooltipMaterial.opacity;
+  show() {
+    this.setText(this.content || "");
+  }
+  update() {
+    const opacity = this.material.opacity;
     if (opacity < this.targetOpacity) {
-      this.tooltipMaterial.opacity = Math.min(
-        this.tooltipMaterial.opacity + this.fadingSpeed,
+      this.material.opacity = Math.min(
+        this.material.opacity + this.fadingSpeed,
         this.targetOpacity
       );
     } else if (opacity > this.targetOpacity) {
-      this.tooltipMaterial.opacity = Math.max(
-        this.tooltipMaterial.opacity - this.fadingSpeed,
+      this.material.opacity = Math.max(
+        this.material.opacity - this.fadingSpeed,
         this.targetOpacity
       );
-      if (opacity >= 1 && this.tooltipMaterial.transparent) {
-        this.tooltipMaterial.transparent = false;
-        this.tooltipMaterial.needsUpdate = true;
-      } else if (opacity > 0 && opacity < 1 && !this.tooltipMaterial.transparent) {
-        this.tooltipMaterial.transparent = true;
-        this.tooltipMaterial.needsUpdate = true;
+      if (opacity >= 1 && this.material.transparent) {
+        this.material.transparent = false;
+        this.material.needsUpdate = true;
+      } else if (opacity > 0 && opacity < 1 && !this.material.transparent) {
+        this.material.transparent = true;
+        this.material.needsUpdate = true;
       }
-      if (this.tooltipMaterial.opacity <= 0) {
+      if (this.material.opacity <= 0) {
         this.visible = false;
       }
     }
@@ -1338,6 +1418,12 @@ var CharacterTooltip = class extends Mesh3 {
 };
 
 // src/character/Character.ts
+function characterHeightToTooltipHeightOffset(characterHeight) {
+  return characterHeight - 0.4 + 0.1;
+}
+function characterDescriptionMatches(a, b) {
+  return a.meshFileUrl === b.meshFileUrl && a.mmlCharacterString === b.mmlCharacterString && a.mmlCharacterUrl === b.mmlCharacterUrl;
+}
 var Character = class extends Group {
   constructor(config) {
     super();
@@ -1345,18 +1431,42 @@ var Character = class extends Group {
     this.model = null;
     this.color = new Color3();
     this.speakingIndicator = null;
-    this.tooltip = new CharacterTooltip();
-    this.tooltip.setText(this.config.username, this.config.isLocal);
+    this.chatTooltips = [];
+    this.tooltip = new CharacterTooltip(
+      this.config.isLocal ? {
+        secondsToFadeOut: 10
+      } : {}
+    );
+    this.tooltip.setText(this.config.username);
     this.add(this.tooltip);
     this.load().then(() => {
       this.config.modelLoadedCallback();
+      this.setTooltipHeights();
     });
   }
   updateCharacter(username, characterDescription) {
-    this.config.username = username;
-    this.config.characterDescription = characterDescription;
-    this.load();
-    this.tooltip.setText(username, this.config.isLocal);
+    if (!characterDescriptionMatches(this.config.characterDescription, characterDescription)) {
+      this.config.characterDescription = characterDescription;
+      this.load().then(() => {
+        this.setTooltipHeights();
+      });
+    }
+    if (this.config.username !== username) {
+      this.config.username = username;
+      this.tooltip.setText(username);
+      this.tooltip.show();
+    }
+  }
+  setTooltipHeights() {
+    if (this.model && this.model.characterHeight) {
+      let height = characterHeightToTooltipHeightOffset(this.model.characterHeight);
+      this.tooltip.setHeightOffset(height);
+      height += this.tooltip.scale.y;
+      for (const chatTooltip of this.chatTooltips) {
+        chatTooltip.setHeightOffset(height);
+        height += chatTooltip.scale.y;
+      }
+    }
   }
   async load() {
     const previousModel = this.model;
@@ -1372,7 +1482,9 @@ var Character = class extends Group {
       isLocal: this.config.isLocal
     });
     await this.model.init();
-    this.add(this.model.mesh);
+    if (this.model.mesh) {
+      this.add(this.model.mesh);
+    }
     if (this.speakingIndicator === null) {
       this.speakingIndicator = new CharacterSpeakingIndicator(this.config.composer.postPostScene);
     }
@@ -1386,13 +1498,13 @@ var Character = class extends Group {
     if (!this.model)
       return;
     if (this.tooltip) {
-      this.tooltip.update(this.config.cameraManager.camera);
+      this.tooltip.update();
     }
     if (this.speakingIndicator) {
       this.speakingIndicator.setTime(time);
       if (this.model.mesh && this.model.headBone) {
         this.speakingIndicator.setBillboarding(
-          (_a = this.model.headBone) == null ? void 0 : _a.getWorldPosition(new Vector34()),
+          (_a = this.model.headBone) == null ? void 0 : _a.getWorldPosition(new Vector35()),
           this.config.cameraManager.camera
         );
       }
@@ -1403,13 +1515,31 @@ var Character = class extends Group {
     var _a;
     return ((_a = this.model) == null ? void 0 : _a.currentAnimation) || 0 /* idle */;
   }
+  addChatBubble(message) {
+    const tooltip = new CharacterTooltip({
+      maxWidth: 1e3,
+      secondsToFadeOut: 10,
+      color: new Color3(0.125, 0.125, 0.125)
+    });
+    this.add(tooltip);
+    this.chatTooltips.push(tooltip);
+    tooltip.setText(message, () => {
+      this.chatTooltips = this.chatTooltips.filter((t) => t !== tooltip);
+      this.remove(tooltip);
+      this.setTooltipHeights();
+    });
+    if (this.config.isLocal) {
+      this.tooltip.show();
+    }
+    this.setTooltipHeights();
+  }
 };
 
 // src/character/CharacterManager.ts
-import { Euler as Euler2, Group as Group2, Quaternion as Quaternion5, Vector3 as Vector38 } from "three";
+import { Euler as Euler2, Group as Group2, Quaternion as Quaternion5, Vector3 as Vector39 } from "three";
 
 // src/character/LocalController.ts
-import { Euler, Line3, Matrix4, Quaternion as Quaternion2, Ray, Raycaster as Raycaster2, Vector3 as Vector35 } from "three";
+import { Euler, Line3, Matrix4, Quaternion as Quaternion2, Ray, Raycaster as Raycaster2, Vector3 as Vector36 } from "three";
 
 // src/tweakpane/blades/characterControlsFolder.ts
 var characterControllerValues = {
@@ -1592,13 +1722,13 @@ var CharacterControlsFolder = class {
 };
 
 // src/character/LocalController.ts
-var downVector = new Vector35(0, -1, 0);
+var downVector = new Vector36(0, -1, 0);
 var LocalController = class {
   constructor(config) {
     this.config = config;
     this.capsuleInfo = {
       radius: 0.4,
-      segment: new Line3(new Vector35(), new Vector35(0, 1.05, 0))
+      segment: new Line3(new Vector36(), new Vector36(0, 1.05, 0))
     };
     this.gravity = -characterControllerValues.gravity;
     this.jumpForce = characterControllerValues.jumpForce;
@@ -1616,34 +1746,34 @@ var LocalController = class {
     this.groundRunControl = characterControllerValues.groundRunControl;
     this.baseControl = characterControllerValues.baseControlMultiplier;
     this.minimumSurfaceAngle = characterControllerValues.minimumSurfaceAngle;
-    this.latestPosition = new Vector35();
+    this.latestPosition = new Vector36();
     this.characterOnGround = false;
     this.coyoteTime = false;
     this.collisionDetectionSteps = 15;
     this.characterWasOnGround = false;
     this.characterAirborneSince = 0;
     this.currentHeight = 0;
-    this.currentSurfaceAngle = new Vector35();
-    this.characterVelocity = new Vector35();
-    this.vectorUp = new Vector35(0, 1, 0);
-    this.vectorDown = new Vector35(0, -1, 0);
+    this.currentSurfaceAngle = new Vector36();
+    this.characterVelocity = new Vector36();
+    this.vectorUp = new Vector36(0, 1, 0);
+    this.vectorDown = new Vector36(0, -1, 0);
     this.rotationOffset = 0;
     this.azimuthalAngle = 0;
     this.tempMatrix = new Matrix4();
     this.tempSegment = new Line3();
     this.tempQuaternion = new Quaternion2();
     this.tempEuler = new Euler();
-    this.tempVector = new Vector35();
-    this.tempVector2 = new Vector35();
-    this.tempVector3 = new Vector35();
+    this.tempVector = new Vector36();
+    this.tempVector2 = new Vector36();
+    this.tempVector3 = new Vector36();
     this.rayCaster = new Raycaster2();
     this.surfaceTempQuaternion = new Quaternion2();
     this.surfaceTempQuaternion2 = new Quaternion2();
-    this.surfaceTempVector1 = new Vector35();
-    this.surfaceTempVector2 = new Vector35();
-    this.surfaceTempVector3 = new Vector35();
-    this.surfaceTempVector4 = new Vector35();
-    this.surfaceTempVector5 = new Vector35();
+    this.surfaceTempVector1 = new Vector36();
+    this.surfaceTempVector2 = new Vector36();
+    this.surfaceTempVector3 = new Vector36();
+    this.surfaceTempVector4 = new Vector36();
+    this.surfaceTempVector5 = new Vector36();
     this.surfaceTempRay = new Ray();
     this.lastFrameSurfaceState = null;
     this.jumpPressed = false;
@@ -1940,7 +2070,7 @@ var LocalController = class {
 };
 
 // src/character/RemoteController.ts
-import { Quaternion as Quaternion3, Vector3 as Vector36 } from "three";
+import { Quaternion as Quaternion3, Vector3 as Vector37 } from "three";
 var tempQuaternion = new Quaternion3();
 var RemoteController = class {
   constructor(config) {
@@ -1969,7 +2099,7 @@ var RemoteController = class {
   }
   updateFromNetwork(clientUpdate) {
     const { position, rotation, state } = clientUpdate;
-    this.config.character.position.lerp(new Vector36(position.x, position.y, position.z), 0.15);
+    this.config.character.position.lerp(new Vector37(position.x, position.y, position.z), 0.15);
     const rotationQuaternion = new Quaternion3(0, rotation.quaternionY, 0, rotation.quaternionW);
     this.config.character.quaternion.slerp(rotationQuaternion, 0.6);
     if (state !== this.currentAnimation) {
@@ -1980,7 +2110,7 @@ var RemoteController = class {
 };
 
 // src/character/url-position.ts
-import { Quaternion as Quaternion4, Vector3 as Vector37 } from "three";
+import { Quaternion as Quaternion4, Vector3 as Vector38 } from "three";
 function encodeCharacterAndCamera(character, camera) {
   return [
     ...toArray(character.position),
@@ -1993,11 +2123,11 @@ function decodeCharacterAndCamera(hash) {
   const values = hash.split(",").map(Number);
   return {
     character: {
-      position: new Vector37(values[0], values[1], values[2]),
+      position: new Vector38(values[0], values[1], values[2]),
       quaternion: new Quaternion4(values[3], values[4], values[5], values[6])
     },
     camera: {
-      position: new Vector37(values[7], values[8], values[9]),
+      position: new Vector38(values[7], values[8], values[9]),
       quaternion: new Quaternion4(values[10], values[11], values[12], values[13])
     }
   };
@@ -2007,16 +2137,17 @@ function decodeCharacterAndCamera(hash) {
 var CharacterManager = class {
   constructor(config) {
     this.config = config;
-    this.headTargetOffset = new Vector38(0, 1.3, 0);
+    this.headTargetOffset = new Vector39(0, 1.3, 0);
     this.localClientId = 0;
     this.remoteCharacters = /* @__PURE__ */ new Map();
     this.remoteCharacterControllers = /* @__PURE__ */ new Map();
     this.localCharacterSpawned = false;
     this.localCharacter = null;
     this.speakingCharacters = /* @__PURE__ */ new Map();
+    this.lastUpdateSentTime = 0;
     this.group = new Group2();
   }
-  spawnLocalCharacter(id, username, characterDescription, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
+  spawnLocalCharacter(id, username, characterDescription, spawnPosition = new Vector39(), spawnRotation = new Euler2()) {
     const character = new Character({
       username,
       characterDescription,
@@ -2059,7 +2190,7 @@ var CharacterManager = class {
   setupTweakPane(tweakPane) {
     tweakPane.setupCharacterController(this.localController);
   }
-  spawnRemoteCharacter(id, username, characterDescription, spawnPosition = new Vector38(), spawnRotation = new Euler2()) {
+  spawnRemoteCharacter(id, username, characterDescription, spawnPosition = new Vector39(), spawnRotation = new Euler2()) {
     const character = new Character({
       username,
       characterDescription,
@@ -2105,6 +2236,15 @@ var CharacterManager = class {
   setSpeakingCharacter(id, value) {
     this.speakingCharacters.set(id, value);
   }
+  addSelfChatBubble(message) {
+    if (this.localCharacter) {
+      this.localCharacter.addChatBubble(message);
+    }
+  }
+  addChatBubble(id, message) {
+    var _a;
+    (_a = this.remoteCharacters.get(id)) == null ? void 0 : _a.addChatBubble(message);
+  }
   respawnIfPresent(id) {
     const characterInfo = this.config.characterResolve(id);
     if (this.localCharacter && this.localClientId == id) {
@@ -2128,10 +2268,13 @@ var CharacterManager = class {
         );
       }
       this.localController.update();
-      if (this.config.timeManager.frame % 2 === 0) {
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      const timeSinceLastUpdate = currentTime - this.lastUpdateSentTime;
+      if (timeSinceLastUpdate > 30) {
+        this.lastUpdateSentTime = currentTime;
         this.config.sendUpdate(this.localController.networkState);
       }
-      const targetOffset = new Vector38();
+      const targetOffset = new Vector39();
       targetOffset.add(this.headTargetOffset).applyQuaternion(this.localCharacter.quaternion).add(this.localCharacter.position);
       this.config.cameraManager.setTarget(targetOffset);
       for (const [id, update] of this.config.remoteUserStates) {
@@ -2146,7 +2289,7 @@ var CharacterManager = class {
             id,
             characterInfo.username,
             characterInfo.characterDescription,
-            new Vector38(position.x, position.y, position.z)
+            new Vector39(position.x, position.y, position.z)
           );
         }
         const characterController = this.remoteCharacterControllers.get(id);
@@ -2242,26 +2385,22 @@ var CharacterModelLoader = class {
     }
   }
   async loadFromUrl(url, fileType, extension) {
-    if (["gltf", "glb"].includes(extension)) {
-      return new Promise(async (resolve, reject) => {
-        const modelLoadResult = await this.modelLoader.load(
-          url,
-          (loaded, total) => {
-          }
-        );
-        if (fileType === "model") {
-          resolve(modelLoadResult.group);
-        } else if (fileType === "animation") {
-          resolve(modelLoadResult.animations[0]);
-        } else {
-          const error = `Trying to load unknown ${fileType} type of element from file ${url}`;
-          console.error(error);
-          reject(error);
+    return new Promise(async (resolve, reject) => {
+      const modelLoadResult = await this.modelLoader.load(
+        url,
+        (loaded, total) => {
         }
-      });
-    } else {
-      console.error(`Error: can't recognize ${url} extension: ${extension}`);
-    }
+      );
+      if (fileType === "model") {
+        resolve(modelLoadResult.group);
+      } else if (fileType === "animation") {
+        resolve(modelLoadResult.animations[0]);
+      } else {
+        const error = `Trying to load unknown ${fileType} type of element from file ${url}`;
+        console.error(error);
+        reject(error);
+      }
+    });
   }
 };
 
@@ -2614,7 +2753,6 @@ var MMLCompositionScene = class {
       hasGraphicsAdapter() {
         return true;
       },
-      getRootContainer: () => this.group,
       addCollider: (object, mElement) => {
         this.config.collisionsManager.addMeshesGroup(object, mElement);
       },
@@ -3717,12 +3855,12 @@ import {
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
 // src/sun/Sun.ts
-import { CameraHelper, Color as Color5, DirectionalLight, Group as Group4, OrthographicCamera, Vector3 as Vector39 } from "three";
+import { CameraHelper, Color as Color5, DirectionalLight, Group as Group4, OrthographicCamera, Vector3 as Vector310 } from "three";
 var Sun = class extends Group4 {
   constructor() {
     super();
     this.debug = false;
-    this.sunOffset = new Vector39(
+    this.sunOffset = new Vector310(
       sunValues.sunPosition.sunAzimuthalAngle * (Math.PI / 180),
       sunValues.sunPosition.sunPolarAngle * (Math.PI / 180),
       100
@@ -3750,7 +3888,7 @@ var Sun = class extends Group4 {
     this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
     this.directionalLight.castShadow = true;
     this.setColor();
-    this.updateCharacterPosition(new Vector39(0, 0, 0));
+    this.updateCharacterPosition(new Vector310(0, 0, 0));
     this.add(this.directionalLight);
     if (this.debug === true && this.camHelper instanceof CameraHelper) {
       this.add(this.camHelper);
@@ -3788,7 +3926,7 @@ var Sun = class extends Group4 {
     if (!this.target)
       return;
     const distance = this.sunOffset.z;
-    const sphericalPosition = new Vector39(
+    const sphericalPosition = new Vector310(
       distance * Math.sin(polarAngle) * Math.cos(azimuthalAngle),
       distance * Math.cos(polarAngle),
       distance * Math.sin(polarAngle) * Math.sin(azimuthalAngle)
@@ -3963,7 +4101,7 @@ import {
   ShaderMaterial as ShaderMaterial4,
   Uniform as Uniform7,
   Vector2 as Vector26,
-  Vector3 as Vector313,
+  Vector3 as Vector314,
   WebGLMultipleRenderTargets,
   WebGLRenderTarget
 } from "three";
@@ -4108,7 +4246,7 @@ var DepthDownSample = {
 };
 
 // src/rendering/post-effects/n8-ssao/EffectCompositer.ts
-import { Matrix4 as Matrix43, Uniform as Uniform4, Vector2 as Vector23, Vector3 as Vector310 } from "three";
+import { Matrix4 as Matrix43, Uniform as Uniform4, Vector2 as Vector23, Vector3 as Vector311 } from "three";
 var EffectCompositer = {
   uniforms: {
     sceneDiffuse: new Uniform4(null),
@@ -4118,9 +4256,9 @@ var EffectCompositer = {
     viewMat: new Uniform4(new Matrix43()),
     projectionMatrixInv: new Uniform4(new Matrix43()),
     viewMatrixInv: new Uniform4(new Matrix43()),
-    cameraPos: new Uniform4(new Vector310()),
+    cameraPos: new Uniform4(new Vector311()),
     resolution: new Uniform4(new Vector23()),
-    color: new Uniform4(new Vector310()),
+    color: new Uniform4(new Vector311()),
     blueNoise: new Uniform4(null),
     downsampledDepth: new Uniform4(null),
     time: new Uniform4(0),
@@ -4371,7 +4509,7 @@ var EffectCompositer = {
 };
 
 // src/rendering/post-effects/n8-ssao/EffectShader.ts
-import { Matrix4 as Matrix44, Uniform as Uniform5, Vector2 as Vector24, Vector3 as Vector311 } from "three";
+import { Matrix4 as Matrix44, Uniform as Uniform5, Vector2 as Vector24, Vector3 as Vector312 } from "three";
 var EffectShader = {
   uniforms: {
     sceneDiffuse: new Uniform5(null),
@@ -4382,7 +4520,7 @@ var EffectShader = {
     projViewMat: new Uniform5(new Matrix44()),
     projectionMatrixInv: new Uniform5(new Matrix44()),
     viewMatrixInv: new Uniform5(new Matrix44()),
-    cameraPos: new Uniform5(new Vector311()),
+    cameraPos: new Uniform5(new Vector312()),
     resolution: new Uniform5(new Vector24()),
     time: new Uniform5(0),
     samples: new Uniform5([]),
@@ -4594,7 +4732,7 @@ var EffectShader = {
 import {
   BufferAttribute,
   BufferGeometry,
-  Mesh as Mesh4,
+  Mesh as Mesh3,
   OrthographicCamera as OrthographicCamera2,
   Sphere
 } from "three";
@@ -4610,7 +4748,7 @@ var FullScreenTriangle = class {
     this.geometry.boundingSphere = new Sphere();
     this.geometry.computeBoundingSphere = function() {
     };
-    this.mesh = new Mesh4(this.geometry, material);
+    this.mesh = new Mesh3(this.geometry, material);
     this.mesh.frustumCulled = false;
   }
   get material() {
@@ -4629,7 +4767,7 @@ var FullScreenTriangle = class {
 };
 
 // src/rendering/post-effects/n8-ssao/PoissionBlur.ts
-import { Matrix4 as Matrix45, Uniform as Uniform6, Vector2 as Vector25, Vector3 as Vector312 } from "three";
+import { Matrix4 as Matrix45, Uniform as Uniform6, Vector2 as Vector25, Vector3 as Vector313 } from "three";
 var PoissionBlur = {
   uniforms: {
     sceneDiffuse: new Uniform6(null),
@@ -4639,7 +4777,7 @@ var PoissionBlur = {
     viewMat: new Uniform6(new Matrix45()),
     projectionMatrixInv: new Uniform6(new Matrix45()),
     viewMatrixInv: new Uniform6(new Matrix45()),
-    cameraPos: new Uniform6(new Vector312()),
+    cameraPos: new Uniform6(new Vector313()),
     resolution: new Uniform6(new Vector25()),
     time: new Uniform6(0),
     r: new Uniform6(5),
@@ -5025,7 +5163,7 @@ var N8SSAOPass = class extends Pass {
       const x = r * Math.cos(theta);
       const y = r * Math.sin(theta);
       const z = Math.sqrt(1 - (x * x + y * y));
-      points.push(new Vector313(x, y, z));
+      points.push(new Vector314(x, y, z));
     }
     return points;
   }
@@ -5124,7 +5262,7 @@ var N8SSAOPass = class extends Pass {
     effectShaderUniforms.projViewMat.value = this.camera.projectionMatrix.clone().multiply(this.camera.matrixWorldInverse.clone());
     effectShaderUniforms.projectionMatrixInv.value = this.camera.projectionMatrixInverse;
     effectShaderUniforms.viewMatrixInv.value = this.camera.matrixWorld;
-    effectShaderUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector313());
+    effectShaderUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector314());
     effectShaderUniforms.resolution.value = this.configuration.halfRes ? this.r.clone().multiplyScalar(1 / 2).floor() : this.r;
     effectShaderUniforms.time.value = performance.now() / 1e3;
     effectShaderUniforms.samples.value = this.samples;
@@ -5153,7 +5291,7 @@ var N8SSAOPass = class extends Pass {
       poissonBlurUniforms.viewMat.value = this.camera.matrixWorldInverse;
       poissonBlurUniforms.projectionMatrixInv.value = this.camera.projectionMatrixInverse;
       poissonBlurUniforms.viewMatrixInv.value = this.camera.matrixWorld;
-      poissonBlurUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector313());
+      poissonBlurUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector314());
       poissonBlurUniforms.resolution.value = this.configuration.halfRes ? this.r.clone().multiplyScalar(1 / 2).floor() : this.r;
       poissonBlurUniforms.time.value = performance.now() / 1e3;
       poissonBlurUniforms.blueNoise.value = this.bluenoise;
@@ -5192,7 +5330,7 @@ var N8SSAOPass = class extends Pass {
     effectCompositerUniforms.tDiffuse.value = this.writeTargetInternal.texture;
     effectCompositerUniforms.color.value = this.c.copy(this.configuration.color).convertSRGBToLinear();
     effectCompositerUniforms.colorMultiply.value = this.configuration.colorMultiply;
-    effectCompositerUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector313());
+    effectCompositerUniforms.cameraPos.value = this.camera.getWorldPosition(new Vector314());
     effectCompositerUniforms.fog.value = !!this.scene.fog;
     if (this.scene.fog) {
       if (this.scene.fog instanceof Fog && this.scene.fog.isFog === true) {
@@ -5744,31 +5882,31 @@ var TimeManager = class {
 // src/collisions/CollisionsManager.ts
 import { MMLCollisionTrigger } from "@mml-io/mml-web";
 import {
-  Box3,
+  Box3 as Box32,
   Color as Color8,
   DoubleSide,
   Euler as Euler5,
   Group as Group5,
   Line3 as Line32,
   Matrix4 as Matrix47,
-  Mesh as Mesh5,
-  MeshBasicMaterial as MeshBasicMaterial3,
+  Mesh as Mesh4,
+  MeshBasicMaterial,
   Quaternion as Quaternion7,
   Ray as Ray2,
-  Vector3 as Vector315
+  Vector3 as Vector316
 } from "three";
 import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
 import { MeshBVH, MeshBVHHelper } from "three-mesh-bvh";
 
 // src/collisions/getRelativePositionAndRotationRelativeToObject.ts
-import { Euler as Euler4, Matrix4 as Matrix46, Quaternion as Quaternion6, Vector3 as Vector314 } from "three";
+import { Euler as Euler4, Matrix4 as Matrix46, Quaternion as Quaternion6, Vector3 as Vector315 } from "three";
 var tempContainerMatrix = new Matrix46();
 var tempTargetMatrix = new Matrix46();
-var tempPositionVector = new Vector314();
+var tempPositionVector = new Vector315();
 var tempRotationEuler = new Euler4();
 var tempRotationQuaternion = new Quaternion6();
-var tempScaleVector = new Vector314();
+var tempScaleVector = new Vector315();
 function getRelativePositionAndRotationRelativeToObject(positionAndRotation, container) {
   const { x, y, z } = positionAndRotation.position;
   const { x: rx, y: ry, z: rz } = positionAndRotation.rotation;
@@ -5800,14 +5938,14 @@ function getRelativePositionAndRotationRelativeToObject(positionAndRotation, con
 var CollisionsManager = class {
   constructor(scene) {
     this.debug = false;
-    this.tempVector = new Vector315();
-    this.tempVector2 = new Vector315();
-    this.tempVector3 = new Vector315();
+    this.tempVector = new Vector316();
+    this.tempVector2 = new Vector316();
+    this.tempVector3 = new Vector316();
     this.tempQuaternion = new Quaternion7();
     this.tempRay = new Ray2();
     this.tempMatrix = new Matrix47();
     this.tempMatrix2 = new Matrix47();
-    this.tempBox = new Box3();
+    this.tempBox = new Box32();
     this.tempEuler = new Euler5();
     this.tempSegment = new Line32();
     this.tempSegment2 = new Line32();
@@ -5818,7 +5956,7 @@ var CollisionsManager = class {
   raycastFirst(ray) {
     let minimumDistance = null;
     let minimumHit = null;
-    let minimumNormal = new Vector315();
+    let minimumNormal = new Vector316();
     for (const [, collisionMeshState] of this.collisionMeshState) {
       this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(collisionMeshState.matrix).invert());
       const hit = collisionMeshState.meshBVH.raycastFirst(this.tempRay, DoubleSide);
@@ -5876,7 +6014,7 @@ var CollisionsManager = class {
     };
     if (this.debug) {
       newBufferGeometry.boundsTree = meshBVH;
-      const wireframeMesh = new Mesh5(newBufferGeometry, new MeshBasicMaterial3({ wireframe: true }));
+      const wireframeMesh = new Mesh4(newBufferGeometry, new MeshBasicMaterial({ wireframe: true }));
       const normalsHelper = new VertexNormalsHelper(wireframeMesh, 0.25, 65280);
       const visualizer = new MeshBVHHelper(wireframeMesh, 4);
       visualizer.edgeMaterial.color = new Color8("blue");
@@ -5959,7 +6097,7 @@ var CollisionsManager = class {
         const realDistance = intersectionSegment.distance();
         if (realDistance < capsuleRadius) {
           if (!collisionPosition) {
-            collisionPosition = new Vector315().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
+            collisionPosition = new Vector316().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
           }
           const ratio = realDistance / modelReferenceDistance;
           const realDepth = capsuleRadius - realDistance;
@@ -6017,10 +6155,10 @@ import {
   FrontSide as FrontSide2,
   Group as Group6,
   LinearMipMapLinearFilter,
-  Mesh as Mesh6,
+  Mesh as Mesh5,
   MeshStandardMaterial as MeshStandardMaterial3,
   NearestFilter as NearestFilter2,
-  PlaneGeometry as PlaneGeometry2,
+  PlaneGeometry,
   RepeatWrapping as RepeatWrapping2
 } from "three";
 var canvas = document.createElement("canvas");
@@ -6037,7 +6175,7 @@ var GroundPlane = class extends Group6 {
     super();
     this.floorSize = 210;
     this.floorTexture = null;
-    this.floorGeometry = new PlaneGeometry2(this.floorSize, this.floorSize, 1, 1);
+    this.floorGeometry = new PlaneGeometry(this.floorSize, this.floorSize, 1, 1);
     this.floorMesh = null;
     this.floorMaterial = new MeshStandardMaterial3({
       color: 16777215,
@@ -6045,7 +6183,7 @@ var GroundPlane = class extends Group6 {
       metalness: 0.05,
       roughness: 0.95
     });
-    this.floorMesh = new Mesh6(this.floorGeometry, this.floorMaterial);
+    this.floorMesh = new Mesh5(this.floorGeometry, this.floorMaterial);
     this.floorMesh.receiveShadow = true;
     this.floorMesh.rotation.x = Math.PI * -0.5;
     this.add(this.floorMesh);