Add rifle on player back when picked and not equiped

Update raindrops with pause method
Fix clouds creation without fog
Update configs unit test

src/characters/Player.ts

@@ -7,6 +7,7 @@ import type { Texture } from 'three/src/textures/Texture';
 import type { Object3D } from 'three/src/core/Object3D';
 import { Quaternion } from 'three/src/math/Quaternion';
 import { radToDeg } from 'three/src/math/MathUtils';
+import type { Bone } from 'three/src/objects/Bone';
 
 import { GameEvents } from '@/events/GameEvents';
 import { LoopOnce } from 'three/src/constants';
@@ -137,6 +138,7 @@ export default class Player extends Character
     if (this.lastAnimation === idle) return;
 
     this.running = this.moving = false;
+    this.rifle?.updatePosition(0);
     Camera.runAnimation(false);
     this.idleTime = now;
 
@@ -160,6 +162,7 @@ export default class Player extends Character
     GameEvents.dispatch('Player::Aim', false, true);
 
     this.moving = direction !== 'Idle';
+    this.rifle?.updatePosition(1);
     Camera.runAnimation(false);
 
     this.running = false;
@@ -184,6 +187,7 @@ export default class Player extends Character
       GameEvents.dispatch('Player::Run', true, true);
       this.running = this.moving = true;
       this.updateAnimation('Run', run);
+      this.rifle?.updatePosition(1.5);
 
       Camera.runAnimation(true);
       this.resetRotation(true);
@@ -358,6 +362,7 @@ export default class Player extends Character
     );
 
     this.hasRifle = this.equipRifle || rifle;
+    this.toggleRifle(!rifle);
     this.equipRifle = rifle;
   }
 
@@ -447,10 +452,30 @@ export default class Player extends Character
 
   public pickRifle (rifle: Rifle): void {
     this.rifle = rifle;
+
+    if (!this.hasRifle) {
+      this.toggleRifle(true);
+    }
+
     this.hasRifle = true;
     this.rifle.addAmmo();
   }
 
+  private toggleRifle (append: boolean): void {
+    if (!this.rifle) return;
+
+    if (append) {
+      const factor = +this.running * 0.5 + +this.moving;
+      this.spine.add(this.rifle.model);
+      this.rifle.append(factor);
+    }
+
+    else {
+      this.spine.remove(this.rifle.model);
+      this.rifle.reset();
+    }
+  }
+
   public override update (delta: number): void {
     super.update(delta);
     this.shooting && this.startShooting();
@@ -478,6 +503,10 @@ export default class Player extends Character
     return this.getModel().children[0].children[1].children as Array<SkinnedMesh>;
   }
 
