@mml-io/3d-web-client-core 0.21.6 → 0.22.0

package/build/camera/CameraManager.d.ts

@@ -59,6 +59,7 @@ export declare class CameraManager {
     private easeOutExpo;
     updateAspect(aspect: number): void;
     recomputeFoV(immediately?: boolean): void;
+    isFlyCameraOn(): boolean;
     toggleFlyCamera(): void;
     get activeCamera(): PerspectiveCamera;
     update(): void;

package/build/character/CharacterManager.d.ts

@@ -12,6 +12,38 @@ import { CharacterModelLoader } from "./CharacterModelLoader";
 import { CharacterState } from "./CharacterState";
 import { LocalController } from "./LocalController";
 import { RemoteController } from "./RemoteController";
+type SpawnPosition = {
+    x: number;
+    y: number;
+    z: number;
+};
+type SpawnPositionVariance = {
+    x: number;
+    y: number;
+    z: number;
+};
+type RespawnTrigger = {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+    minZ: number;
+    maxZ: number;
+};
+export type SpawnConfiguration = {
+    spawnPosition?: Partial<SpawnPosition>;
+    spawnPositionVariance?: Partial<SpawnPositionVariance>;
+    spawnYRotation?: number;
+    respawnTrigger?: Partial<RespawnTrigger>;
+    enableRespawnButton?: boolean;
+};
+export type SpawnConfigurationState = {
+    spawnPosition: SpawnPosition;
+    spawnPositionVariance: SpawnPositionVariance;
+    spawnYRotation: number;
+    respawnTrigger: RespawnTrigger;
+    enableRespawnButton: boolean;
+};
 export type CharacterManagerConfig = {
     composer: Composer;
     characterModelLoader: CharacterModelLoader;
@@ -23,6 +55,7 @@ export type CharacterManagerConfig = {
     remoteUserStates: Map<number, CharacterState>;
     sendUpdate: (update: CharacterState) => void;
     animationConfig: AnimationConfig;
+    spawnConfiguration: SpawnConfigurationState;
     characterResolve: (clientId: number) => {
         username: string;
         characterDescription: CharacterDescription;
@@ -43,6 +76,7 @@ export declare class CharacterManager {
     private lastUpdateSentTime;
     constructor(config: CharacterManagerConfig);
     spawnLocalCharacter(id: number, username: string, characterDescription: CharacterDescription, spawnPosition?: Vector3, spawnRotation?: Euler): void;
+    createRespawnButton(): HTMLDivElement;
     setupTweakPane(tweakPane: TweakPane): void;
     spawnRemoteCharacter(id: number, username: string, characterDescription: CharacterDescription, spawnPosition?: Vector3, spawnRotation?: Euler): void;
     getLocalCharacterPositionAndRotation(): PositionAndRotation;
@@ -53,3 +87,4 @@ export declare class CharacterManager {
     respawnIfPresent(id: number): void;
     update(): void;
 }
+export {};

package/build/character/LocalController.d.ts

@@ -5,6 +5,7 @@ import { KeyInputManager } from "../input/KeyInputManager";
 import { VirtualJoystick } from "../input/VirtualJoystick";
 import { TimeManager } from "../time/TimeManager";
 import { Character } from "./Character";
+import { SpawnConfigurationState } from "./CharacterManager";
 import { CharacterState } from "./CharacterState";
 export type LocalControllerConfig = {
     id: number;
@@ -14,6 +15,7 @@ export type LocalControllerConfig = {
     virtualJoystick?: VirtualJoystick;
     cameraManager: CameraManager;
     timeManager: TimeManager;
+    spawnConfiguration: SpawnConfigurationState;
 };
 export declare class LocalController {
     private config;
@@ -70,7 +72,14 @@ export declare class LocalController {
     jumpReleased: boolean;
     networkState: CharacterState;
     private controlState;
+    private minimumX;
+    private maximumX;
+    private minimumY;
+    private maximumY;
+    private minimumZ;
+    private maximumZ;
     constructor(config: LocalControllerConfig);
+    updateSpawnConfig(spawnConfig: SpawnConfigurationState): void;
     update(): void;
     private getTargetAnimation;
     private updateRotationOffset;
@@ -85,5 +94,5 @@ export declare class LocalController {
         position: Vector3;
     } | null;
     private updateNetworkState;
-    private resetPosition;
+    resetPosition(): void;
 }

package/build/index.d.ts

@@ -1,6 +1,6 @@
 export { CameraManager } from "./camera/CameraManager";
 export { CharacterDescription, AnimationConfig } from "./character/Character";
-export { CharacterManager } from "./character/CharacterManager";
+export { CharacterManager, SpawnConfiguration, SpawnConfigurationState, } from "./character/CharacterManager";
 export * from "./character/url-position";
 export * from "./helpers/math-helpers";
 export { CharacterModelLoader } from "./character/CharacterModelLoader";

package/build/index.js

@@ -431,6 +431,9 @@ var CameraManager = class {
       this.fov = this.targetFOV;
     }
   }
+  isFlyCameraOn() {
+    return this.isMainCameraActive === false && this.orbitControls.enabled === true;
+  }
   toggleFlyCamera() {
     this.isMainCameraActive = !this.isMainCameraActive;
     this.orbitControls.enabled = !this.isMainCameraActive;
@@ -1530,6 +1533,7 @@ var Character = class extends Group {
 };
 
 // src/character/CharacterManager.ts
+import { radToDeg } from "@mml-io/mml-web";
 import { Euler as Euler2, Group as Group2, Quaternion as Quaternion5, Vector3 as Vector39 } from "three";
 
 // src/character/LocalController.ts
@@ -1778,6 +1782,45 @@ var LocalController = class {
       rotation: { quaternionY: 0, quaternionW: 1 },
       state: 0 /* idle */
     };
+    this.minimumX = this.config.spawnConfiguration.respawnTrigger.minX;
+    this.maximumX = this.config.spawnConfiguration.respawnTrigger.maxX;
+    this.minimumY = this.config.spawnConfiguration.respawnTrigger.minY;
+    this.maximumY = this.config.spawnConfiguration.respawnTrigger.maxY;
+    this.minimumZ = this.config.spawnConfiguration.respawnTrigger.minZ;
+    this.maximumZ = this.config.spawnConfiguration.respawnTrigger.maxZ;
+    const maxAbsSpawnX = Math.abs(this.config.spawnConfiguration.spawnPosition.x) + Math.abs(this.config.spawnConfiguration.spawnPositionVariance.x);
+    const maxAbsSpawnY = Math.abs(this.config.spawnConfiguration.spawnPosition.y) + Math.abs(this.config.spawnConfiguration.spawnPositionVariance.y);
+    const maxAbsSpawnZ = Math.abs(this.config.spawnConfiguration.spawnPosition.z) + Math.abs(this.config.spawnConfiguration.spawnPositionVariance.z);
+    if (Math.abs(this.minimumX) < maxAbsSpawnX || Math.abs(this.maximumX) < maxAbsSpawnX) {
+      this.minimumX = -maxAbsSpawnX - 1;
+      this.maximumX = maxAbsSpawnX + 1;
+      console.warn(
+        "The respawnTrigger X values are out of the bounds of the spawnPosition + spawnPositionVariance. Please check your respawnTrigger config."
+      );
+    }
+    if (Math.abs(this.minimumY) < maxAbsSpawnY || Math.abs(this.maximumY) < maxAbsSpawnY) {
+      this.minimumY = -maxAbsSpawnY - 1;
+      this.maximumY = maxAbsSpawnY + 1;
+      console.warn(
+        "The respawnTrigger Y values are out of the bounds of the spawnPosition + spawnPositionVariance. Please check your respawnTrigger config."
+      );
+    }
+    if (Math.abs(this.minimumZ) < maxAbsSpawnZ) {
+      this.minimumZ = -maxAbsSpawnZ - 1;
+      this.maximumZ = maxAbsSpawnZ + 1;
+      console.warn(
+        "The respawnTrigger Z values are out of the bounds of the spawnPosition + spawnPositionVariance. Please check your respawnTrigger config."
+      );
+    }
+  }
+  updateSpawnConfig(spawnConfig) {
+    this.config.spawnConfiguration = spawnConfig;
+    this.minimumX = spawnConfig.respawnTrigger.minX;
+    this.maximumX = spawnConfig.respawnTrigger.maxX;
+    this.minimumY = spawnConfig.respawnTrigger.minY;
+    this.maximumY = spawnConfig.respawnTrigger.maxY;
+    this.minimumZ = spawnConfig.respawnTrigger.minZ;
+    this.maximumZ = spawnConfig.respawnTrigger.maxZ;
   }
   update() {
     var _a, _b;
@@ -1804,7 +1847,13 @@ var LocalController = class {
         i
       );
     }
-    if (this.config.character.position.y < -100) {
+    const outOfBounds = this.config.character.position.x < this.minimumX || // left
+    this.config.character.position.x > this.maximumX || // right
+    this.config.character.position.z < this.minimumZ || // back
+    this.config.character.position.z > this.maximumZ || // front
+    this.config.character.position.y < this.minimumY || // down
+    this.config.character.position.y > this.maximumY;
+    if (outOfBounds) {
       this.resetPosition();
     }
     this.updateNetworkState();
@@ -2063,8 +2112,34 @@ var LocalController = class {
     };
   }
   resetPosition() {
+    const randomWithVariance = (value, variance) => {
+      const min = value - variance;
+      const max = value + variance;
+      return Math.random() * (max - min) + min;
+    };
+    this.characterVelocity.x = 0;
     this.characterVelocity.y = 0;
-    this.config.character.position.y = 3;
+    this.characterVelocity.z = 0;
+    this.config.character.position.set(
+      randomWithVariance(
+        this.config.spawnConfiguration.spawnPosition.x,
+        this.config.spawnConfiguration.spawnPositionVariance.x
+      ),
+      randomWithVariance(
+        this.config.spawnConfiguration.spawnPosition.y,
+        this.config.spawnConfiguration.spawnPositionVariance.y
+      ),
+      randomWithVariance(
+        this.config.spawnConfiguration.spawnPosition.z,
+        this.config.spawnConfiguration.spawnPositionVariance.z
+      )
+    );
+    const respawnRotation = new Euler(
+      0,
+      -this.config.spawnConfiguration.spawnYRotation * (Math.PI / 180),
+      0
+    );
+    this.config.character.rotation.set(respawnRotation.x, respawnRotation.y, respawnRotation.z);
     this.characterOnGround = false;
     this.doubleJumpUsed = false;
     this.jumpReleased = true;
@@ -2102,8 +2177,13 @@ var RemoteController = class {
   }
   updateFromNetwork(clientUpdate) {
     const { position, rotation, state } = clientUpdate;
-    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);
+    const distanceSquared = this.config.character.position.distanceToSquared(position);
+    if (distanceSquared > 5 * 5) {
+      this.config.character.position.copy(position);
+    } else {
+      this.config.character.position.lerp(new Vector37(position.x, position.y, position.z), 0.15);
+    }
+    const rotationQuaternion = tempQuaternion.set(0, rotation.quaternionY, 0, rotation.quaternionW);
     this.config.character.quaternion.slerp(rotationQuaternion, 0.6);
     if (state !== this.currentAnimation) {
       this.currentAnimation = state;
@@ -2183,13 +2263,40 @@ var CharacterManager = class {
       keyInputManager: this.config.keyInputManager,
       virtualJoystick: this.config.virtualJoystick,
       cameraManager: this.config.cameraManager,
-      timeManager: this.config.timeManager
+      timeManager: this.config.timeManager,
+      spawnConfiguration: this.config.spawnConfiguration
     });
     this.localCharacter.position.set(spawnPosition.x, spawnPosition.y, spawnPosition.z);
     this.localCharacter.rotation.set(spawnRotation.x, spawnRotation.y, spawnRotation.z);
     this.group.add(character);
     this.localCharacterSpawned = true;
   }
+  createRespawnButton() {
+    const respawnButton = document.createElement("div");
+    respawnButton.className = "respawn-button";
+    respawnButton.textContent = "RESPAWN";
+    respawnButton.addEventListener("click", () => {
+      this.localController.resetPosition();
+    });
+    respawnButton.style.position = "absolute";
+    respawnButton.style.top = "14px";
+    respawnButton.style.left = "8px";
+    respawnButton.style.zIndex = "102";
+    respawnButton.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
+    respawnButton.style.color = "#ffffff";
+    respawnButton.style.borderRadius = "8px";
+    respawnButton.style.border = "1px solid rgba(255, 255, 255, 0.21)";
+    respawnButton.style.height = "22px";
+    respawnButton.style.padding = "8px";
+    respawnButton.style.cursor = "pointer";
+    respawnButton.style.fontSize = "12px";
+    respawnButton.style.fontFamily = "Helvetica, sans-serif";
+    respawnButton.style.userSelect = "none";
+    respawnButton.style.display = "flex";
+    respawnButton.style.alignItems = "center";
+    respawnButton.style.justifyContent = "center";
+    return respawnButton;
+  }
   setupTweakPane(tweakPane) {
     tweakPane.setupCharacterController(this.localController);
   }
@@ -2215,9 +2322,14 @@ var CharacterManager = class {
   }
   getLocalCharacterPositionAndRotation() {
     if (this.localCharacter && this.localCharacter && this.localCharacter) {
+      const rotation = this.localCharacter.rotation;
       return {
         position: this.localCharacter.position,
-        rotation: this.localCharacter.rotation
+        rotation: {
+          x: radToDeg(rotation.x),
+          y: radToDeg(rotation.y),
+          z: radToDeg(rotation.z)
+        }
       };
     }
     return {
@@ -2453,8 +2565,17 @@ var KeyInputManager = class {
     return this.keys.get(key) || false;
   }
   createKeyBinding(key, callback) {
+    if (this.bindings.has(key)) {
+      return;
+    }
     this.bindings.set(key, callback);
   }
+  removeKeyBinding(key) {
+    if (!this.bindings.has(key)) {
+      return;
+    }
+    this.bindings.delete(key);
+  }
   isMovementKeyPressed() {
     return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key));
   }
@@ -5536,6 +5657,7 @@ var Composer = class {
     }
     this.updateSkyboxAndEnvValues();
     this.updateAmbientLightValues();
+    this.updateBloomValues();
     this.updateSunValues();
     this.updateFogValues();
   }
@@ -5808,6 +5930,13 @@ var Composer = class {
       this.updateSkyboxRotation();
     }
   }
+  updateBloomValues() {
+    var _a, _b;
+    if (typeof ((_b = (_a = this.environmentConfiguration) == null ? void 0 : _a.postProcessing) == null ? void 0 : _b.bloomIntensity) === "number") {
+      extrasValues.bloom = this.environmentConfiguration.postProcessing.bloomIntensity;
+    }
+    this.bloomEffect.intensity = extrasValues.bloom;
+  }
   updateAmbientLightValues() {
     var _a, _b;
     if (typeof ((_b = (_a = this.environmentConfiguration) == null ? void 0 : _a.ambientLight) == null ? void 0 : _b.intensity) === "number") {