feat: 新增武器

xjown · May 20, 2024 · d21cc02 · d21cc02
1 parent b863dcc
commit d21cc02
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -28,26 +28,30 @@
         display: none;
       }
       #tips {
-        padding: 10px;
         z-index: 3;
         cursor: pointer;
         display: none;
       }
       .weapon {
+        display: none;
+      }
+      .weapon-gun {
         display: flex;
         color: #fff;
         font-size: 12px;
         align-items: center;
-        display: none;
+        border-radius: 3%;
+        padding: 10px;
+        border-bottom: solid 1px #2f2f2f;
       }
-      .weapon:hover {
+      .weapon-gun:hover {
         background-color: rgb(255, 230, 0);
         color: #000;
       }
-      .weapon div {
+      .weapon-gun div {
         margin: 0 5px;
       }
-      .weapon-left {
+      .weapon-gun_left {
         width: 50px;
         height: 50px;
         background-color: #585858;
@@ -56,24 +60,37 @@
         text-align: center;
         font-size: 30px;
       }
-      .weapon-right > p {
+      .weapon-gun_right > p {
         margin: 0;
         font-size: 10px;
+        line-height: 1.5;
+        letter-spacing: 1px;
       }
-      .weapon-right > p:first-child {
+      .weapon-gun_right > p:first-child {
         font-size: 16px;
+        font-weight: bold;
       }
     </style>
   </head>
   <body>
     <div id="mask">
       <div id="tips">
         <div class="weapon">
-          <div class="weapon-left">F</div>
-          <div class="weapon-right">
-            <p>AK47</p>
-            <p>♾️/30</p>
-            <p>按F键或点击拾取</p>
+          <div class="weapon-gun">
+            <div class="weapon-gun_left">F</div>
+            <div class="weapon-gun_right">
+              <p>AK47</p>
+              <p>按F键或点击拾取</p>
+            </div>
+          </div>
+          <div class="weapon-gun">
+            <div class="weapon-gun_left">
+              <img src="./public/7.62.png" height="50%" width="60%" />
+            </div>
+            <div class="weapon-gun_right">
+              <p>7.62毫米</p>
+              <p>30 / ♾️</p>
+            </div>
           </div>
         </div>
       </div>

diff --git a/public/7.62.png b/public/7.62.png
diff --git a/src/assets/ak47/muzzle_flash.glb b/src/assets/ak47/muzzle_flash.glb
diff --git a/src/assets/sounds/ak47_shot.wav b/src/assets/sounds/ak47_shot.wav
diff --git a/src/configs/index.ts b/src/configs/index.ts
@@ -18,6 +18,14 @@ export const LIGHT_FLOW_TEXTURE = new URL(
 export const GUN = new URL('../assets/ak47/gun.glb', import.meta.url).href;
 export const GUN_HAND = new URL('../assets/ak47/ak47.glb', import.meta.url)
   .href;
+export const GUN_FLASH = new URL(
+  '../assets/ak47/muzzle_flash.glb',
+  import.meta.url
+).href;
+export const GUN_SOUND = new URL(
+  '../assets/sounds/ak47_shot.wav',
+  import.meta.url
+).href;
 
 export const CHARACTER_WALK_URL = new URL(
   '../assets/animates/Walking_31_k50.fbx',

diff --git a/src/core/index.ts b/src/core/index.ts
@@ -1,4 +1,5 @@
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { AudioListener } from 'three';
 
 import Events from './events';
 import { STATIC_LOADED, UI_EVENT_NAME } from '@/configs';
@@ -30,6 +31,7 @@ export default class Core {
   world: World;
   physicsWorld!: Ammo.btDiscreteDynamicsWorld;
   entityCollection!: EntityCollection;
+  listen: AudioListener;
 
   constructor() {
     this.scene = new Scene();
@@ -40,6 +42,7 @@ export default class Core {
       this.camera,
       this.renderer.domElement
     );
+    this.listen = new AudioListener();
     Events.getStance().init();
     this.world = new World(this);
     AmmoHelper.init(() => this._init());
@@ -104,11 +107,14 @@ export default class Core {
     this.renderer.toneMapping = ACESFilmicToneMapping;
     this.renderer.shadowMap.enabled = true;
     this.renderer.outputColorSpace = SRGBColorSpace;
-    this.camera.position.set(0, 0, 1);
+
     this.orbit_controls.dampingFactor = 0.2;
     this.orbit_controls.enableZoom = false;
     this.orbit_controls.enablePan = false;
 
+    this.camera.position.set(0, 0, 1);
+    this.camera.add(this.listen);
+
     this._RenderRespect();
 
     window.addEventListener('resize', () => {

diff --git a/src/core/loader/index.ts b/src/core/loader/index.ts
@@ -12,11 +12,13 @@ export default class Loader {
   private _gltfHandle: GLTFLoader;
   private _fbxhandle: FBXLoader;
   private _textureHandle: TextureLoader;
+  private _audioHandle: AudioLoader;
   constructor() {
     this._loadOnprogress();
     this._fbxhandle = new FBXLoader();
     this._gltfHandle = new GLTFLoader();
     this._textureHandle = new TextureLoader();
+    this._audioHandle = new AudioLoader();
   }
 
   async loadGLTF(url: string) {
@@ -27,6 +29,10 @@ export default class Loader {
     return this._fbxhandle.loadAsync(url);
   }
 
+  async loadAudio(url: string) {
+    return this._audioHandle.loadAsync(url);
+  }
+
   async loadTexture(url: string) {
     return this._textureHandle.loadAsync(url);
   }

diff --git a/src/core/player/PlayControl.ts b/src/core/player/PlayControl.ts
@@ -3,7 +3,9 @@ import { ACTION_EVENT_NAME, KEY_CODE } from '@/configs';
 import Component from '@/core/Component';
 import { Man } from '../character';
 import { Ammo } from '@/core/ammo';
+import Weapon from './Weapon';
 
+import UI from '../ui';
 import type Core from '../index';
 import type ActionEvent from '../events/action';
 import type Collision from '../collision';
@@ -37,6 +39,8 @@ export default class PlayControl extends Component {
   private _worldEntity!: World;
   private _body!: Ammo.btRigidBody;
   private _physicsWorld!: PlayPhysics;
+  private _weapon: Weapon;
+  private _ui!: UI;
 
   public position: Vector3Type;
   public character: Man;
@@ -54,12 +58,14 @@ export default class PlayControl extends Component {
     this._currentAction = 'idle';
     this._downDistance = new Vector3(0, 0, 0);
     this._onFloor = true;
+    this._weapon = new Weapon(instance, this._event);
 
     // default Character
     this.character = new Man();
   }
 
   initialize() {
+    this._ui = this.FindEntity('ui')?.getComponent('ui') as UI;
     this._physicsWorld = this.getComponent('playPhysics')! as PlayPhysics;
     this._worldEntity = this.FindEntity('world')?.getComponent(
       'world'
@@ -73,7 +79,12 @@ export default class PlayControl extends Component {
 
   async load() {
     const model = await this.character.load();
+    const { ak_scene, flash_scene } = await this._weapon.load();
+
     this._instance.scene.add(model);
+    this._instance.scene.add(ak_scene);
+    this._instance.scene.add(flash_scene);
+
     return model;
   }
 

diff --git a/src/core/player/Weapon.ts b/src/core/player/Weapon.ts
@@ -0,0 +1,48 @@
+import Loader from '../loader';
+import { Audio } from 'three';
+import { GUN_HAND, GUN_FLASH, GUN_SOUND, KEY_CODE } from '@/configs';
+
+import type Core from '../index';
+import type ActionEvent from '../events/action';
+
+export default class Weapon extends Loader {
+  public name: string = 'Weapon';
+
+  private _sound: Audio;
+  private _actionEvent: ActionEvent;
+
+  constructor(instance: Core, event: ActionEvent) {
+    super();
+    this._sound = new Audio(instance.listen);
+    this._actionEvent = event;
+
+    this._setupEvents();
+  }
+
+  async load() {
+    const { scene: ak_scene } = await this.loadGLTF(GUN_HAND);
+    const { scene: flash_scene } = await this.loadGLTF(GUN_FLASH);
+    const sound = await this.loadAudio(GUN_SOUND);
+    ak_scene.position.set(0, 5, 0);
+    ak_scene.scale.set(0.4, 0.4, 0.4);
+
+    ak_scene.visible = false;
+    flash_scene.visible = false;
+
+    this._sound.setBuffer(sound);
+
+    return { ak_scene, flash_scene };
+  }
+
+  _setupEvents() {
+    this._actionEvent.addEventListener(KEY_CODE, ({ message }) => {
+      const { code, event } = message;
+      if (event && event.repeat) return;
+      switch (code) {
+        case 'KeyF':
+          console.log(11);
+          break;
+      }
+    });
+  }
+}
diff --git a/src/core/ui/index.ts b/src/core/ui/index.ts
@@ -34,11 +34,11 @@ export default class UI extends Component {
     const el = document.querySelector<HTMLElement>('.weapon')!;
     this.mask = visible;
     this.tip = visible;
-    el.style.display = visible ? 'flex' : 'none';
+    el.style.display = visible ? 'block' : 'none';
   }
   get weaponTip() {
     const el = document.querySelector<HTMLElement>('.weapon')!;
-    return el.style.display === 'flex';
+    return el.style.display === 'block';
   }
 
   set mask(visible: boolean) {

diff --git a/src/core/world/World.ts b/src/core/world/World.ts
@@ -77,8 +77,5 @@ export default class World extends Component {
   update(time: number) {
     this._effect.update(time);
     this._weapon.rotation.y += 0.005;
-
-    // debug
-    // this._instance.scene.add(this.collision.collisionsHelper);
   }
 }
diff --git a/src/core/world/WorldPhysics.ts b/src/core/world/WorldPhysics.ts
@@ -7,10 +7,10 @@ import type UI from '../ui';
 
 export default class WorldPhysics extends Component {
   private _world!: World;
-  private _physicsBody!: Ammo.btGhostObject;
   private _playPhysics!: PlayPhysics;
   private _ui!: UI;
 
+  public weaponPhysics!: Ammo.btGhostObject;
   public name: string = 'worldPhysics';
   public physicsWorld: Ammo.btDiscreteDynamicsWorld;
 
@@ -27,7 +27,7 @@ export default class WorldPhysics extends Component {
     this._ui = this.FindEntity('ui')!.getComponent('ui') as UI;
 
     // weapon
-    this._physicsBody = AmmoHelper.createGhostBody(
+    this.weaponPhysics = AmmoHelper.createGhostBody(
       new Ammo.btCylinderShape(
         new Ammo.btVector3(
           this._world.ak.size.radius,
@@ -43,7 +43,7 @@ export default class WorldPhysics extends Component {
     );
 
     this.physicsWorld.addCollisionObject(
-      this._physicsBody,
+      this.weaponPhysics,
       AmmoHelper.collisionFilterGroup.SensorTrigger
     );
 
@@ -70,15 +70,16 @@ export default class WorldPhysics extends Component {
     this.physicsWorld.addRigidBody(body);
   }
 
-  physicsUpdate(world: Ammo.btDynamicsWorld, timeStep: number): void {
-    this._ui.weaponTip = false;
+  physicsUpdate(): void {
     if (
       AmmoHelper.IsTriggerOverlapping(
-        this._physicsBody,
+        this.weaponPhysics,
         this._playPhysics.body!
       )
     ) {
-      this._ui.weaponTip = true;
+      if (!this._ui.weaponTip) this._ui.weaponTip = true;
+    } else {
+      if (this._ui.weaponTip) this._ui.weaponTip = false;
     }
   }
 }