+  private get spine (): Bone {
+    return this.getModel().children[0].children[0].children[0] as Bone;
+  }
+
   public get location (): PlayerLocation {
     return {
       position: this.position,

src/configs/index.ts

@@ -162,7 +162,10 @@ namespace Configs
       scale: RifleData.bullet.scale
     },
 
+    spinePosition: new Vector3(...RifleData.spinePosition),
+    spineRotation: new Euler(...RifleData.spineRotation),
     worldScale: new Vector3(...RifleData.worldScale),
+
     position: new Vector3(...RifleData.position),
     rotation: new Euler(...RifleData.rotation),
 

src/configs/rifle.json

@@ -1,7 +1,9 @@
 {
   "rotation": [1.7707963267948965, 3.061592653589793, -0.41],
+  "spinePosition": [-10.0, 22.5, -20.0],
   "worldScale": [0.005, 0.005, 0.005],
-  "position": [-26, 1, -5.75],
+  "spineRotation": [0.0, 0.0, -1.0],
+  "position": [-26.0, 1.0, -5.75],
   "scale": [0.29, 0.29, 0.29],
 
   "spread": [0.0025, 0.0025],

src/environment/Clouds.ts

@@ -44,7 +44,7 @@ export default class Clouds
 
   public constructor () {
     this.isLighting && this.createLighting();
-    !this.useFog && this.createClouds();
+    (this.isLighting || !this.useFog) && this.createClouds();
   }
 
   private createLighting (): void {

src/environment/Raindrops.ts

@@ -13,7 +13,6 @@ export default class Raindrops
     private readonly background: HTMLCanvasElement,
     private readonly canvas: HTMLCanvasElement
   ) {
-    RAF.add(this.onUpdate);
     Viewport.addResizeCallback(this.onResize);
 
     this.raindrops = new Raindrop({
@@ -39,6 +38,8 @@ export default class Raindrops
   }
 
   private start (): void {
+    RAF.add(this.onUpdate);
+
     this.raindrops.start().then(() => {
       this.canvas.style.opacity = '1';
 
@@ -63,6 +64,18 @@ export default class Raindrops
     this.canvas.width = width;
   }
 
+  public pause (paused: boolean): void {
+    if (paused) {
+      this.raindrops.stop();
+      RAF.remove(this.onUpdate);
+    }
+
+    else {
+      RAF.add(this.onUpdate);
+      this.raindrops.start();
+    }
+  }
+
   public dispose (): void {
     Viewport.removeResizeCallback(this.onResize);
     RAF.remove(this.onUpdate);

src/managers/Application.ts

@@ -105,6 +105,7 @@ export default class Application
       this.toggleAudio(paused);
     }
 
+    this.raindrops?.pause(paused);
     this.manager.pause = paused;
     RAF.pause = paused;
   }

src/weapons/Rifle.ts

@@ -24,12 +24,16 @@ export default class Rifle extends Weapon
 
   private readonly halfLightPower = +Settings.getEnvironmentValue('physicalLights') * 70 + 5;
 
+  private readonly spinePosition = Configs.Rifle.spinePosition as Vector3;
+  private readonly spineRotation = Configs.Rifle.spineRotation as Euler;
+
   private readonly position = Configs.Rifle.position as Vector3;
   private readonly rotation = Configs.Rifle.rotation as Euler;
   private readonly maxStock = Configs.Rifle.maxStock;
 
   private clone?: Assets.GLTF;
   private reloading = false;
+  private appended = false;
 
   private spawnTime = 0.0;
   private spawned = false;
@@ -140,9 +144,28 @@ export default class Rifle extends Weapon
     this.spawned = true;
   }
 
-  private reset (): void {
+  public updatePosition (factor: number): void {
+    this.appended && anime({
+      targets: this.model.position,
+      duration: +!factor * 100,
+      x: factor * 10.0 - 10.0,
+      easing: 'linear'
+    });
+  }
+
+  public append (factor: number): void {
+    this.model.position.copy(this.spinePosition);
+    this.model.rotation.copy(this.spineRotation);
+
+    this.appended = true;
+    this.updatePosition(factor);
+  }
+
+  public reset (): void {
     this.model.position.copy(this.position);
     this.model.rotation.copy(this.rotation);
+
+    this.appended = false;
   }
 
   public get onStage (): boolean {

tests/Config.spec.ts

@@ -222,6 +222,9 @@ describe('Configs', () => {
   });
 
   test('Rifle', () => {
+    const rifleSpinePosition = new Vector3(...Rifle.spinePosition);
+    const rifleSpineRotation = new Euler(...Rifle.spineRotation);
+
     const riflePosition = new Vector3(...Rifle.position);
     const rifleRotation = new Euler(...Rifle.rotation);
 
@@ -238,6 +241,12 @@ describe('Configs', () => {
     expect(typeof Configs.Rifle.maxStock).toStrictEqual('number');
     expect(typeof Configs.Rifle.ammo).toStrictEqual('number');
 
+    expect(Configs.Rifle.spinePosition).toStrictEqual(rifleSpinePosition);
+    expect(Configs.Rifle.spinePosition).toBeInstanceOf(Vector3);
+
+    expect(Configs.Rifle.spineRotation).toStrictEqual(rifleSpineRotation);
+    expect(Configs.Rifle.spineRotation).toBeInstanceOf(Euler);
+
     expect(Configs.Rifle.position).toStrictEqual(riflePosition);
     expect(Configs.Rifle.position).toBeInstanceOf(Vector3);