feat: 优化结构

xjown · Apr 15, 2024 · e47ed2b · e47ed2b
1 parent e215081
commit e47ed2b
Show file tree

Hide file tree

Showing 13 changed files with 341 additions and 108 deletions.
diff --git a/index.html b/index.html
@@ -22,7 +22,150 @@
     </style>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div id="loading">
+        <style>
+          html,
+          body,
+          #app {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            position: relative;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            background-color: black;
+          }
+
+          .loaderRectangle {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0 3px;
+            height: 50px;
+          }
+
+          .loaderRectangle div {
+            width: 10px;
+            height: 16px;
+            animation: 0.9s ease-in-out infinite;
+            background: #f9f9f9;
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+          }
+
+          .loaderRectangle div:nth-child(1) {
+            animation-name: rectangleOneAnim;
+            animation-delay: 1s;
+          }
+
+          @keyframes rectangleOneAnim {
+            0% {
+              height: 15px;
+            }
+
+            40% {
+              height: 30px;
+            }
+
+            100% {
+              height: 15px;
+            }
+          }
+
+          .loaderRectangle div:nth-child(2) {
+            animation-name: rectangleTwoAnim;
+            animation-delay: 1.1s;
+          }
+
+          @keyframes rectangleTwoAnim {
+            0% {
+              height: 15px;
+            }
+
+            40% {
+              height: 40px;
+            }
+
+            100% {
+              height: 15px;
+            }
+          }
+
+          .loaderRectangle div:nth-child(3) {
+            animation-name: rectangleThreeAnim;
+            animation-delay: 1.2s;
+          }
+
+          @keyframes rectangleThreeAnim {
+            0% {
+              height: 15px;
+            }
+
+            40% {
+              height: 50px;
+            }
+
+            100% {
+              height: 15px;
+            }
+          }
+
+          .loaderRectangle div:nth-child(4) {
+            animation-name: rectangleFourAnim;
+            animation-delay: 1.3s;
+          }
+
+          @keyframes rectangleFourAnim {
+            0% {
+              height: 15px;
+            }
+
+            40% {
+              height: 40px;
+            }
+
+            100% {
+              height: 15px;
+            }
+          }
+
+          .loaderRectangle div:nth-child(5) {
+            animation-name: rectangleFiveAnim;
+            animation-delay: 1.4s;
+          }
+
+          @keyframes rectangleFiveAnim {
+            0% {
+              height: 15px;
+            }
+
+            40% {
+              height: 30px;
+            }
+
+            100% {
+              height: 15px;
+            }
+          }
+        </style>
+        <div class="loaderRectangle">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+        <div
+          style="color: #f9f9f9; text-align: center"
+          margin-top:
+          20px;
+          id="loading-text"
+        >
+          相应成功，正在加载核心文件
+        </div>
+      </div>
+    </div>
     <script type="module" src="./src/main.ts"></script>
   </body>
 </html>
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
@@ -0,0 +1,33 @@
+#loading {
+  position: fixed;
+}
+
+#loading-text {
+  margin-top: 20px;
+}
+
+#loading-text p {
+  margin: 0;
+  padding: 0;
+}
+
+@property --progress {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+.g-progress {
+  margin: auto;
+  width: 240px;
+  height: 5px;
+  border-radius: 25px;
+  background: linear-gradient(
+    90deg,
+    #fff,
+    rgb(181, 233, 233) var(--progress),
+    transparent 0
+  );
+  border: 1px solid #eee;
+  transition: 0.3s --progress;
+}
diff --git a/src/core/character/index.ts b/src/core/character/index.ts
@@ -1,4 +1,4 @@
-import { loadFBX, loadGLTF } from '@/utils';
+import type Loader from '../loader';
 import {
   CHARACTER_URL,
   CHARACTER_WALK_URL,
@@ -23,13 +23,13 @@ export default class Character {
     this._firstPerson = firstPerson;
   }
 
-  async load() {
-    const model = await loadFBX(CHARACTER_URL);
-    const walk = await loadFBX(CHARACTER_WALK_URL);
-    const jump = await loadFBX(CHARACTER_JUMP_URL);
-    const run = await loadFBX(CHARACTER_RUNNING_URL);
-    const idle = await loadFBX(CHARACTER_IDLE_URL);
-    const backward = await loadFBX(CHARACTER_BACKWARD_URL);
+  async load(handle: Loader) {
+    const model = await handle.loadFBX(CHARACTER_URL);
+    const walk = await handle.loadFBX(CHARACTER_WALK_URL);
+    const jump = await handle.loadFBX(CHARACTER_JUMP_URL);
+    const run = await handle.loadFBX(CHARACTER_RUNNING_URL);
+    const idle = await handle.loadFBX(CHARACTER_IDLE_URL);
+    const backward = await handle.loadFBX(CHARACTER_BACKWARD_URL);
 
     this.actions['walk'] = walk.animations[0];
     this.actions['jump'] = jump.animations[0];

diff --git a/src/core/events/action.ts b/src/core/events/action.ts
@@ -0,0 +1,45 @@
+export type VisibleModeType = 'pc' | 'mobile';
+export type allowKeyDownType = 'KeyW' | 'KeyS' | 'KeyA' | 'KeyD';
+export default class ActionEvent extends EventDispatcher {
+  mode: VisibleModeType = 'pc';
+  downDowning: { [key in allowKeyDownType]: boolean } = {
+    KeyW: false,
+    KeyA: false,
+    KeyD: false,
+    KeyS: false,
+  };
+  private _allowKeyDown: allowKeyDownType[] = ['KeyW', 'KeyS', 'KeyA', 'KeyD'];
+  constructor() {
+    super();
+    this._bindEvent();
+  }
+
+  private _bindEvent() {
+    if ('ontouchstart' in window) {
+      this.mode = 'mobile';
+      // ....
+    } else {
+      this.mode = 'pc';
+      window.addEventListener('keydown', this._keydown.bind(this));
+      window.addEventListener('keyup', this._keyup.bind(this));
+    }
+  }
+  private _keyup(event: KeyboardEvent) {
+    const { code } = event;
+    if (this._allowKeyDown.includes(code)) {
+      this.downDowning[code as allowKeyDownType] = false;
+    }
+  }
+  private _keydown(event: KeyboardEvent) {
+    const { code } = event;
+    if (this._allowKeyDown.includes(code)) {
+      this.downDowning[code as allowKeyDownType] = true;
+    } else {
+      this._actionEvent(code);
+    }
+  }
+
+  private _actionEvent(code: string) {
+    this.dispatchEvent({ type: 'action', message: { code } });
+  }
+}
diff --git a/src/core/events/index.ts b/src/core/events/index.ts
@@ -1,45 +1,32 @@
-export type VisibleModeType = 'pc' | 'mobile';
-export type allowKeyDownType = 'KeyW' | 'KeyS' | 'KeyA' | 'KeyD';
-export default class Events extends EventDispatcher {
-  mode: VisibleModeType = 'pc';
-  downDowning: { [key in allowKeyDownType]: boolean } = {
-    KeyW: false,
-    KeyA: false,
-    KeyD: false,
-    KeyS: false,
-  };
-  private _allowKeyDown: allowKeyDownType[] = ['KeyW', 'KeyS', 'KeyA', 'KeyD'];
-  constructor() {
-    super();
-    this._bindEvent();
-  }
+import type { EventDispatcher } from 'three';
+import ActionEvent from './action';
+import UIEvents from './ui';
+export default class Events {
+  private static _instance: Events;
+  private _events: { [key: string]: EventDispatcher } = {};
 
-  private _bindEvent() {
-    if ('ontouchstart' in window) {
-      this.mode = 'mobile';
-      // ....
+  public static getStance(): Events {
+    if (Events._instance) {
+      return Events._instance;
     } else {
-      this.mode = 'pc';
-      window.addEventListener('keydown', this._keydown.bind(this));
-      window.addEventListener('keyup', this._keyup.bind(this));
+      Events._instance = new Events();
     }
+    return Events._instance;
   }
-  private _keyup(event: KeyboardEvent) {
-    const { code } = event;
-    if (this._allowKeyDown.includes(code)) {
-      this.downDowning[code as allowKeyDownType] = false;
-    }
+
+  init() {
+    this._registerEvents(new ActionEvent());
+    this._registerEvents(new UIEvents());
   }
-  private _keydown(event: KeyboardEvent) {
-    const { code } = event;
-    if (this._allowKeyDown.includes(code)) {
-      this.downDowning[code as allowKeyDownType] = true;
-    } else {
-      this._actionEvent(code);
+
+  private _registerEvents(event: EventDispatcher) {
+    if (this._events[event.constructor.name]) {
+      return;
     }
+    this._events[event.constructor.name] = event;
   }
 
-  private _actionEvent(code: string) {
-    this.dispatchEvent({ type: 'action', message: { code } });
+  getEvent(name: string) {
+    return this._events[name];
   }
 }
diff --git a/src/core/events/ui.ts b/src/core/events/ui.ts
@@ -0,0 +1,5 @@
+export default class UIEvents extends EventDispatcher {
+  constructor() {
+    super();
+  }
+}
diff --git a/src/core/index.ts b/src/core/index.ts
@@ -8,30 +8,33 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import Events from './events';
 import Collision from './collision';
 import World from './world';
+import Ui from './ui';
 
 export default class Core {
   scene: SceneType;
   clock: ClockType;
   renderer: WebGLRendererType;
   camera: PerspectiveCameraType;
   orbit_controls: OrbitControls;
-  events: Events;
   collision: Collision;
   world: World;
+  ui: Ui;
 
   private static _instance: Core;
   constructor() {
     this.scene = new Scene();
     this.clock = new Clock();
     this.renderer = new WebGLRenderer();
     this.camera = new PerspectiveCamera();
-    this.events = new Events();
     this.orbit_controls = new OrbitControls(
       this.camera,
       this.renderer.domElement
     );
+    Events.getStance().init();
     this.collision = new Collision();
     this.world = new World(this);
+    this.ui = new Ui();
+
     this._init();
   }