@mml-io/3d-web-client-core 0.0.0-experimental-a000246-20230825 → 0.0.0-experimental-0b919eb-20230904

package/build/index.js

@@ -1,10 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-
 // src/camera/CameraManager.ts
 import { PerspectiveCamera, Raycaster, Vector3 as Vector32 } from "three";
 
@@ -47,28 +40,26 @@ function getTweakpaneActive() {
 var CameraManager = class {
   constructor(collisionsManager) {
     this.collisionsManager = collisionsManager;
-    __publicField(this, "camera");
-    __publicField(this, "initialDistance", 3.3);
-    __publicField(this, "minDistance", 0.1);
-    __publicField(this, "maxDistance", 8);
-    __publicField(this, "initialFOV", 60);
-    __publicField(this, "fov", this.initialFOV);
-    __publicField(this, "minFOV", 50);
-    __publicField(this, "maxFOV", 70);
-    __publicField(this, "targetFOV", this.initialFOV);
-    __publicField(this, "minPolarAngle", Math.PI * 0.25);
-    __publicField(this, "maxPolarAngle", Math.PI * 0.95);
-    __publicField(this, "dampingFactor", 0.091);
-    __publicField(this, "targetDistance", this.initialDistance);
-    __publicField(this, "distance", this.initialDistance);
-    __publicField(this, "targetPhi", Math.PI / 2);
-    __publicField(this, "phi", Math.PI / 2);
-    __publicField(this, "targetTheta", -Math.PI / 2);
-    __publicField(this, "theta", -Math.PI / 2);
-    __publicField(this, "dragging", false);
-    __publicField(this, "target", new Vector32(0, 1.55, 0));
-    __publicField(this, "hadTarget", false);
-    __publicField(this, "rayCaster");
+    this.initialDistance = 3.3;
+    this.minDistance = 0.1;
+    this.maxDistance = 8;
+    this.initialFOV = 60;
+    this.fov = this.initialFOV;
+    this.minFOV = 50;
+    this.maxFOV = 70;
+    this.targetFOV = this.initialFOV;
+    this.minPolarAngle = Math.PI * 0.25;
+    this.maxPolarAngle = Math.PI * 0.95;
+    this.dampingFactor = 0.091;
+    this.targetDistance = this.initialDistance;
+    this.distance = this.initialDistance;
+    this.targetPhi = Math.PI / 2;
+    this.phi = Math.PI / 2;
+    this.targetTheta = -Math.PI / 2;
+    this.theta = -Math.PI / 2;
+    this.dragging = false;
+    this.target = new Vector32(0, 1.55, 0);
+    this.hadTarget = false;
     this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
     this.camera.position.set(0, 1.4, -this.initialDistance);
     this.rayCaster = new Raycaster();
@@ -311,8 +302,8 @@ var characterOptions = {
 var CharacterMaterial = class extends MeshPhysicalMaterial {
   constructor() {
     super();
-    __publicField(this, "uniforms", {});
-    __publicField(this, "colorsCube216", []);
+    this.uniforms = {};
+    this.colorsCube216 = [];
     this.color = new Color(16777215);
     this.transmission = characterValues.material.transmission;
     this.metalness = characterValues.material.metalness;
@@ -485,7 +476,6 @@ import { GLTFLoader as ThreeGLTFLoader } from "three/examples/jsm/loaders/GLTFLo
 var CachedGLTFLoader = class extends ThreeGLTFLoader {
   constructor(manager) {
     super(manager);
-    __publicField(this, "blobCache");
     this.blobCache = /* @__PURE__ */ new Map();
   }
   setBlobUrl(originalUrl, blobUrl) {
@@ -506,8 +496,6 @@ var CachedGLTFLoader = class extends ThreeGLTFLoader {
 };
 var LRUCache = class {
   constructor(maxSize = 100) {
-    __publicField(this, "maxSize");
-    __publicField(this, "cache");
     this.maxSize = maxSize;
     this.cache = /* @__PURE__ */ new Map();
   }
@@ -527,12 +515,9 @@ var LRUCache = class {
     this.cache.set(key, value);
   }
 };
-var _ModelLoader = class {
+var _ModelLoader = class _ModelLoader {
   constructor(maxCacheSize = 100) {
-    __publicField(this, "loadingManager");
-    __publicField(this, "gltfLoader");
-    __publicField(this, "modelCache");
-    __publicField(this, "ongoingLoads", /* @__PURE__ */ new Map());
+    this.ongoingLoads = /* @__PURE__ */ new Map();
     this.loadingManager = new LoadingManager();
     this.gltfLoader = new CachedGLTFLoader(this.loadingManager);
     this.modelCache = new LRUCache(maxCacheSize);
@@ -594,8 +579,8 @@ var _ModelLoader = class {
     }
   }
 };
+_ModelLoader.instance = null;
 var ModelLoader = _ModelLoader;
-__publicField(ModelLoader, "instance", null);
 var MODEL_LOADER = ModelLoader.getInstance();
 var ModelLoader_default = MODEL_LOADER;
 
@@ -604,12 +589,12 @@ var CharacterModel = class {
   constructor(characterDescription) {
     this.characterDescription = characterDescription;
     /* TODO: pick between below eager instantiation or ModelLoader.getInstance() lazy one */
-    __publicField(this, "modelLoader", ModelLoader_default);
-    __publicField(this, "mesh", null);
-    __publicField(this, "material", new CharacterMaterial());
-    __publicField(this, "animations", {});
-    __publicField(this, "animationMixer", null);
-    __publicField(this, "currentAnimation", 0 /* idle */);
+    this.modelLoader = ModelLoader_default;
+    this.mesh = null;
+    this.material = new CharacterMaterial();
+    this.animations = {};
+    this.animationMixer = null;
+    this.currentAnimation = 0 /* idle */;
   }
   async init() {
     await this.loadMainMesh();
@@ -632,10 +617,11 @@ var CharacterModel = class {
     this.applyMaterialToAllSkinnedMeshes(this.material);
   }
   updateAnimation(targetAnimation, deltaTime) {
+    var _a;
     if (this.currentAnimation !== targetAnimation) {
       this.transitionToAnimation(targetAnimation);
     }
-    this.animationMixer?.update(deltaTime);
+    (_a = this.animationMixer) == null ? void 0 : _a.update(deltaTime);
   }
   hideMaterialByMeshName(meshName) {
     if (!this.mesh)
@@ -735,7 +721,7 @@ import {
 } from "three";
 
 // src/character/CanvasText.ts
-import * as THREE from "three";
+import { Texture, LinearFilter, RGBAFormat, MeshBasicMaterial } from "three";
 function getTextAlignOffset(textAlign, width) {
   switch (textAlign) {
     case "center":
@@ -836,10 +822,10 @@ function CanvasText(message, options) {
 }
 function THREECanvasTextTexture(text, options) {
   const canvas = CanvasText(text, options);
-  const texture = new THREE.Texture(canvas);
-  texture.minFilter = THREE.LinearFilter;
-  texture.magFilter = THREE.LinearFilter;
-  texture.format = THREE.RGBAFormat;
+  const texture = new Texture(canvas);
+  texture.minFilter = LinearFilter;
+  texture.magFilter = LinearFilter;
+  texture.format = RGBAFormat;
   texture.needsUpdate = true;
   return { texture, width: canvas.width, height: canvas.height };
 }
@@ -856,14 +842,11 @@ var defaultLabelHeight = 0.125;
 var defaultLabelCastShadows = true;
 var CharacterTooltip = class {
   constructor(parentModel) {
-    __publicField(this, "geometry");
-    __publicField(this, "material");
-    __publicField(this, "mesh");
-    __publicField(this, "visibleOpacity", 0.85);
-    __publicField(this, "targetOpacity", 0);
-    __publicField(this, "fadingSpeed", 0.02);
-    __publicField(this, "secondsToFadeOut", 15);
-    __publicField(this, "props", {
+    this.visibleOpacity = 0.85;
+    this.targetOpacity = 0;
+    this.fadingSpeed = 0.02;
+    this.secondsToFadeOut = 15;
+    this.props = {
       content: "",
       alignment: defaultLabelAlignment,
       width: defaultLabelWidth,
@@ -873,7 +856,7 @@ var CharacterTooltip = class {
       color: defaultLabelColor,
       fontColor: defaultFontColor,
       castShadows: defaultLabelCastShadows
-    });
+    };
     this.setText = this.setText.bind(this);
     this.material = new MeshBasicMaterial2({
       map: null,
@@ -965,7 +948,7 @@ var CharacterTooltip = class {
 };
 
 // src/character/LocalController.ts
-import { Box3, Line3, Matrix4, Quaternion, Raycaster as Raycaster2, Vector3 as Vector33 } from "three";
+import { Line3, Matrix4, Quaternion, Raycaster as Raycaster2, Vector3 as Vector33 } from "three";
 var LocalController = class {
   constructor(model, id, collisionsManager, keyInputManager, cameraManager, timeManager) {
     this.model = model;
@@ -974,45 +957,35 @@ var LocalController = class {
     this.keyInputManager = keyInputManager;
     this.cameraManager = cameraManager;
     this.timeManager = timeManager;
-    __publicField(this, "collisionDetectionSteps", 15);
-    __publicField(this, "capsuleInfo", {
+    this.collisionDetectionSteps = 15;
+    this.capsuleInfo = {
       radius: 0.4,
       segment: new Line3(new Vector33(), new Vector33(0, 1.05, 0))
-    });
-    __publicField(this, "maxWalkSpeed", 6);
-    __publicField(this, "maxRunSpeed", 8.5);
-    __publicField(this, "gravity", -42);
-    __publicField(this, "jumpForce", 16);
-    __publicField(this, "coyoteTimeThreshold", 70);
-    __publicField(this, "coyoteTime", false);
-    __publicField(this, "canJump", true);
-    __publicField(this, "characterOnGround", false);
-    __publicField(this, "characterWasOnGround", false);
-    __publicField(this, "characterAirborneSince", 0);
-    __publicField(this, "currentHeight", 0);
-    __publicField(this, "characterVelocity", new Vector33());
-    __publicField(this, "vectorUp", new Vector33(0, 1, 0));
-    __publicField(this, "vectorDown", new Vector33(0, -1, 0));
-    __publicField(this, "rotationOffset", 0);
-    __publicField(this, "azimuthalAngle", 0);
-    __publicField(this, "tempBox", new Box3());
-    __publicField(this, "tempMatrix", new Matrix4());
-    __publicField(this, "tempSegment", new Line3());
-    __publicField(this, "tempVector", new Vector33());
-    __publicField(this, "tempVector2", new Vector33());
-    __publicField(this, "rayCaster", new Raycaster2());
-    __publicField(this, "forward");
-    __publicField(this, "backward");
-    __publicField(this, "left");
-    __publicField(this, "right");
-    __publicField(this, "run");
-    __publicField(this, "jump");
-    __publicField(this, "anyDirection");
-    __publicField(this, "conflictingDirections");
-    __publicField(this, "thirdPersonCamera", null);
-    __publicField(this, "speed", 0);
-    __publicField(this, "targetSpeed", 0);
-    __publicField(this, "networkState");
+    };
+    this.maxWalkSpeed = 6;
+    this.maxRunSpeed = 8.5;
+    this.gravity = -42;
+    this.jumpForce = 16;
+    this.coyoteTimeThreshold = 70;
+    this.coyoteTime = false;
+    this.canJump = true;
+    this.characterOnGround = false;
+    this.characterWasOnGround = false;
+    this.characterAirborneSince = 0;
+    this.currentHeight = 0;
+    this.characterVelocity = new Vector33();
+    this.vectorUp = new Vector33(0, 1, 0);
+    this.vectorDown = new Vector33(0, -1, 0);
+    this.rotationOffset = 0;
+    this.azimuthalAngle = 0;
+    this.tempMatrix = new Matrix4();
+    this.tempSegment = new Line3();
+    this.tempVector = new Vector33();
+    this.tempVector2 = new Vector33();
+    this.rayCaster = new Raycaster2();
+    this.thirdPersonCamera = null;
+    this.speed = 0;
+    this.targetSpeed = 0;
     this.networkState = {
       id: this.id,
       position: { x: 0, y: 0, z: 0 },
@@ -1021,7 +994,8 @@ var LocalController = class {
     };
   }
   update() {
-    if (!this.model?.mesh || !this.model?.animationMixer)
+    var _a, _b;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh) || !((_b = this.model) == null ? void 0 : _b.animationMixer))
       return;
     if (!this.thirdPersonCamera)
       this.thirdPersonCamera = this.cameraManager.camera;
@@ -1089,7 +1063,8 @@ var LocalController = class {
     }
   }
   updateAzimuthalAngle() {
-    if (!this.thirdPersonCamera || !this.model?.mesh)
+    var _a;
+    if (!this.thirdPersonCamera || !((_a = this.model) == null ? void 0 : _a.mesh))
       return;
     const camToModelDistance = this.thirdPersonCamera.position.distanceTo(this.model.mesh.position);
     const isCameraFirstPerson = camToModelDistance < 2;
@@ -1104,12 +1079,14 @@ var LocalController = class {
     }
   }
   computeAngularDifference(rotationQuaternion) {
-    if (!this.model?.mesh)
+    var _a;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh))
       return 0;
     return 2 * Math.acos(Math.abs(this.model.mesh.quaternion.dot(rotationQuaternion)));
   }
   updateRotation() {
-    if (!this.thirdPersonCamera || !this.model?.mesh)
+    var _a;
+    if (!this.thirdPersonCamera || !((_a = this.model) == null ? void 0 : _a.mesh))
       return;
     this.updateRotationOffset();
     this.updateAzimuthalAngle();
@@ -1122,12 +1099,14 @@ var LocalController = class {
     this.model.mesh.quaternion.rotateTowards(rotationQuaternion, frameRotation);
   }
   addScaledVectorToCharacter(deltaTime) {
-    if (!this.model?.mesh)
+    var _a;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh))
       return;
     this.model.mesh.position.addScaledVector(this.tempVector, this.speed * deltaTime);
   }
   updatePosition(deltaTime, _iter) {
-    if (!this.model?.mesh)
+    var _a;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh))
       return;
     if (this.characterOnGround) {
       if (!this.jump)
@@ -1169,15 +1148,10 @@ var LocalController = class {
       this.addScaledVectorToCharacter(deltaTime);
     }
     this.model.mesh.updateMatrixWorld();
-    this.tempBox.makeEmpty();
     this.tempSegment.copy(this.capsuleInfo.segment);
     this.tempSegment.start.applyMatrix4(this.model.mesh.matrixWorld).applyMatrix4(this.tempMatrix);
     this.tempSegment.end.applyMatrix4(this.model.mesh.matrixWorld).applyMatrix4(this.tempMatrix);
-    this.tempBox.expandByPoint(this.tempSegment.start);
-    this.tempBox.expandByPoint(this.tempSegment.end);
-    this.tempBox.min.subScalar(this.capsuleInfo.radius);
-    this.tempBox.max.addScalar(this.capsuleInfo.radius);
-    this.collisionsManager.applyColliders(this.tempSegment, this.capsuleInfo.radius, this.tempBox);
+    this.collisionsManager.applyColliders(this.tempSegment, this.capsuleInfo.radius);
     const newPosition = this.tempVector;
     newPosition.copy(this.tempSegment.start);
     const deltaVector = this.tempVector2;
@@ -1199,7 +1173,8 @@ var LocalController = class {
     }
   }
   updateNetworkState() {
-    if (!this.model?.mesh) {
+    var _a;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh)) {
       this.networkState = {
         id: this.id,
         position: new Vector33(),
@@ -1222,7 +1197,8 @@ var LocalController = class {
     }
   }
   resetPosition() {
-    if (!this.model?.mesh)
+    var _a;
+    if (!((_a = this.model) == null ? void 0 : _a.mesh))
       return;
     this.characterVelocity.y = 0;
     this.model.mesh.position.y = 3;
@@ -1241,12 +1217,12 @@ var Character = class {
     this.keyInputManager = keyInputManager;
     this.cameraManager = cameraManager;
     this.timeManager = timeManager;
-    __publicField(this, "controller", null);
-    __publicField(this, "name", null);
-    __publicField(this, "model", null);
-    __publicField(this, "color", new Color3());
-    __publicField(this, "position", new Vector34());
-    __publicField(this, "tooltip", null);
+    this.controller = null;
+    this.name = null;
+    this.model = null;
+    this.color = new Color3();
+    this.position = new Vector34();
+    this.tooltip = null;
     this.load();
   }
   async load() {
@@ -1297,12 +1273,11 @@ var RemoteController = class {
   constructor(character, id) {
     this.character = character;
     this.id = id;
-    __publicField(this, "modelLoader", ModelLoader_default);
-    __publicField(this, "characterModel", null);
-    __publicField(this, "animationMixer", new AnimationMixer2(new Object3D4()));
-    __publicField(this, "animations", /* @__PURE__ */ new Map());
-    __publicField(this, "currentAnimation", 0 /* idle */);
-    __publicField(this, "networkState");
+    this.modelLoader = ModelLoader_default;
+    this.characterModel = null;
+    this.animationMixer = new AnimationMixer2(new Object3D4());
+    this.animations = /* @__PURE__ */ new Map();
+    this.currentAnimation = 0 /* idle */;
     this.characterModel = this.character.model.mesh;
     this.characterModel.updateMatrixWorld();
     this.animationMixer = new AnimationMixer2(this.characterModel);
@@ -1386,15 +1361,14 @@ var CharacterManager = class {
       character was standing on a model and the page is reloaded the character falls into the model before it loads and 
       can be trapped).
     */
-    __publicField(this, "updateLocationHash", false);
-    __publicField(this, "loadingCharacters", /* @__PURE__ */ new Map());
-    __publicField(this, "remoteCharacters", /* @__PURE__ */ new Map());
-    __publicField(this, "remoteCharacterControllers", /* @__PURE__ */ new Map());
-    __publicField(this, "characterDescription", null);
-    __publicField(this, "character", null);
-    __publicField(this, "cameraOffsetTarget", 0);
-    __publicField(this, "cameraOffset", 0);
-    __publicField(this, "group");
+    this.updateLocationHash = false;
+    this.loadingCharacters = /* @__PURE__ */ new Map();
+    this.remoteCharacters = /* @__PURE__ */ new Map();
+    this.remoteCharacterControllers = /* @__PURE__ */ new Map();
+    this.characterDescription = null;
+    this.character = null;
+    this.cameraOffsetTarget = 0;
+    this.cameraOffset = 0;
     this.group = new Group();
   }
   /* TODO: 
@@ -1411,6 +1385,7 @@ var CharacterManager = class {
         id,
         isLocal,
         () => {
+          var _a, _b, _c, _d, _e, _f, _g;
           if (window.location.hash && window.location.hash.length > 1) {
             decodeCharacterAndCamera(
               window.location.hash.substring(1),
@@ -1434,14 +1409,14 @@ var CharacterManager = class {
           }
           character.model.hideMaterialByMeshName("SK_Mannequin_2");
           if (!isLocal) {
-            character.model?.mesh?.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
-            character.model?.mesh?.updateMatrixWorld();
+            (_b = (_a = character.model) == null ? void 0 : _a.mesh) == null ? void 0 : _b.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
+            (_d = (_c = character.model) == null ? void 0 : _c.mesh) == null ? void 0 : _d.updateMatrixWorld();
             character.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
           }
           this.group.add(character.model.mesh);
           if (isLocal) {
             this.character = character;
-            this.character.tooltip?.setText(`${id}`);
+            (_e = this.character.tooltip) == null ? void 0 : _e.setText(`${id}`);
           } else {
             this.remoteCharacters.set(id, character);
             const remoteController = new RemoteController(character, id);
@@ -1461,13 +1436,13 @@ var CharacterManager = class {
               4 /* air */,
               characterDescription.airAnimationFileUrl
             );
-            remoteController.characterModel?.position.set(
+            (_f = remoteController.characterModel) == null ? void 0 : _f.position.set(
               spawnPosition.x,
               spawnPosition.y,
               spawnPosition.z
             );
             this.remoteCharacterControllers.set(id, remoteController);
-            character.tooltip?.setText(`${id}`);
+            (_g = character.tooltip) == null ? void 0 : _g.setText(`${id}`);
           }
           resolve(character);
         },
@@ -1505,9 +1480,10 @@ var CharacterManager = class {
     this.loadingCharacters.clear();
   }
   update() {
+    var _a;
     if (this.character) {
       this.character.update(this.timeManager.time);
-      if (this.character.model?.mesh) {
+      if ((_a = this.character.model) == null ? void 0 : _a.mesh) {
         this.cameraOffsetTarget = this.cameraManager.targetDistance <= 0.4 ? 0.6 : 0;
         this.cameraOffset += ease(this.cameraOffsetTarget, this.cameraOffset, 0.1);
         const targetOffset = new Vector36(0, 1.3, this.cameraOffset);
@@ -1557,7 +1533,7 @@ var CharacterManager = class {
 // src/input/KeyInputManager.ts
 var KeyInputManager = class {
   constructor() {
-    __publicField(this, "keys", /* @__PURE__ */ new Map());
+    this.keys = /* @__PURE__ */ new Map();
     document.addEventListener("keydown", this.onKeyDown.bind(this));
     document.addEventListener("keyup", this.onKeyUp.bind(this));
     window.addEventListener("blur", this.handleUnfocus.bind(this));
@@ -1625,12 +1601,7 @@ var MMLCompositionScene = class {
     this.audioListener = audioListener;
     this.collisionsManager = collisionsManager;
     this.getUserPositionAndRotation = getUserPositionAndRotation;
-    __publicField(this, "group");
-    __publicField(this, "debug", false);
-    __publicField(this, "mmlScene");
-    __publicField(this, "promptManager");
-    __publicField(this, "interactionListener");
-    __publicField(this, "clickTrigger");
+    this.debug = false;
     this.group = new Group2();
     this.promptManager = PromptManager.init(document.body);
     const { interactionListener } = InteractionManager.init(document.body, this.camera, this.scene);
@@ -1733,18 +1704,16 @@ var sunOptions = {
 var Sun = class extends Group3 {
   constructor() {
     super();
-    __publicField(this, "debug", false);
-    __publicField(this, "sunOffset", new Vector37(
+    this.debug = false;
+    this.sunOffset = new Vector37(
       39 * (Math.PI / 180),
       50 * (Math.PI / 180),
       100
-    ));
-    __publicField(this, "shadowResolution", 8192);
-    __publicField(this, "shadowCamFrustum", 50);
-    __publicField(this, "camHelper", null);
-    __publicField(this, "shadowCamera");
-    __publicField(this, "directionalLight");
-    __publicField(this, "target", null);
+    );
+    this.shadowResolution = 8192;
+    this.shadowCamFrustum = 50;
+    this.camHelper = null;
+    this.target = null;
     this.shadowCamera = new OrthographicCamera(
       -this.shadowCamFrustum,
       this.shadowCamFrustum,
@@ -1989,10 +1958,7 @@ import { Color as Color5 } from "three";
 import { Pane } from "tweakpane";
 var TweakPane = class {
   constructor(renderer, scene, composer) {
-    __publicField(this, "renderer");
-    __publicField(this, "scene");
-    __publicField(this, "composer");
-    __publicField(this, "guiStyle", `
+    this.guiStyle = `
 :root {
   --tp-base-background-color: hsla(0, 0%, 10%, 0.8);
   --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
@@ -2033,22 +1999,10 @@ var TweakPane = class {
   padding-left: 0px !important;
   padding-right: 0px !important;
 }
-`);
-    __publicField(this, "gui", new Pane());
-    __publicField(this, "render");
-    __publicField(this, "stats");
-    __publicField(this, "renderOptions");
-    __publicField(this, "ssao");
-    __publicField(this, "toneMapping");
-    __publicField(this, "post");
-    __publicField(this, "export");
-    __publicField(this, "characterMaterial");
-    __publicField(this, "environment");
-    __publicField(this, "sun");
-    __publicField(this, "sunButton");
-    __publicField(this, "ambient");
-    __publicField(this, "saveVisibilityInLocalStorage", true);
-    __publicField(this, "guiVisible", false);
+`;
+    this.gui = new Pane();
+    this.saveVisibilityInLocalStorage = true;
+    this.guiVisible = false;
     if (this.saveVisibilityInLocalStorage) {
       const localStorageGuiVisible = localStorage.getItem("guiVisible");
       if (localStorageGuiVisible !== null) {
@@ -2422,13 +2376,13 @@ var TweakPane = class {
         const target = e.presetKey;
         switch (target) {
           case "sunAzimuthalAngle":
-            sun?.setAzimuthalAngle(e.value * (Math.PI / 180));
+            sun == null ? void 0 : sun.setAzimuthalAngle(e.value * (Math.PI / 180));
             break;
           case "sunPolarAngle":
-            sun?.setPolarAngle(e.value * (Math.PI / 180));
+            sun == null ? void 0 : sun.setPolarAngle(e.value * (Math.PI / 180));
             break;
           case "sunIntensity":
-            sun?.setIntensity(e.value);
+            sun == null ? void 0 : sun.setIntensity(e.value);
             break;
           case "sunColor":
             sunValues.sunColor = {
@@ -2436,7 +2390,7 @@ var TweakPane = class {
               g: e.value.g,
               b: e.value.b
             };
-            sun?.setColor();
+            sun == null ? void 0 : sun.setColor();
             break;
           default:
             break;
@@ -2527,12 +2481,14 @@ var TweakPane = class {
     input.type = "file";
     input.accept = ".json";
     input.addEventListener("change", (event) => {
-      const file = event.target.files?.[0];
+      var _a;
+      const file = (_a = event.target.files) == null ? void 0 : _a[0];
       if (file) {
         const reader = new FileReader();
         reader.onload = (loadEvent) => {
+          var _a2;
           try {
-            const settings = JSON.parse(loadEvent.target?.result);
+            const settings = JSON.parse((_a2 = loadEvent.target) == null ? void 0 : _a2.result);
             callback(settings);
           } catch (err) {
             console.error("Error parsing JSON:", err);
@@ -2714,35 +2670,14 @@ var GaussGrainEffect = new ShaderMaterial2({
 // src/rendering/composer.ts
 var Composer = class {
   constructor(scene, camera, spawnSun = false) {
-    __publicField(this, "width", window.innerWidth);
-    __publicField(this, "height", window.innerHeight);
-    __publicField(this, "resolution", new Vector22(this.width, this.height));
-    __publicField(this, "isEnvHDRI", false);
-    __publicField(this, "scene");
-    __publicField(this, "camera");
-    __publicField(this, "renderer");
-    __publicField(this, "composer");
-    __publicField(this, "renderPass");
-    __publicField(this, "fxaaEffect");
-    __publicField(this, "fxaaPass");
-    __publicField(this, "bloomEffect");
-    __publicField(this, "bloomPass");
-    __publicField(this, "toneMappingEffect");
-    __publicField(this, "smaaEffect");
-    __publicField(this, "normalPass");
-    __publicField(this, "normalTextureEffect");
-    __publicField(this, "ssaoEffect");
-    __publicField(this, "ssaoPass");
-    __publicField(this, "toneMappingPass");
-    __publicField(this, "smaaPass");
-    __publicField(this, "bcs", BrightnessContrastSaturation);
-    __publicField(this, "bcsPass");
-    __publicField(this, "gaussGrainEffect", GaussGrainEffect);
-    __publicField(this, "gaussGrainPass");
-    __publicField(this, "ambientLight", null);
-    __publicField(this, "sun", null);
-    __publicField(this, "spawnSun");
-    __publicField(this, "tweakPane");
+    this.width = window.innerWidth;
+    this.height = window.innerHeight;
+    this.resolution = new Vector22(this.width, this.height);
+    this.isEnvHDRI = false;
+    this.bcs = BrightnessContrastSaturation;
+    this.gaussGrainEffect = GaussGrainEffect;
+    this.ambientLight = null;
+    this.sun = null;
     this.scene = scene;
     this.camera = camera;
     this.spawnSun = spawnSun;
@@ -2909,7 +2844,8 @@ var Composer = class {
     fileInput.type = "file";
     fileInput.accept = ".hdr";
     fileInput.addEventListener("change", () => {
-      const file = fileInput.files?.[0];
+      var _a;
+      const file = (_a = fileInput.files) == null ? void 0 : _a[0];
       if (!file) {
         console.log("no file");
         return;
@@ -2954,21 +2890,21 @@ var Composer = class {
 import { Clock } from "three";
 var TimeManager = class {
   constructor() {
-    __publicField(this, "clock", new Clock());
-    __publicField(this, "roundMagnitude", 2e5);
-    __publicField(this, "maxAverageFrames", 150);
-    __publicField(this, "deltaTimes", []);
-    __publicField(this, "targetAverageDeltaTime", 0);
-    __publicField(this, "lerpedAverageMagDelta", 0);
-    __publicField(this, "fpsUpdateTime", 0);
-    __publicField(this, "framesSinceLastFPSUpdate", 0);
-    __publicField(this, "time", 0);
-    __publicField(this, "deltaTime", 0);
-    __publicField(this, "rawDeltaTime", 0);
-    __publicField(this, "smoothDeltaTime", 0);
-    __publicField(this, "frame", 0);
-    __publicField(this, "fps", 0);
-    __publicField(this, "averageFPS", 0);
+    this.clock = new Clock();
+    this.roundMagnitude = 2e5;
+    this.maxAverageFrames = 150;
+    this.deltaTimes = [];
+    this.targetAverageDeltaTime = 0;
+    this.lerpedAverageMagDelta = 0;
+    this.fpsUpdateTime = 0;
+    this.framesSinceLastFPSUpdate = 0;
+    this.time = 0;
+    this.deltaTime = 0;
+    this.rawDeltaTime = 0;
+    this.smoothDeltaTime = 0;
+    this.frame = 0;
+    this.fps = 0;
+    this.averageFPS = 0;
   }
   update() {
     this.rawDeltaTime = this.clock.getDelta();
@@ -2998,52 +2934,72 @@ var TimeManager = class {
 
 // src/collisions/CollisionsManager.ts
 import {
-  MMLCollisionTrigger,
-  getRelativePositionAndRotationRelativeToObject
+  getRelativePositionAndRotationRelativeToObject,
+  MMLCollisionTrigger
 } from "mml-web";
 import {
+  Box3 as Box32,
   Color as Color7,
   DoubleSide,
   Euler,
-  FrontSide as FrontSide2,
+  Group as Group4,
+  Line3 as Line32,
+  Matrix4 as Matrix42,
   Mesh as Mesh3,
-  MeshStandardMaterial as MeshStandardMaterial2,
+  MeshBasicMaterial as MeshBasicMaterial3,
+  Ray,
   Vector3 as Vector38
 } from "three";
+import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
 import { MeshBVH, MeshBVHVisualizer } from "three-mesh-bvh";
 var CollisionsManager = class {
   constructor(scene) {
-    __publicField(this, "debug", false);
-    __publicField(this, "scene");
-    __publicField(this, "tempVector", new Vector38());
-    __publicField(this, "tempVector2", new Vector38());
-    __publicField(this, "collisionMeshState", /* @__PURE__ */ new Map());
-    __publicField(this, "collisionTrigger");
+    this.debug = false;
+    this.tempVector = new Vector38();
+    this.tempVector2 = new Vector38();
+    this.tempRay = new Ray();
+    this.tempMatrix = new Matrix42();
+    this.tempMatrix2 = new Matrix42();
+    this.tempBox = new Box32();
+    this.tempEuler = new Euler();
+    this.tempSegment = new Line32();
+    this.tempSegment2 = new Line32();
+    this.collisionMeshState = /* @__PURE__ */ new Map();
     this.scene = scene;
     this.collisionTrigger = MMLCollisionTrigger.init();
   }
   raycastFirstDistance(ray) {
     let minimumDistance = null;
     for (const [, value] of this.collisionMeshState) {
-      const hit = value.meshBVH.raycastFirst(ray, DoubleSide);
+      this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(value.matrix).invert());
+      const hit = value.meshBVH.raycastFirst(this.tempRay, DoubleSide);
       if (hit) {
-        if (minimumDistance === null || hit.distance < minimumDistance) {
-          minimumDistance = hit.distance;
+        this.tempSegment.start.copy(this.tempRay.origin);
+        this.tempSegment.end.copy(hit.point);
+        this.tempSegment.applyMatrix4(value.matrix);
+        const dist = this.tempSegment.distance();
+        if (minimumDistance === null || dist < minimumDistance) {
+          minimumDistance = dist;
         }
       }
     }
     return minimumDistance;
   }
-  createCollisionMeshState(group) {
+  createCollisionMeshState(group, trackCollisions) {
     const geometries = [];
+    group.updateWorldMatrix(true, false);
+    const invertedRootMatrix = this.tempMatrix.copy(group.matrixWorld).invert();
     group.traverse((child) => {
       if (child.type === "Mesh") {
         const mesh = child;
-        mesh.localToWorld(new Vector38());
-        mesh.updateMatrixWorld();
         const clonedGeometry = mesh.geometry.clone();
-        clonedGeometry.applyMatrix4(mesh.matrixWorld);
+        if (child !== group) {
+          mesh.updateWorldMatrix(true, false);
+          clonedGeometry.applyMatrix4(
+            this.tempMatrix2.multiplyMatrices(invertedRootMatrix, mesh.matrixWorld)
+          );
+        }
         for (const key in clonedGeometry.attributes) {
           if (key !== "position") {
             clonedGeometry.deleteAttribute(key);
@@ -3056,85 +3012,125 @@ var CollisionsManager = class {
         }
       }
     });
-    const newBufferGeometry = BufferGeometryUtils.mergeGeometries(geometries);
+    const newBufferGeometry = BufferGeometryUtils.mergeGeometries(geometries, false);
+    newBufferGeometry.computeVertexNormals();
     const meshBVH = new MeshBVH(newBufferGeometry);
-    if (!this.debug) {
-      return { source: group, visualizer: null, meshBVH };
-    }
-    const mergedMesh = new Mesh3(
-      newBufferGeometry,
-      new MeshStandardMaterial2({ color: 16711680, side: FrontSide2, wireframe: true })
-    );
-    mergedMesh.geometry.boundsTree = meshBVH;
-    const visualizer = new MeshBVHVisualizer(mergedMesh, 3);
-    visualizer.edgeMaterial.color = new Color7(255);
-    visualizer.update();
-    return { source: group, visualizer, meshBVH };
+    const meshState = {
+      source: group,
+      meshBVH,
+      matrix: group.matrixWorld.clone(),
+      trackCollisions
+    };
+    if (this.debug) {
+      newBufferGeometry.boundsTree = meshBVH;
+      const wireframeMesh = new Mesh3(newBufferGeometry, new MeshBasicMaterial3({ wireframe: true }));
+      const normalsHelper = new VertexNormalsHelper(wireframeMesh, 0.25, 65280);
+      const visualizer = new MeshBVHVisualizer(wireframeMesh, 4);
+      visualizer.edgeMaterial.color = new Color7("blue");
+      const debugGroup = new Group4();
+      debugGroup.add(wireframeMesh, normalsHelper, visualizer);
+      group.matrixWorld.decompose(debugGroup.position, debugGroup.quaternion, debugGroup.scale);
+      visualizer.update();
+      meshState.debugGroup = debugGroup;
+    }
+    return meshState;
   }
   addMeshesGroup(group, mElement) {
     if (mElement) {
       this.collisionTrigger.addCollider(group, mElement);
     }
-    const meshState = this.createCollisionMeshState(group);
-    if (meshState.visualizer) {
-      this.scene.add(meshState.visualizer);
+    const meshState = this.createCollisionMeshState(group, mElement !== void 0);
+    if (meshState.debugGroup) {
+      this.scene.add(meshState.debugGroup);
     }
     this.collisionMeshState.set(group, meshState);
   }
   updateMeshesGroup(group) {
     const meshState = this.collisionMeshState.get(group);
     if (meshState) {
-      const newMeshState = this.createCollisionMeshState(group);
-      if (meshState.visualizer) {
-        this.scene.remove(meshState.visualizer);
-      }
-      if (newMeshState.visualizer) {
-        this.scene.add(newMeshState.visualizer);
+      group.updateWorldMatrix(true, false);
+      meshState.matrix.copy(group.matrixWorld);
+      if (meshState.debugGroup) {
+        group.matrixWorld.decompose(
+          meshState.debugGroup.position,
+          meshState.debugGroup.quaternion,
+          meshState.debugGroup.scale
+        );
       }
-      this.collisionMeshState.set(group, newMeshState);
     }
   }
   removeMeshesGroup(group) {
     this.collisionTrigger.removeCollider(group);
     const meshState = this.collisionMeshState.get(group);
     if (meshState) {
-      if (meshState.visualizer) {
-        this.scene.remove(meshState.visualizer);
+      if (meshState.debugGroup) {
+        this.scene.remove(meshState.debugGroup);
       }
       this.collisionMeshState.delete(group);
     }
   }
-  applyCollider(tempSegment, radius, boundingBox, meshState) {
+  applyCollider(worldBasedCapsuleSegment, capsuleRadius, meshState) {
+    const meshMatrix = this.tempMatrix.copy(meshState.matrix).invert();
+    const meshRelativeCapsuleBoundingBox = this.tempBox;
+    meshRelativeCapsuleBoundingBox.makeEmpty();
+    meshRelativeCapsuleBoundingBox.expandByPoint(worldBasedCapsuleSegment.start);
+    meshRelativeCapsuleBoundingBox.expandByPoint(worldBasedCapsuleSegment.end);
+    meshRelativeCapsuleBoundingBox.min.subScalar(capsuleRadius);
+    meshRelativeCapsuleBoundingBox.max.addScalar(capsuleRadius);
+    meshRelativeCapsuleBoundingBox.applyMatrix4(meshMatrix);
+    const meshRelativeCapsuleSegment = this.tempSegment;
+    meshRelativeCapsuleSegment.start.copy(worldBasedCapsuleSegment.start);
+    meshRelativeCapsuleSegment.end.copy(worldBasedCapsuleSegment.end);
+    meshRelativeCapsuleSegment.applyMatrix4(meshMatrix);
     let collisionPosition = null;
     meshState.meshBVH.shapecast({
-      intersectsBounds: (box) => box.intersectsBox(boundingBox),
-      intersectsTriangle: (tri) => {
-        const triPoint = this.tempVector;
-        const capsulePoint = this.tempVector2;
-        const distance = tri.closestPointToSegment(tempSegment, triPoint, capsulePoint);
-        if (distance < radius) {
-          const depth = radius - distance;
-          collisionPosition = new Vector38().copy(capsulePoint);
-          const direction = capsulePoint.sub(triPoint).normalize();
-          tempSegment.start.addScaledVector(direction, depth);
-          tempSegment.end.addScaledVector(direction, depth);
+      intersectsBounds: (meshBox) => {
+        return meshBox.intersectsBox(meshRelativeCapsuleBoundingBox);
+      },
+      intersectsTriangle: (meshTriangle) => {
+        const closestPointOnTriangle = this.tempVector;
+        const closestPointOnSegment = this.tempVector2;
+        meshTriangle.closestPointToSegment(
+          meshRelativeCapsuleSegment,
+          closestPointOnTriangle,
+          closestPointOnSegment
+        );
+        const intersectionSegment = this.tempSegment2;
+        intersectionSegment.start.copy(closestPointOnTriangle);
+        intersectionSegment.end.copy(closestPointOnSegment);
+        const modelReferenceDistance = intersectionSegment.distance();
+        intersectionSegment.applyMatrix4(meshState.matrix);
+        const realDistance = intersectionSegment.distance();
+        if (realDistance < capsuleRadius) {
+          if (!collisionPosition) {
+            collisionPosition = new Vector38().copy(closestPointOnSegment);
+          }
+          const ratio = realDistance / modelReferenceDistance;
+          const realDepth = capsuleRadius - realDistance;
+          const modelDepth = realDepth / ratio;
+          const direction = closestPointOnSegment.sub(closestPointOnTriangle).normalize();
+          meshRelativeCapsuleSegment.start.addScaledVector(direction, modelDepth);
+          meshRelativeCapsuleSegment.end.addScaledVector(direction, modelDepth);
         }
       }
     });
+    worldBasedCapsuleSegment.start.copy(meshRelativeCapsuleSegment.start);
+    worldBasedCapsuleSegment.end.copy(meshRelativeCapsuleSegment.end);
+    worldBasedCapsuleSegment.applyMatrix4(meshState.matrix);
     return collisionPosition;
   }
-  applyColliders(tempSegment, radius, boundingBox) {
+  applyColliders(tempSegment, radius) {
     let collidedElements = null;
     for (const meshState of this.collisionMeshState.values()) {
-      const collisionPosition = this.applyCollider(tempSegment, radius, boundingBox, meshState);
-      if (collisionPosition) {
+      const collisionPosition = this.applyCollider(tempSegment, radius, meshState);
+      if (collisionPosition && meshState.trackCollisions) {
         if (collidedElements === null) {
           collidedElements = /* @__PURE__ */ new Map();
         }
         const relativePosition = getRelativePositionAndRotationRelativeToObject(
           {
             position: collisionPosition,
-            rotation: new Euler()
+            rotation: this.tempEuler.set(0, 0, 0)
           },
           meshState.source
         );