@mml-io/3d-web-client-core 0.16.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,6 +14,7 @@ export declare class LoadingScreen {
14
14
  private debugCheckbox;
15
15
  private hasCompleted;
16
16
  private loadingCallback;
17
+ private disposed;
17
18
  constructor(loadingProgressManager: LoadingProgressManager);
18
19
  dispose(): void;
19
20
  }
@@ -3,6 +3,35 @@ import { PerspectiveCamera, Scene, Vector2, WebGLRenderer } from "three";
3
3
  import { Sun } from "../sun/Sun";
4
4
  import { TimeManager } from "../time/TimeManager";
5
5
  import { TweakPane } from "../tweakpane/TweakPane";
6
+ type ComposerContructorArgs = {
7
+ scene: Scene;
8
+ camera: PerspectiveCamera;
9
+ spawnSun: boolean;
10
+ environmentConfiguration?: EnvironmentConfiguration;
11
+ };
12
+ export type EnvironmentConfiguration = {
13
+ groundPlane?: boolean;
14
+ skybox?: {
15
+ intensity?: number;
16
+ blurriness?: number;
17
+ azimuthalAngle?: number;
18
+ polarAngle?: number;
19
+ };
20
+ envMap?: {
21
+ intensity?: number;
22
+ };
23
+ sun?: {
24
+ intensity?: number;
25
+ polarAngle?: number;
26
+ azimuthalAngle?: number;
27
+ };
28
+ postProcessing?: {
29
+ bloomIntensity?: number;
30
+ };
31
+ ambientLight?: {
32
+ intensity?: number;
33
+ };
34
+ };
6
35
  export declare class Composer {
7
36
  private width;
8
37
  private height;
@@ -33,16 +62,22 @@ export declare class Composer {
33
62
  private readonly gaussGrainEffect;
34
63
  private readonly gaussGrainPass;
35
64
  private ambientLight;
65
+ private environmentConfiguration?;
36
66
  sun: Sun | null;
37
67
  spawnSun: boolean;
38
- constructor(scene: Scene, camera: PerspectiveCamera, spawnSun?: boolean);
68
+ constructor({ scene, camera, spawnSun, environmentConfiguration, }: ComposerContructorArgs);
39
69
  setupTweakPane(tweakPane: TweakPane): void;
40
70
  dispose(): void;
41
71
  fitContainer(): void;
42
72
  render(timeManager: TimeManager): void;
73
+ updateSkyboxRotation(): void;
43
74
  useHDRJPG(url: string, fromFile?: boolean): void;
44
75
  useHDRI(url: string, fromFile?: boolean): void;
45
76
  setHDRIFromFile(): void;
46
77
  setFog(): void;
47
78
  setAmbientLight(): void;
79
+ private updateSunValues;
80
+ private updateSkyboxAndEnvValues;
81
+ private updateAmbientLightValues;
48
82
  }
83
+ export {};
@@ -1,5 +1,7 @@
1
1
  import { BloomEffect, EffectComposer, EffectPass, NormalPass, SSAOEffect, ToneMappingEffect } from "postprocessing";
2
2
  import { Scene, WebGLRenderer } from "three";
3
+ import { CameraManager } from "../camera/CameraManager";
4
+ import { LocalController } from "../character/LocalController";
3
5
  import { BrightnessContrastSaturation } from "../rendering/post-effects/bright-contrast-sat";
4
6
  import { GaussGrainEffect } from "../rendering/post-effects/gauss-grain";
5
7
  import { Sun } from "../sun/Sun";
@@ -18,14 +20,22 @@ export declare class TweakPane {
18
20
  private postExtrasFolder;
19
21
  private character;
20
22
  private environment;
23
+ private camera;
24
+ private characterControls;
21
25
  private export;
22
26
  private saveVisibilityInLocalStorage;
23
27
  guiVisible: boolean;
28
+ private tweakPaneWrapper;
24
29
  constructor(holderElement: HTMLElement, renderer: WebGLRenderer, scene: Scene, composer: EffectComposer);
25
30
  private setupGUIListeners;
26
31
  private processKey;
27
- setupRenderPane(composer: EffectComposer, normalPass: NormalPass, ppssaoEffect: SSAOEffect, ppssaoPass: EffectPass, n8aopass: any, toneMappingEffect: ToneMappingEffect, toneMappingPass: EffectPass, brightnessContrastSaturation: typeof BrightnessContrastSaturation, bloomEffect: BloomEffect, gaussGrainEffect: typeof GaussGrainEffect, hasLighting: boolean, sun: Sun | null, setHDR: () => void, setAmbientLight: () => void, setFog: () => void): void;
32
+ setupRenderPane(composer: EffectComposer, normalPass: NormalPass, ppssaoEffect: SSAOEffect, ppssaoPass: EffectPass, n8aopass: any, toneMappingEffect: ToneMappingEffect, toneMappingPass: EffectPass, brightnessContrastSaturation: typeof BrightnessContrastSaturation, bloomEffect: BloomEffect, gaussGrainEffect: typeof GaussGrainEffect, hasLighting: boolean, sun: Sun | null, setHDR: () => void, setSkyboxAzimuthalAngle: (azimuthalAngle: number) => void, setSkyboxPolarAngle: (azimuthalAngle: number) => void, setAmbientLight: () => void, setFog: () => void): void;
33
+ dispose(): void;
34
+ setupCamPane(cameraManager: CameraManager): void;
35
+ setupCharacterController(localController: LocalController): void;
28
36
  updateStats(timeManager: TimeManager): void;
37
+ updateCameraData(cameraManager: CameraManager): void;
38
+ updateCharacterData(localController: LocalController): void;
29
39
  private formatDateForFilename;
30
40
  private downloadSettingsAsJSON;
31
41
  private importSettingsFromJSON;
@@ -0,0 +1,74 @@
1
+ import { FolderApi } from "tweakpane";
2
+ import { CameraManager } from "../../camera/CameraManager";
3
+ export declare const camValues: {
4
+ initialDistance: number;
5
+ minDistance: number;
6
+ maxDistance: number;
7
+ initialFOV: number;
8
+ maxFOV: number;
9
+ minFOV: number;
10
+ invertFOVMapping: boolean;
11
+ damping: number;
12
+ dampingScale: number;
13
+ zoomScale: number;
14
+ zoomDamping: number;
15
+ };
16
+ export declare const camOptions: {
17
+ initialDistance: {
18
+ min: number;
19
+ max: number;
20
+ step: number;
21
+ };
22
+ minDistance: {
23
+ min: number;
24
+ max: number;
25
+ step: number;
26
+ };
27
+ maxDistance: {
28
+ min: number;
29
+ max: number;
30
+ step: number;
31
+ };
32
+ initialFOV: {
33
+ min: number;
34
+ max: number;
35
+ step: number;
36
+ };
37
+ maxFOV: {
38
+ min: number;
39
+ max: number;
40
+ step: number;
41
+ };
42
+ minFOV: {
43
+ min: number;
44
+ max: number;
45
+ step: number;
46
+ };
47
+ damping: {
48
+ min: number;
49
+ max: number;
50
+ step: number;
51
+ };
52
+ dampingScale: {
53
+ min: number;
54
+ max: number;
55
+ step: number;
56
+ };
57
+ zoomScale: {
58
+ min: number;
59
+ max: number;
60
+ step: number;
61
+ };
62
+ zoomDamping: {
63
+ min: number;
64
+ max: number;
65
+ step: number;
66
+ };
67
+ };
68
+ export declare class CameraFolder {
69
+ folder: FolderApi;
70
+ private camData;
71
+ constructor(parentFolder: FolderApi, expand?: boolean);
72
+ setupChangeEvent(cameraManager: CameraManager): void;
73
+ update(cameraManager: CameraManager): void;
74
+ }
@@ -0,0 +1,79 @@
1
+ import { FolderApi } from "tweakpane";
2
+ import { LocalController } from "../../character/LocalController";
3
+ export declare const characterControllerValues: {
4
+ gravity: number;
5
+ jumpForce: number;
6
+ doubleJumpForce: number;
7
+ coyoteJump: number;
8
+ airResistance: number;
9
+ groundResistance: number;
10
+ airControlModifier: number;
11
+ groundWalkControl: number;
12
+ groundRunControl: number;
13
+ baseControlMultiplier: number;
14
+ minimumSurfaceAngle: number;
15
+ };
16
+ export declare const characterControllerOptions: {
17
+ gravity: {
18
+ min: number;
19
+ max: number;
20
+ step: number;
21
+ };
22
+ jumpForce: {
23
+ min: number;
24
+ max: number;
25
+ step: number;
26
+ };
27
+ doubleJumpForce: {
28
+ min: number;
29
+ max: number;
30
+ step: number;
31
+ };
32
+ coyoteJump: {
33
+ min: number;
34
+ max: number;
35
+ step: number;
36
+ };
37
+ airResistance: {
38
+ min: number;
39
+ max: number;
40
+ step: number;
41
+ };
42
+ groundResistance: {
43
+ min: number;
44
+ max: number;
45
+ step: number;
46
+ };
47
+ airControlModifier: {
48
+ min: number;
49
+ max: number;
50
+ step: number;
51
+ };
52
+ groundWalkControl: {
53
+ min: number;
54
+ max: number;
55
+ step: number;
56
+ };
57
+ groundRunControl: {
58
+ min: number;
59
+ max: number;
60
+ step: number;
61
+ };
62
+ baseControlMultiplier: {
63
+ min: number;
64
+ max: number;
65
+ step: number;
66
+ };
67
+ minimumSurfaceAngle: {
68
+ min: number;
69
+ max: number;
70
+ step: number;
71
+ };
72
+ };
73
+ export declare class CharacterControlsFolder {
74
+ folder: FolderApi;
75
+ private characterData;
76
+ constructor(parentFolder: FolderApi, expand?: boolean);
77
+ setupChangeEvent(localController: LocalController): void;
78
+ update(localController: LocalController): void;
79
+ }
@@ -1,3 +1,4 @@
1
+ import { Scene } from "three";
1
2
  import { FolderApi } from "tweakpane";
2
3
  import { Sun } from "../../sun/Sun";
3
4
  export declare const sunValues: {
@@ -13,6 +14,11 @@ export declare const sunValues: {
13
14
  };
14
15
  };
15
16
  export declare const envValues: {
17
+ skyboxAzimuthalAngle: number;
18
+ skyboxPolarAngle: number;
19
+ envMapIntensity: number;
20
+ skyboxIntensity: number;
21
+ skyboxBlurriness: number;
16
22
  ambientLight: {
17
23
  ambientLightIntensity: number;
18
24
  ambientLightColor: {
@@ -34,8 +40,11 @@ export declare const envValues: {
34
40
  export declare class EnvironmentFolder {
35
41
  folder: FolderApi;
36
42
  private sun;
37
- private sunButton;
43
+ private envMap;
44
+ private hdrButton;
45
+ private skybox;
38
46
  private ambient;
47
+ private fog;
39
48
  constructor(parentFolder: FolderApi, expand?: boolean);
40
- setupChangeEvent(setHDR: () => void, setAmbientLight: () => void, setFog: () => void, sun: Sun | null): void;
49
+ setupChangeEvent(scene: Scene, setHDR: () => void, setSkyboxAzimuthalAngle: (azimuthalAngle: number) => void, setSkyboxPolarAngle: (polarAngle: number) => void, setAmbientLight: () => void, setFog: () => void, sun: Sun | null): void;
41
50
  }
@@ -1,15 +1,13 @@
1
1
  import { EffectPass } from "postprocessing";
2
- import { Scene, WebGLRenderer } from "three";
2
+ import { WebGLRenderer } from "three";
3
3
  import { FolderApi } from "tweakpane";
4
4
  export declare const rendererValues: {
5
5
  shadowMap: number;
6
6
  toneMapping: number;
7
7
  exposure: number;
8
- bgIntensity: number;
9
- bgBlurriness: number;
10
8
  };
11
9
  export declare class RendererFolder {
12
10
  private folder;
13
11
  constructor(parentFolder: FolderApi, expand?: boolean);
14
- setupChangeEvent(scene: Scene, renderer: WebGLRenderer, toneMappingFolder: FolderApi, toneMappingPass: EffectPass): void;
12
+ setupChangeEvent(renderer: WebGLRenderer, toneMappingFolder: FolderApi, toneMappingPass: EffectPass): void;
15
13
  }
@@ -1 +1 @@
1
- export declare const tweakPaneStyle = "\n:root {\n --tp-base-background-color: rgba(12, 12, 12, 0.6);\n --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);\n --tp-button-background-color: hsla(0, 0%, 80%, 1);\n --tp-button-background-color-active: hsla(0, 0%, 100%, 1);\n --tp-button-background-color-focus: hsla(0, 0%, 95%, 1);\n --tp-button-background-color-hover: hsla(0, 0%, 85%, 1);\n --tp-button-foreground-color: hsla(0, 0%, 0%, 0.7);\n --tp-container-background-color: hsla(0, 0%, 0%, 0.3);\n --tp-container-background-color-active: hsla(0, 0%, 0%, 0.6);\n --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.5);\n --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.4);\n --tp-container-foreground-color: hsla(0, 0%, 90%, 0.6);\n --tp-groove-foreground-color: hsla(0, 0%, 0%, 0.2);\n --tp-input-background-color: hsla(0, 0%, 30%, 0.3);\n --tp-input-background-color-active: hsla(0, 0%, 0%, 0.6);\n --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.5);\n --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.4);\n --tp-input-foreground-color: hsla(0, 0%, 100%, 0.6);\n --tp-label-foreground-color: hsla(0, 0%, 100%, 0.6);\n --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);\n --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tp-brkv {\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tp-dfwv {\n z-index: 100;\n color: white;\n width: 600px !important;\n display: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tp-fldv {\n margin: 1px 0px 0px 0px !important;\n}\n\n.tp-fldv_b {\n overflow: visible !important;\n}\n\n.tp-fldv_t {\n font-size: 13px;\n font-weight: 900;\n color: #ffffff;\n background-color: rgba(70, 70, 70, 0.3);\n border-top: 1px solid rgba(210, 210, 210, 0.1);\n border-radius: 3px;\n}\n\n.tp-lblv_l {\n font-size: 12px;\n padding-left: 0px !important;\n padding-right: 0px !important;\n}\n\n.tp-lblv_v {\n width: 150px;\n}\n\n.tp-sldtxtv_t {\n max-width: 50px;\n}\n\n.tp-sglv_i {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n}\n\n.tp-ckbv_w {\n border: 1px solid rgba(200, 200, 250, 0.2);\n}\n";
1
+ export declare const tweakPaneStyle = "\n:root {\n --tp-base-background-color: rgba(12, 12, 12, 0.6);\n --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);\n --tp-button-background-color: hsla(0, 0%, 80%, 1);\n --tp-button-background-color-active: hsla(0, 0%, 100%, 1);\n --tp-button-background-color-focus: hsla(0, 0%, 95%, 1);\n --tp-button-background-color-hover: hsla(0, 0%, 85%, 1);\n --tp-button-foreground-color: hsla(0, 0%, 0%, 0.7);\n --tp-container-background-color: hsla(0, 0%, 0%, 0.3);\n --tp-container-background-color-active: hsla(0, 0%, 0%, 0.6);\n --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.5);\n --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.4);\n --tp-container-foreground-color: hsla(0, 0%, 90%, 0.6);\n --tp-groove-foreground-color: hsla(0, 0%, 0%, 0.2);\n --tp-input-background-color: hsla(0, 0%, 30%, 0.3);\n --tp-input-background-color-active: hsla(0, 0%, 0%, 0.6);\n --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.5);\n --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.4);\n --tp-input-foreground-color: hsla(0, 0%, 100%, 0.6);\n --tp-label-foreground-color: hsla(0, 0%, 100%, 0.6);\n --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);\n --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);\n}\n\n.tp-brkv {\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tp-dfwv {\n z-index: 100;\n color: white;\n width: 600px !important;\n display: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tp-fldv {\n margin: 1px 0px 0px 0px !important;\n}\n\n.tp-fldv_b {\n overflow: visible !important;\n}\n\n.tp-fldv_t {\n font-size: 13px;\n font-weight: 900;\n color: #ffffff;\n background-color: rgba(70, 70, 70, 0.3);\n border-top: 1px solid rgba(210, 210, 210, 0.1);\n border-radius: 3px;\n}\n\n.tp-lblv_l {\n font-size: 12px;\n padding-left: 0px !important;\n padding-right: 0px !important;\n}\n\n.tp-lblv_v {\n width: 150px;\n}\n\n.tp-sldtxtv_t {\n max-width: 50px;\n}\n\n.tp-sglv_i {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n}\n\n.tp-ckbv_w {\n border: 1px solid rgba(200, 200, 250, 0.2);\n}\n";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mml-io/3d-web-client-core",
3
- "version": "0.16.0",
3
+ "version": "0.18.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -18,15 +18,15 @@
18
18
  "lint-fix": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --fix"
19
19
  },
20
20
  "dependencies": {
21
- "@mml-io/3d-web-avatar": "^0.16.0",
22
- "@mml-io/model-loader": "0.14.0",
21
+ "@mml-io/3d-web-avatar": "^0.18.0",
22
+ "@mml-io/model-loader": "0.16.1",
23
23
  "@monogrid/gainmap-js": "^3.0.5",
24
- "@tweakpane/core": "2.0.3",
24
+ "@tweakpane/core": "2.0.4",
25
25
  "@tweakpane/plugin-essentials": "0.2.1",
26
- "mml-web": "0.14.0",
27
- "postprocessing": "6.35.4",
28
- "three-mesh-bvh": "0.7.4",
29
- "tweakpane": "4.0.3"
26
+ "mml-web": "0.16.1",
27
+ "postprocessing": "6.35.6",
28
+ "three-mesh-bvh": "0.7.6",
29
+ "tweakpane": "4.0.4"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "three": ">= 0.163.0"
@@ -34,5 +34,5 @@
34
34
  "devDependencies": {
35
35
  "@types/three": "0.163.0"
36
36
  },
37
- "gitHead": "c4ef44ae56497ed3cb9abaeee56be11dbc133460"
37
+ "gitHead": "8eb8acbdc767b15eacf3e8d62c5a0c92d2690f37"
38
38
  }