@benjos/create-boilerplate 1.0.0 → 1.0.3
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.
- package/README.md +16 -21
- package/dist/index.js +16 -15
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/template-vanilla/.prettierignore +6 -0
- package/template-vanilla/.prettierrc +10 -0
- package/template-vanilla/assets_source/.gitkeep +0 -0
- package/template-vanilla/docs/PUBLISHING.md +30 -0
- package/template-vanilla/eslint.config.js +126 -0
- package/template-vanilla/index.html +17 -0
- package/template-vanilla/package-lock.json +3743 -0
- package/template-vanilla/package.json +38 -0
- package/template-vanilla/public/assets/fonts/LICENSE +13 -0
- package/template-vanilla/public/assets/fonts/template.typeface.json +1 -0
- package/template-vanilla/public/assets/hdrs/template.hdr +0 -0
- package/template-vanilla/public/assets/icons/benjosLogoBlack.svg +5 -0
- package/template-vanilla/public/assets/loaders/draco/README.md +32 -0
- package/template-vanilla/public/assets/loaders/draco/draco_decoder.js +34 -0
- package/template-vanilla/public/assets/loaders/draco/draco_decoder.wasm +0 -0
- package/template-vanilla/public/assets/loaders/draco/draco_encoder.js +33 -0
- package/template-vanilla/public/assets/loaders/draco/draco_wasm_wrapper.js +117 -0
- package/template-vanilla/public/assets/loaders/draco/gltf/draco_decoder.js +33 -0
- package/template-vanilla/public/assets/loaders/draco/gltf/draco_decoder.wasm +0 -0
- package/template-vanilla/public/assets/loaders/draco/gltf/draco_encoder.js +33 -0
- package/template-vanilla/public/assets/loaders/draco/gltf/draco_wasm_wrapper.js +116 -0
- package/template-vanilla/public/assets/models/template.glb +0 -0
- package/template-vanilla/public/assets/textures/template.jpg +0 -0
- package/template-vanilla/readme.md +49 -0
- package/template-vanilla/src/experiences/Experience.ts +15 -0
- package/template-vanilla/src/experiences/cameras/threes/DebugThreeCameraController.ts +60 -0
- package/template-vanilla/src/experiences/cameras/threes/LoaderThreeCameraController.ts +28 -0
- package/template-vanilla/src/experiences/cameras/threes/MainThreeCameraController.ts +28 -0
- package/template-vanilla/src/experiences/cameras/threes/bases/ThreeCameraControllerBase.ts +109 -0
- package/template-vanilla/src/experiences/commands/InitCommand.ts +48 -0
- package/template-vanilla/src/experiences/constants/doms/DomEvent.ts +100 -0
- package/template-vanilla/src/experiences/constants/doms/KeyboardConstant.ts +250 -0
- package/template-vanilla/src/experiences/constants/experiences/AnimationId.ts +3 -0
- package/template-vanilla/src/experiences/constants/experiences/AssetId.ts +8 -0
- package/template-vanilla/src/experiences/constants/experiences/AssetType.ts +8 -0
- package/template-vanilla/src/experiences/constants/experiences/CameraId.ts +7 -0
- package/template-vanilla/src/experiences/constants/experiences/CameraType.ts +6 -0
- package/template-vanilla/src/experiences/constants/experiences/Object3dId.ts +3 -0
- package/template-vanilla/src/experiences/constants/experiences/ViewId.ts +15 -0
- package/template-vanilla/src/experiences/engines/htmls/MainHTML.ts +13 -0
- package/template-vanilla/src/experiences/engines/threes/MainThree.ts +171 -0
- package/template-vanilla/src/experiences/managers/DebugManager.ts +78 -0
- package/template-vanilla/src/experiences/managers/KeyboardManager.ts +65 -0
- package/template-vanilla/src/experiences/managers/LoaderManager.ts +79 -0
- package/template-vanilla/src/experiences/managers/MouseManager.ts +100 -0
- package/template-vanilla/src/experiences/managers/ResizeManager.ts +53 -0
- package/template-vanilla/src/experiences/managers/TickerManager.ts +86 -0
- package/template-vanilla/src/experiences/managers/threes/ThreeAssetsManager.ts +279 -0
- package/template-vanilla/src/experiences/managers/threes/ThreeCameraControllerManager.ts +43 -0
- package/template-vanilla/src/experiences/managers/threes/ThreeRaycasterManager.ts +23 -0
- package/template-vanilla/src/experiences/materials/threes/loaders/LoaderMaterial.ts +48 -0
- package/template-vanilla/src/experiences/proxies/ViewProxy.ts +30 -0
- package/template-vanilla/src/experiences/proxies/bases/PoolProxyBase.ts +61 -0
- package/template-vanilla/src/experiences/renderers/threes/LoaderRenderer.ts +22 -0
- package/template-vanilla/src/experiences/renderers/threes/Renderer.ts +74 -0
- package/template-vanilla/src/experiences/renderers/threes/bases/WebGLRendererBase.ts +29 -0
- package/template-vanilla/src/experiences/shaders/threes/loaders/LoaderFragmentShader.glsl +6 -0
- package/template-vanilla/src/experiences/shaders/threes/loaders/LoaderVertexShader.glsl +3 -0
- package/template-vanilla/src/experiences/styles/abstracts/_import.scss +5 -0
- package/template-vanilla/src/experiences/styles/abstracts/functions.scss +3 -0
- package/template-vanilla/src/experiences/styles/abstracts/mixins.scss +0 -0
- package/template-vanilla/src/experiences/styles/abstracts/variables.scss +7 -0
- package/template-vanilla/src/experiences/styles/commons/fonts.scss +10 -0
- package/template-vanilla/src/experiences/styles/commons/main.scss +84 -0
- package/template-vanilla/src/experiences/styles/commons/texts.scss +1 -0
- package/template-vanilla/src/experiences/styles/style.scss +7 -0
- package/template-vanilla/src/experiences/styles/views/loader.scss +72 -0
- package/template-vanilla/src/experiences/tools/Action.ts +23 -0
- package/template-vanilla/src/experiences/tools/Point.ts +56 -0
- package/template-vanilla/src/experiences/types/global.d.ts +9 -0
- package/template-vanilla/src/experiences/utils/AssetUtils.ts +6 -0
- package/template-vanilla/src/experiences/utils/DomUtils.ts +28 -0
- package/template-vanilla/src/experiences/views/bases/ViewBase.ts +25 -0
- package/template-vanilla/src/experiences/views/htmls/bases/HTMLViewBase.ts +41 -0
- package/template-vanilla/src/experiences/views/htmls/loaders/LoaderHTMLView.ts +34 -0
- package/template-vanilla/src/experiences/views/htmls/loaders/components/HTMLTemplateLoader.ts +57 -0
- package/template-vanilla/src/experiences/views/threes/bases/ThreeViewBase.ts +26 -0
- package/template-vanilla/src/experiences/views/threes/loaders/LoaderThreeView.ts +41 -0
- package/template-vanilla/src/experiences/views/threes/loaders/components/ThreeTemplateLoader.ts +52 -0
- package/template-vanilla/src/experiences/views/threes/worlds/WorldThreeView.ts +51 -0
- package/template-vanilla/src/experiences/views/threes/worlds/components/Environment.ts +77 -0
- package/template-vanilla/src/experiences/views/threes/worlds/components/actors/TemplateFont.ts +62 -0
- package/template-vanilla/src/experiences/views/threes/worlds/components/actors/TemplateMesh.ts +65 -0
- package/template-vanilla/src/experiences/views/threes/worlds/components/actors/TemplateModel.ts +31 -0
- package/template-vanilla/src/experiences/views/threes/worlds/components/actors/bases/ActorBase.ts +9 -0
- package/template-vanilla/src/experiences/views/threes/worlds/components/actors/bases/AnimatedModelBase.ts +67 -0
- package/template-vanilla/src/experiences/views/threes/worlds/components/actors/bases/ModelBase.ts +48 -0
- package/template-vanilla/src/main.ts +3 -0
- package/template-vanilla/tsconfig.json +24 -0
- package/template-vanilla/vite.config.ts +15 -0
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { DomEvent } from '../constants/doms/DomEvent';
|
|
2
|
+
import Action from '../tools/Action';
|
|
3
|
+
|
|
4
|
+
export class KeyboardManager {
|
|
5
|
+
private static readonly _KeyDownsMap = new Map<string, boolean>();
|
|
6
|
+
private static readonly _CodeDownsMap = new Map<string, boolean>();
|
|
7
|
+
|
|
8
|
+
public static readonly OnKeyDown = new Action<[KeyboardEvent]>();
|
|
9
|
+
public static readonly OnKeyUp = new Action<[KeyboardEvent]>();
|
|
10
|
+
|
|
11
|
+
public static Init(): void {
|
|
12
|
+
KeyboardManager._KeyDownsMap.clear();
|
|
13
|
+
KeyboardManager._CodeDownsMap.clear();
|
|
14
|
+
KeyboardManager._AddCallbacks();
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
private static _AddCallbacks(): void {
|
|
18
|
+
KeyboardManager._RemoveCallbacks();
|
|
19
|
+
window.addEventListener(DomEvent.KEY_DOWN, KeyboardManager._OnKeyDown);
|
|
20
|
+
window.addEventListener(DomEvent.KEY_UP, KeyboardManager._OnKeyUp);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
private static _RemoveCallbacks(): void {
|
|
24
|
+
window.removeEventListener(DomEvent.KEY_DOWN, KeyboardManager._OnKeyDown);
|
|
25
|
+
window.removeEventListener(DomEvent.KEY_UP, KeyboardManager._OnKeyUp);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
private static readonly _OnKeyDown = (e: KeyboardEvent): void => {
|
|
29
|
+
KeyboardManager._KeyDownsMap.set(e.key, true);
|
|
30
|
+
KeyboardManager._CodeDownsMap.set(e.code, true);
|
|
31
|
+
KeyboardManager.OnKeyDown.execute(e);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
private static readonly _OnKeyUp = (e: KeyboardEvent): void => {
|
|
35
|
+
KeyboardManager.OnKeyUp.execute(e);
|
|
36
|
+
KeyboardManager._KeyDownsMap.set(e.key, false);
|
|
37
|
+
KeyboardManager._CodeDownsMap.set(e.code, false);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
public static IsKeyDown(name: string): boolean {
|
|
41
|
+
if (!KeyboardManager.IsAvailableForControl()) return false;
|
|
42
|
+
if (KeyboardManager._CodeDownsMap.get(name)) return true;
|
|
43
|
+
if (KeyboardManager._KeyDownsMap.get(name)) return true;
|
|
44
|
+
return false;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
public static IsAnyKeyDown(names: string[]): boolean {
|
|
48
|
+
if (!KeyboardManager.IsAvailableForControl()) return false;
|
|
49
|
+
return names.some((name) => KeyboardManager.IsKeyDown(name));
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
public static AreAllKeysDown(names: string[]): boolean {
|
|
53
|
+
if (!KeyboardManager.IsAvailableForControl()) return false;
|
|
54
|
+
return names.every((name) => KeyboardManager.IsKeyDown(name));
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
public static IsAvailableForControl(): boolean {
|
|
58
|
+
const active: HTMLElement = document.activeElement as HTMLElement;
|
|
59
|
+
return !(
|
|
60
|
+
active instanceof HTMLInputElement ||
|
|
61
|
+
active instanceof HTMLTextAreaElement ||
|
|
62
|
+
active?.isContentEditable
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import Action from '../tools/Action';
|
|
2
|
+
import ThreeAssetsManager from './threes/ThreeAssetsManager';
|
|
3
|
+
|
|
4
|
+
export default class LoaderManager {
|
|
5
|
+
private static _TotalSize = 0;
|
|
6
|
+
private static _LoadedSize = 0;
|
|
7
|
+
|
|
8
|
+
public static readonly OnBeginLoad = new Action();
|
|
9
|
+
public static readonly OnProgress = new Action();
|
|
10
|
+
public static readonly OnFinishLoad = new Action();
|
|
11
|
+
|
|
12
|
+
public static Init(): void {
|
|
13
|
+
LoaderManager._AddCallbacks();
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
private static _AddCallbacks(): void {
|
|
17
|
+
LoaderManager._RemoveCallbacks();
|
|
18
|
+
ThreeAssetsManager.OnLoad.add(LoaderManager._OnLoad);
|
|
19
|
+
ThreeAssetsManager.OnProgress.add(LoaderManager._OnProgress);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
private static _RemoveCallbacks(): void {
|
|
23
|
+
ThreeAssetsManager.OnLoad.remove(LoaderManager._OnLoad);
|
|
24
|
+
ThreeAssetsManager.OnProgress.remove(LoaderManager._OnProgress);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
public static LoadAllAssets(): void {
|
|
28
|
+
if (LoaderManager._CheckIsFinished()) return;
|
|
29
|
+
else LoaderManager.OnBeginLoad.execute();
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
private static _OnLoad = (): void => {
|
|
33
|
+
LoaderManager._RefreshSizes();
|
|
34
|
+
if (LoaderManager._CheckIsFinished()) LoaderManager._OnFinishLoad();
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
private static _CheckIsFinished = (): boolean => {
|
|
38
|
+
if (!ThreeAssetsManager.IsLoaded) return false;
|
|
39
|
+
return true;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
private static _OnProgress = (): void => {
|
|
43
|
+
LoaderManager._RefreshSizes();
|
|
44
|
+
LoaderManager.OnProgress.execute();
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
private static _RefreshSizes = (): void => {
|
|
48
|
+
LoaderManager._RefreshTotalSize();
|
|
49
|
+
LoaderManager._RefreshLoadedSize();
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
private static _RefreshTotalSize = (): void => {
|
|
53
|
+
LoaderManager._TotalSize = 0;
|
|
54
|
+
LoaderManager._TotalSize += ThreeAssetsManager.TotalSize;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
private static _RefreshLoadedSize = (): void => {
|
|
58
|
+
LoaderManager._LoadedSize = 0;
|
|
59
|
+
LoaderManager._LoadedSize += ThreeAssetsManager.LoadedSize;
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
private static _OnFinishLoad = (): void => {
|
|
63
|
+
LoaderManager.OnFinishLoad.execute();
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
//#region Getters
|
|
67
|
+
//
|
|
68
|
+
public static get IsLoaded(): boolean {
|
|
69
|
+
return LoaderManager._CheckIsFinished();
|
|
70
|
+
}
|
|
71
|
+
public static get TotalSize(): number {
|
|
72
|
+
return LoaderManager._TotalSize;
|
|
73
|
+
}
|
|
74
|
+
public static get LoadedSize(): number {
|
|
75
|
+
return LoaderManager._LoadedSize;
|
|
76
|
+
}
|
|
77
|
+
//
|
|
78
|
+
//#endregion
|
|
79
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { DomEvent } from '../constants/doms/DomEvent';
|
|
2
|
+
import Action from '../tools/Action';
|
|
3
|
+
|
|
4
|
+
export default class MouseManager {
|
|
5
|
+
private static _X = 0;
|
|
6
|
+
private static _Y = 0;
|
|
7
|
+
private static _NormalizedX = 0;
|
|
8
|
+
private static _NormalizedY = 0;
|
|
9
|
+
private static _CentralX = 0;
|
|
10
|
+
private static _CentralY = 0;
|
|
11
|
+
|
|
12
|
+
public static readonly OnMouseDown = new Action();
|
|
13
|
+
public static readonly OnMouseUp = new Action();
|
|
14
|
+
public static readonly OnMouseMove = new Action();
|
|
15
|
+
|
|
16
|
+
public static Init(): void {
|
|
17
|
+
this._AddCallbacks();
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
private static _AddCallbacks(): void {
|
|
21
|
+
this._RemoveCallbacks();
|
|
22
|
+
window.addEventListener(DomEvent.TOUCH_START, this._OnMouseDown);
|
|
23
|
+
window.addEventListener(DomEvent.TOUCH_END, this._OnMouseUp);
|
|
24
|
+
window.addEventListener(DomEvent.TOUCH_MOVE, this._OnMouseMove);
|
|
25
|
+
window.addEventListener(DomEvent.MOUSE_DOWN, this._OnMouseDown);
|
|
26
|
+
window.addEventListener(DomEvent.MOUSE_UP, this._OnMouseUp);
|
|
27
|
+
window.addEventListener(DomEvent.MOUSE_MOVE, this._OnMouseMove);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
private static _RemoveCallbacks(): void {
|
|
31
|
+
window.removeEventListener(DomEvent.TOUCH_START, this._OnMouseDown);
|
|
32
|
+
window.removeEventListener(DomEvent.TOUCH_END, this._OnMouseUp);
|
|
33
|
+
window.removeEventListener(DomEvent.TOUCH_MOVE, this._OnMouseMove);
|
|
34
|
+
window.removeEventListener(DomEvent.MOUSE_DOWN, this._OnMouseDown);
|
|
35
|
+
window.removeEventListener(DomEvent.MOUSE_UP, this._OnMouseUp);
|
|
36
|
+
window.removeEventListener(DomEvent.MOUSE_MOVE, this._OnMouseMove);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
private static readonly _OnMouseDown = (event: MouseEvent | TouchEvent): void => {
|
|
40
|
+
this._OnMouseMove(event);
|
|
41
|
+
this.OnMouseDown.execute();
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
private static readonly _OnMouseUp = (_event: MouseEvent | TouchEvent): void => {
|
|
45
|
+
this.OnMouseUp.execute();
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
private static readonly _OnMouseMove = (event: MouseEvent | TouchEvent): void => {
|
|
49
|
+
this._UpdateMousePosition(event);
|
|
50
|
+
this.OnMouseMove.execute();
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
private static _UpdateMousePosition(event: Event): void {
|
|
54
|
+
const { x, y } = this._GetMousePosition(event);
|
|
55
|
+
this._X = x;
|
|
56
|
+
this._Y = y;
|
|
57
|
+
this._NormalizedX = this._X / window.innerWidth;
|
|
58
|
+
this._NormalizedY = 1 - this._Y / window.innerHeight;
|
|
59
|
+
this._CentralX = this._NormalizedX * 2 - 1;
|
|
60
|
+
this._CentralY = this._NormalizedY * 2 - 1;
|
|
61
|
+
this.OnMouseMove.execute();
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
private static _GetMousePosition(e: Event): { x: number; y: number } {
|
|
65
|
+
if (e instanceof MouseEvent) {
|
|
66
|
+
return { x: e.clientX, y: e.clientY };
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
if (window.TouchEvent && e instanceof TouchEvent) {
|
|
70
|
+
if (e.touches.length > 0) {
|
|
71
|
+
return { x: e.touches[0].clientX, y: e.touches[0].clientY };
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
return { x: 0, y: 0 };
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
//#region Getters
|
|
79
|
+
//
|
|
80
|
+
public static get X(): number {
|
|
81
|
+
return this._X;
|
|
82
|
+
}
|
|
83
|
+
public static get Y(): number {
|
|
84
|
+
return this._Y;
|
|
85
|
+
}
|
|
86
|
+
public static get NormalizedX(): number {
|
|
87
|
+
return this._NormalizedX;
|
|
88
|
+
}
|
|
89
|
+
public static get NormalizedY(): number {
|
|
90
|
+
return this._NormalizedY;
|
|
91
|
+
}
|
|
92
|
+
public static get CentralX(): number {
|
|
93
|
+
return this._CentralX;
|
|
94
|
+
}
|
|
95
|
+
public static get CentralY(): number {
|
|
96
|
+
return this._CentralY;
|
|
97
|
+
}
|
|
98
|
+
//
|
|
99
|
+
//#endregion
|
|
100
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import Action from '../tools/Action';
|
|
2
|
+
import TickerManager from './TickerManager';
|
|
3
|
+
|
|
4
|
+
export class ResizeManager {
|
|
5
|
+
private static _Width: number;
|
|
6
|
+
private static _Height: number;
|
|
7
|
+
private static _PixelRatio: number;
|
|
8
|
+
|
|
9
|
+
public static readonly OnResize = new Action();
|
|
10
|
+
|
|
11
|
+
//#region Constants
|
|
12
|
+
//
|
|
13
|
+
private static readonly _MAX_PIXEL_RATIO: number = 2;
|
|
14
|
+
//
|
|
15
|
+
//#endregion
|
|
16
|
+
|
|
17
|
+
public static Init(): void {
|
|
18
|
+
ResizeManager.Reset();
|
|
19
|
+
ResizeManager._Resize();
|
|
20
|
+
TickerManager.Add(ResizeManager.Update);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
public static Reset(): void {
|
|
24
|
+
TickerManager.Remove(ResizeManager.Update);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
private static readonly _Resize = (): void => {
|
|
28
|
+
ResizeManager._Width = window.innerWidth;
|
|
29
|
+
ResizeManager._Height = window.innerHeight;
|
|
30
|
+
ResizeManager._PixelRatio = Math.min(window.devicePixelRatio, ResizeManager._MAX_PIXEL_RATIO);
|
|
31
|
+
|
|
32
|
+
ResizeManager.OnResize.execute();
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
public static readonly Update = (_dt: number): void => {
|
|
36
|
+
if (ResizeManager._Width !== window.innerWidth || ResizeManager._Height !== window.innerHeight)
|
|
37
|
+
ResizeManager._Resize();
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
//#region Getters
|
|
41
|
+
//
|
|
42
|
+
public static get Width(): number {
|
|
43
|
+
return ResizeManager._Width;
|
|
44
|
+
}
|
|
45
|
+
public static get Height(): number {
|
|
46
|
+
return ResizeManager._Height;
|
|
47
|
+
}
|
|
48
|
+
public static get PixelRatio(): number {
|
|
49
|
+
return ResizeManager._PixelRatio;
|
|
50
|
+
}
|
|
51
|
+
//
|
|
52
|
+
//#endregion
|
|
53
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
export type Tickable = (dt: number) => void;
|
|
2
|
+
|
|
3
|
+
export default class TickerManager {
|
|
4
|
+
private static _IsRunning = false;
|
|
5
|
+
private static readonly _Tickables = new Set<Tickable>();
|
|
6
|
+
private static _StartTime: number = performance.now();
|
|
7
|
+
private static _CurrentTime: number = TickerManager._StartTime;
|
|
8
|
+
private static _ElapsedTime: number;
|
|
9
|
+
private static _DeltaTime: number;
|
|
10
|
+
|
|
11
|
+
//#region Constants
|
|
12
|
+
//
|
|
13
|
+
private static readonly _TIME_SCALE: number = 0.001;
|
|
14
|
+
private static readonly _MAX_DELTA: number = 0.1;
|
|
15
|
+
//
|
|
16
|
+
//#endregion
|
|
17
|
+
|
|
18
|
+
public static Init(): void {
|
|
19
|
+
TickerManager.Start();
|
|
20
|
+
TickerManager._ElapsedTime = 0;
|
|
21
|
+
TickerManager._DeltaTime = 0.016;
|
|
22
|
+
TickerManager._Update();
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
public static Start(): void {
|
|
26
|
+
TickerManager.Stop();
|
|
27
|
+
TickerManager._IsRunning = true;
|
|
28
|
+
TickerManager._StartTime = performance.now();
|
|
29
|
+
TickerManager._CurrentTime = TickerManager._StartTime;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
public static Stop(): void {
|
|
33
|
+
TickerManager._IsRunning = false;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
public static Play(): void {
|
|
37
|
+
TickerManager.Pause();
|
|
38
|
+
TickerManager._IsRunning = true;
|
|
39
|
+
TickerManager._CurrentTime = performance.now();
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
public static Pause(): void {
|
|
43
|
+
TickerManager._IsRunning = false;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
public static Add(tickable: Tickable): void {
|
|
47
|
+
TickerManager._Tickables.add(tickable);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
public static Remove(tickable: Tickable): void {
|
|
51
|
+
TickerManager._Tickables.delete(tickable);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
private static readonly _Update = (): void => {
|
|
55
|
+
if (TickerManager._IsRunning) {
|
|
56
|
+
const now = performance.now();
|
|
57
|
+
TickerManager._DeltaTime = Math.min(
|
|
58
|
+
(now - TickerManager._CurrentTime) * TickerManager._TIME_SCALE,
|
|
59
|
+
TickerManager._MAX_DELTA
|
|
60
|
+
);
|
|
61
|
+
TickerManager._ElapsedTime += TickerManager._DeltaTime;
|
|
62
|
+
TickerManager._CurrentTime = now;
|
|
63
|
+
|
|
64
|
+
for (const tickable of TickerManager._Tickables) tickable(TickerManager._DeltaTime);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
requestAnimationFrame(TickerManager._Update);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
//#region Getters
|
|
71
|
+
//
|
|
72
|
+
public static get StartTime(): number {
|
|
73
|
+
return this._StartTime;
|
|
74
|
+
}
|
|
75
|
+
public static get CurrentTime(): number {
|
|
76
|
+
return this._CurrentTime;
|
|
77
|
+
}
|
|
78
|
+
public static get ElapsedTime(): number {
|
|
79
|
+
return this._ElapsedTime;
|
|
80
|
+
}
|
|
81
|
+
public static get DeltaTime(): number {
|
|
82
|
+
return this._DeltaTime;
|
|
83
|
+
}
|
|
84
|
+
//
|
|
85
|
+
//#endregion
|
|
86
|
+
}
|
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DataTexture,
|
|
3
|
+
EquirectangularRefractionMapping,
|
|
4
|
+
LinearSRGBColorSpace,
|
|
5
|
+
RepeatWrapping,
|
|
6
|
+
Texture,
|
|
7
|
+
TextureLoader,
|
|
8
|
+
type ColorSpace,
|
|
9
|
+
type Mapping,
|
|
10
|
+
type Wrapping,
|
|
11
|
+
} from 'three';
|
|
12
|
+
import { DRACOLoader, Font, FontLoader, GLTFLoader, HDRLoader, type GLTF } from 'three/examples/jsm/Addons.js';
|
|
13
|
+
import type { AssetId } from '../../constants/experiences/AssetId';
|
|
14
|
+
import { AssetType } from '../../constants/experiences/AssetType';
|
|
15
|
+
import Action from '../../tools/Action';
|
|
16
|
+
import AssetUtils from '../../utils/AssetUtils';
|
|
17
|
+
import LoaderManager from '../LoaderManager';
|
|
18
|
+
|
|
19
|
+
export interface IThreeAssetToLoad {
|
|
20
|
+
id: AssetId;
|
|
21
|
+
type: AssetType;
|
|
22
|
+
path: string;
|
|
23
|
+
option?: IThreeAssetOption;
|
|
24
|
+
loadedSize: number;
|
|
25
|
+
totalSize: number;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export interface IThreeAssetOption {}
|
|
29
|
+
|
|
30
|
+
export interface IThreeTextureOption extends IThreeAssetOption {
|
|
31
|
+
colorSpace?: ColorSpace;
|
|
32
|
+
wrapping?: Wrapping;
|
|
33
|
+
repeatX?: number;
|
|
34
|
+
repeatY?: number;
|
|
35
|
+
centerX?: number;
|
|
36
|
+
centerY?: number;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export interface IThreeHDROption extends IThreeAssetOption {
|
|
40
|
+
mapping?: Mapping;
|
|
41
|
+
colorSpace?: ColorSpace;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export interface IThreeModelOption extends IThreeAssetOption {}
|
|
45
|
+
|
|
46
|
+
export interface IThreeFontOption extends IThreeAssetOption {}
|
|
47
|
+
|
|
48
|
+
export default class ThreeAssetsManager {
|
|
49
|
+
private static readonly _Assets: Map<string, Texture | DataTexture | GLTF | Font> = new Map<
|
|
50
|
+
string,
|
|
51
|
+
Texture | GLTF | Font
|
|
52
|
+
>();
|
|
53
|
+
private static readonly _ToLoadList: IThreeAssetToLoad[] = [];
|
|
54
|
+
private static _ExpectedAssetsCount = 0;
|
|
55
|
+
|
|
56
|
+
private static readonly _TextureLoader = new TextureLoader();
|
|
57
|
+
private static readonly _HDRLoader = new HDRLoader();
|
|
58
|
+
private static readonly _GltfLoader = new GLTFLoader();
|
|
59
|
+
private static readonly _DracoLoader = new DRACOLoader();
|
|
60
|
+
private static readonly _FontLoader = new FontLoader();
|
|
61
|
+
|
|
62
|
+
public static readonly OnLoad = new Action();
|
|
63
|
+
public static readonly OnProgress = new Action();
|
|
64
|
+
|
|
65
|
+
//#region Constants
|
|
66
|
+
//
|
|
67
|
+
private static readonly _DRACO_LOADER_PATH: string = 'loaders/draco/';
|
|
68
|
+
private static readonly _DEFAULT_TEXTURE_OPTION_COLOR_SPACE: ColorSpace = LinearSRGBColorSpace;
|
|
69
|
+
private static readonly _DEFAULT_TEXTURE_OPTION_WRAPPING: Wrapping = RepeatWrapping;
|
|
70
|
+
private static readonly _DEFAULT_TEXTURE_OPTION_REPEAT_X: number = 1;
|
|
71
|
+
private static readonly _DEFAULT_TEXTURE_OPTION_REPEAT_Y: number = 1;
|
|
72
|
+
private static readonly _DEFAULT_TEXTURE_OPTION_CENTER_X: number = 0.5;
|
|
73
|
+
private static readonly _DEFAULT_TEXTURE_OPTION_CENTER_Y: number = 0.5;
|
|
74
|
+
private static readonly _DEFAULT_HDR_MAPPING: Mapping = EquirectangularRefractionMapping;
|
|
75
|
+
private static readonly _DEFAULT_HDR_COLOR_SPACE: ColorSpace = LinearSRGBColorSpace;
|
|
76
|
+
private static readonly _DEFAULT_LOADED_SIZE: number = 0;
|
|
77
|
+
private static readonly _DEFAULT_TOTAL_SIZE: number = -1;
|
|
78
|
+
private static readonly _DEFAULT_TEXTURE_TOTAL_SIZE: number = 1;
|
|
79
|
+
//
|
|
80
|
+
//#endregion
|
|
81
|
+
|
|
82
|
+
public static Init(): void {
|
|
83
|
+
ThreeAssetsManager._DracoLoader.setDecoderPath(AssetUtils.GetPath(ThreeAssetsManager._DRACO_LOADER_PATH));
|
|
84
|
+
ThreeAssetsManager._GltfLoader.setDRACOLoader(ThreeAssetsManager._DracoLoader);
|
|
85
|
+
ThreeAssetsManager._AddCallbacks();
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
private static _AddCallbacks(): void {
|
|
89
|
+
ThreeAssetsManager._RemoveCallbacks();
|
|
90
|
+
LoaderManager.OnBeginLoad.add(ThreeAssetsManager._OnBeginLoad);
|
|
91
|
+
LoaderManager.OnFinishLoad.add(ThreeAssetsManager._OnFinishLoad);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
private static _RemoveCallbacks(): void {
|
|
95
|
+
LoaderManager.OnBeginLoad.remove(ThreeAssetsManager._OnBeginLoad);
|
|
96
|
+
LoaderManager.OnFinishLoad.remove(ThreeAssetsManager._OnFinishLoad);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
public static AddTexture(id: AssetId, path: string, textureOption?: IThreeTextureOption): void {
|
|
100
|
+
ThreeAssetsManager._ToLoadList.push({
|
|
101
|
+
id,
|
|
102
|
+
type: AssetType.TEXTURE,
|
|
103
|
+
path,
|
|
104
|
+
option: textureOption,
|
|
105
|
+
loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
|
|
106
|
+
totalSize: ThreeAssetsManager._DEFAULT_TEXTURE_TOTAL_SIZE,
|
|
107
|
+
});
|
|
108
|
+
ThreeAssetsManager._ExpectedAssetsCount++;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
public static AddHDR(id: AssetId, path: string, hdrOption?: IThreeHDROption): void {
|
|
112
|
+
ThreeAssetsManager._ToLoadList.push({
|
|
113
|
+
id,
|
|
114
|
+
type: AssetType.HDR,
|
|
115
|
+
path,
|
|
116
|
+
option: hdrOption,
|
|
117
|
+
loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
|
|
118
|
+
totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
|
|
119
|
+
});
|
|
120
|
+
ThreeAssetsManager._ExpectedAssetsCount++;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
public static AddModel(id: AssetId, path: string, modelOption?: IThreeModelOption): void {
|
|
124
|
+
ThreeAssetsManager._ToLoadList.push({
|
|
125
|
+
id,
|
|
126
|
+
type: AssetType.MODEL,
|
|
127
|
+
path,
|
|
128
|
+
option: modelOption,
|
|
129
|
+
loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
|
|
130
|
+
totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
|
|
131
|
+
});
|
|
132
|
+
ThreeAssetsManager._ExpectedAssetsCount++;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
public static AddFont(id: AssetId, path: string, fontOption?: IThreeFontOption): void {
|
|
136
|
+
ThreeAssetsManager._ToLoadList.push({
|
|
137
|
+
id,
|
|
138
|
+
type: AssetType.FONT,
|
|
139
|
+
path,
|
|
140
|
+
option: fontOption,
|
|
141
|
+
loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
|
|
142
|
+
totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
|
|
143
|
+
});
|
|
144
|
+
ThreeAssetsManager._ExpectedAssetsCount++;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
private static _OnBeginLoad = (): void => {
|
|
148
|
+
if (ThreeAssetsManager._ToLoadList.length === 0) {
|
|
149
|
+
ThreeAssetsManager.OnLoad.execute();
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
for (const asset of ThreeAssetsManager._ToLoadList) {
|
|
153
|
+
if (asset.type === AssetType.TEXTURE) ThreeAssetsManager._LoadTexture(asset);
|
|
154
|
+
else if (asset.type === AssetType.HDR) ThreeAssetsManager._LoadHDR(asset);
|
|
155
|
+
else if (asset.type === AssetType.MODEL) ThreeAssetsManager._LoadModel(asset);
|
|
156
|
+
else if (asset.type === AssetType.FONT) ThreeAssetsManager._LoadFont(asset);
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
private static readonly _OnFinishLoad = (): void => {
|
|
161
|
+
ThreeAssetsManager._ToLoadList.length = 0;
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
private static _LoadTexture(asset: IThreeAssetToLoad): void {
|
|
165
|
+
const option = asset.option as IThreeTextureOption | undefined;
|
|
166
|
+
ThreeAssetsManager._TextureLoader.load(
|
|
167
|
+
asset.path,
|
|
168
|
+
(texture) => {
|
|
169
|
+
texture.colorSpace = option?.colorSpace ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_COLOR_SPACE;
|
|
170
|
+
texture.wrapS = texture.wrapT = option?.wrapping ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_WRAPPING;
|
|
171
|
+
texture.repeat.set(
|
|
172
|
+
option?.repeatX ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_REPEAT_X,
|
|
173
|
+
option?.repeatY ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_REPEAT_Y
|
|
174
|
+
);
|
|
175
|
+
texture.center.set(
|
|
176
|
+
option?.centerX ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_CENTER_X,
|
|
177
|
+
option?.centerY ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_CENTER_Y
|
|
178
|
+
);
|
|
179
|
+
asset.loadedSize = asset.totalSize;
|
|
180
|
+
ThreeAssetsManager._OnLoad(asset.id, texture);
|
|
181
|
+
},
|
|
182
|
+
(event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
|
|
183
|
+
() => ThreeAssetsManager._OnError(AssetType.TEXTURE, asset.id, asset.path)
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
private static _LoadHDR(asset: IThreeAssetToLoad): void {
|
|
188
|
+
const option = asset.option as IThreeHDROption | undefined;
|
|
189
|
+
ThreeAssetsManager._HDRLoader.load(
|
|
190
|
+
asset.path,
|
|
191
|
+
(dataTexture) => {
|
|
192
|
+
dataTexture.mapping = option?.mapping ?? ThreeAssetsManager._DEFAULT_HDR_MAPPING;
|
|
193
|
+
dataTexture.colorSpace = option?.colorSpace ?? ThreeAssetsManager._DEFAULT_HDR_COLOR_SPACE;
|
|
194
|
+
ThreeAssetsManager._OnLoad(asset.id, dataTexture);
|
|
195
|
+
},
|
|
196
|
+
(event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
|
|
197
|
+
() => ThreeAssetsManager._OnError(AssetType.HDR, asset.id, asset.path)
|
|
198
|
+
);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
private static _LoadModel(asset: IThreeAssetToLoad): void {
|
|
202
|
+
ThreeAssetsManager._GltfLoader.load(
|
|
203
|
+
asset.path,
|
|
204
|
+
(model) => ThreeAssetsManager._OnLoad(asset.id, model),
|
|
205
|
+
(event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
|
|
206
|
+
() => ThreeAssetsManager._OnError(AssetType.MODEL, asset.id, asset.path)
|
|
207
|
+
);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
private static _LoadFont(asset: IThreeAssetToLoad): void {
|
|
211
|
+
ThreeAssetsManager._FontLoader.load(
|
|
212
|
+
asset.path,
|
|
213
|
+
(font) => ThreeAssetsManager._OnLoad(asset.id, font),
|
|
214
|
+
(event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
|
|
215
|
+
() => ThreeAssetsManager._OnError(AssetType.FONT, asset.id, asset.path)
|
|
216
|
+
);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
private static _OnLoad(id: AssetId, asset: Texture | GLTF | Font): void {
|
|
220
|
+
ThreeAssetsManager._Assets.set(id, asset);
|
|
221
|
+
ThreeAssetsManager.OnLoad.execute();
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
private static _OnProgress(asset: IThreeAssetToLoad, event: ProgressEvent): void {
|
|
225
|
+
if (asset.totalSize === ThreeAssetsManager._DEFAULT_TOTAL_SIZE) asset.totalSize = event.total;
|
|
226
|
+
asset.loadedSize = event.loaded;
|
|
227
|
+
ThreeAssetsManager.OnProgress.execute();
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
private static _OnError(type: AssetType, id: AssetId, path: string): void {
|
|
231
|
+
throw new Error(`ThreeAssetsManager: Failed to load ${type} with id '${id}' from path '${path}'`);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
public static GetTexture(id: AssetId): Texture {
|
|
235
|
+
const asset = ThreeAssetsManager._Assets.get(id);
|
|
236
|
+
if (!asset) throw new Error(`Texture with id '${id}' not found!`);
|
|
237
|
+
return asset as Texture;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
public static GetHDR(id: AssetId): DataTexture {
|
|
241
|
+
const asset = ThreeAssetsManager._Assets.get(id);
|
|
242
|
+
if (!asset) throw new Error(`HDR with id '${id}' not found!`);
|
|
243
|
+
return asset as DataTexture;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
public static GetModel(id: AssetId): GLTF {
|
|
247
|
+
const asset = ThreeAssetsManager._Assets.get(id);
|
|
248
|
+
if (!asset) throw new Error(`Model with id '${id}' not found!`);
|
|
249
|
+
return asset as GLTF;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
public static GetFont(id: AssetId): Font {
|
|
253
|
+
const asset = ThreeAssetsManager._Assets.get(id);
|
|
254
|
+
if (!asset) throw new Error(`Font with id '${id}' not found!`);
|
|
255
|
+
return asset as Font;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
//#region Getters
|
|
259
|
+
//
|
|
260
|
+
public static get IsLoaded(): boolean {
|
|
261
|
+
return ThreeAssetsManager._Assets.size === ThreeAssetsManager._ExpectedAssetsCount;
|
|
262
|
+
}
|
|
263
|
+
public static get TotalSize(): number {
|
|
264
|
+
let totalSize = 0;
|
|
265
|
+
for (const asset of ThreeAssetsManager._ToLoadList) {
|
|
266
|
+
totalSize += asset.totalSize;
|
|
267
|
+
}
|
|
268
|
+
return totalSize;
|
|
269
|
+
}
|
|
270
|
+
public static get LoadedSize(): number {
|
|
271
|
+
let loadedSize = 0;
|
|
272
|
+
for (const asset of ThreeAssetsManager._ToLoadList) {
|
|
273
|
+
loadedSize += asset.loadedSize;
|
|
274
|
+
}
|
|
275
|
+
return loadedSize;
|
|
276
|
+
}
|
|
277
|
+
//
|
|
278
|
+
//#endregion
|
|
279
|
+
}
|