small clean up

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build:prod": "tsc && webpack --mode=production",
+    "build:prod": "NODE_ENV=production tsc && webpack --mode=production",
+    "server": "NODE_ENV=production node dist/server/",
     "watch": "concurrently \"tsc -w\" \"nodemon dist/server/\" \"webpack --mode=development -w\""
   },
   "keywords": [],
@@ -15,7 +16,6 @@
     "connect-redis": "^6.1.3",
     "express": "^4.17.3",
     "express-session": "^1.17.2",
-    "jimp": "^0.16.1",
     "passport": "^0.5.2",
     "passport-icynet": "^0.0.2",
     "redis": "^3.1.2",

src/client/game.ts

@@ -25,7 +25,7 @@ export class Game {
 
   public renderer = new Renderer();
 
-  private videoTest = new VideoPlayer();
+  private videoTest = new VideoPlayer(24, 12);
 
   constructor(public socket: Socket) {}
 
@@ -56,7 +56,7 @@ export class Game {
       this.socket.emit('chat-send', message);
     });
 
-    this.renderer.registerRenderFunction((dt: number) => {
+    this.renderer.registerUpdateFunction((dt: number) => {
       this.update(dt);
     });
   }

src/client/object/camera.ts

@@ -56,6 +56,9 @@ export class ThirdPersonCamera {
         this.panning = false;
       }
     },
+    mouseleave: (e: MouseEvent) => {
+      this.panning = false;
+    },
     mousemove: (e: MouseEvent) => this.dragEvent(e.clientX, e.clientY),
     wheel: (e: WheelEvent) => {
       e.deltaY < 0 ? (this.distance /= 1.2) : (this.distance *= 1.2);

src/client/object/other/video-player.ts

@@ -17,6 +17,8 @@ export class VideoPlayer {
   public playable: boolean;
   public geometry!: PlaneGeometry;
 
+  constructor(public width: number, public height: number) {}
+
   initialize() {
     this.texture = new VideoTexture(this.video);
     this.material = new MeshBasicMaterial({
@@ -24,8 +26,9 @@ export class VideoPlayer {
       side: FrontSide,
       toneMapped: false,
     });
-    this.geometry = new PlaneGeometry(24, 12);
+    this.geometry = new PlaneGeometry(this.width, this.height);
     this.mesh = new Mesh(this.geometry, this.material);
+
     this.video.addEventListener('canplay', () => {
       this.playable = true;
     });
@@ -40,6 +43,7 @@ export class VideoPlayer {
   }
 
   public setSource(source: string, autoplay = false) {
+    this.video.pause();
     if (this.hls) {
       this.hls.stopLoad();
       this.hls.destroy();
@@ -64,6 +68,8 @@ export class VideoPlayer {
         this.hls.on(Hls.Events.ERROR, (e, d) => {
           if (d.fatal) {
             this.playable = false;
+            this.video.pause();
+            this.hls.stopLoad();
           }
         });
         return;

src/client/object/player-entity.ts

@@ -1,13 +1,12 @@
 import { IcyNetUser } from '../../common/types/user';
-import * as THREE from 'three';
 import { PonyEntity } from './pony';
 import {
-  CharacterPacket,
   FullStatePacket,
   PositionUpdatePacket,
 } from '../../common/types/packet';
 import { CanvasUtils } from './canvas-utils';
 import { ChatBubble } from './chat-bubble';
+import { Vector3, Scene, Euler } from 'three';
 
 const chatBuilder = new CanvasUtils({
   rounded: true,
@@ -20,19 +19,19 @@ export class PlayerEntity extends PonyEntity {
   private _lastFrame: any = null;
   private _chats: ChatBubble[] = [];
 
-  private _p1 = new THREE.Vector3();
-  private _p2 = new THREE.Vector3();
-  private _q1 = new THREE.Vector3();
-  private _q2 = new THREE.Vector3();
+  private _p1 = new Vector3();
+  private _p2 = new Vector3();
+  private _q1 = new Vector3();
+  private _q2 = new Vector3();
 
-  private _pf = new THREE.Vector3();
-  private _qf = new THREE.Vector3();
+  private _pf = new Vector3();
+  private _qf = new Vector3();
 
   constructor(public user: IcyNetUser) {
     super();
   }
 
-  public static fromUser(user: IcyNetUser, scene: THREE.Scene): PlayerEntity {
+  public static fromUser(user: IcyNetUser, scene: Scene): PlayerEntity {
     const entity = new PlayerEntity(user);
     entity.initialize();
     entity.addNameTag(user.display_name);
@@ -40,15 +39,15 @@ export class PlayerEntity extends PonyEntity {
     return entity;
   }
 
-  public setVelocity(velocity: THREE.Vector3) {
+  public setVelocity(velocity: Vector3) {
     this.velocity.copy(velocity);
   }
 
-  public setAngularVelocity(velocity: THREE.Vector3) {
+  public setAngularVelocity(velocity: Vector3) {
     this.angularVelocity.copy(velocity);
   }
 
-  public setPosition(pos: THREE.Vector3) {
+  public setPosition(pos: Vector3) {
     this.container.position.copy(pos);
   }
 
@@ -69,7 +68,7 @@ export class PlayerEntity extends PonyEntity {
 
     this._chats.forEach((item) => {
       const scaled = item.tag.scale.y;
-      item.tag.position.add(new THREE.Vector3(0, scaled, 0));
+      item.tag.position.add(new Vector3(0, scaled, 0));
     });
 
     this._chats.unshift(newChat);
@@ -94,11 +93,9 @@ export class PlayerEntity extends PonyEntity {
     }, 5000);
   }
 
-  public setRotation(rot: THREE.Vector3 | THREE.Euler) {
+  public setRotation(rot: Vector3 | Euler) {
     this.container.rotation.copy(
-      rot instanceof THREE.Euler
-        ? rot
-        : new THREE.Euler(rot.x, rot.y, rot.z, 'XYZ'),
+      rot instanceof Euler ? rot : new Euler(rot.x, rot.y, rot.z, 'XYZ'),
     );
   }
 
@@ -123,22 +120,22 @@ export class PlayerEntity extends PonyEntity {
   private setFromPacket(packet: FullStatePacket | PositionUpdatePacket) {
     if ((packet as FullStatePacket).velocity) {
       this.setVelocity(
-        new THREE.Vector3().fromArray((packet as FullStatePacket).velocity),
+        new Vector3().fromArray((packet as FullStatePacket).velocity),
       );
     }
 
     if ((packet as FullStatePacket).angular) {
       this.setAngularVelocity(
-        new THREE.Vector3().fromArray((packet as FullStatePacket).angular),
+        new Vector3().fromArray((packet as FullStatePacket).angular),
       );
     }
 
     if (packet.position) {
-      this.setPosition(new THREE.Vector3().fromArray(packet.position));
+      this.setPosition(new Vector3().fromArray(packet.position));
     }
 
     if (packet.rotation) {
-      this.setRotation(new THREE.Euler().fromArray(packet.rotation));
+      this.setRotation(new Euler().fromArray(packet.rotation));
     }
 
     if (packet.animState) {

src/client/object/player.ts

@@ -1,8 +1,7 @@
-import * as THREE from 'three';
 import { IcyNetUser } from '../../common/types/user';
 import { Socket } from 'socket.io-client';
 import { PonyEntity } from './pony';
-import { Vector2 } from 'three';
+import { Scene, Vector2, Vector3 } from 'three';
 
 export class Player extends PonyEntity {
   public keydownMap: { [x: string]: boolean } = {};
@@ -11,18 +10,18 @@ export class Player extends PonyEntity {
   /**
    * Normal vector of the currently faced direction
    */
-  private _lookVector = new THREE.Vector3();
+  private _lookVector = new Vector3();
 
   /**
    * Direction of the current movement.
    * X axis controls angular velocity, Y axis controls linear velocity direction by world coordinates.
    */
-  private _direction = new THREE.Vector2();
+  private _direction = new Vector2();
 
   /**
    * Joystick or other external movement usage.
    */
-  private _externalDirection = new THREE.Vector2();
+  private _externalDirection = new Vector2();
 
   /**
    * Was external movement used this tick
@@ -43,7 +42,7 @@ export class Player extends PonyEntity {
     super();
   }
 
-  public static fromUser(user: IcyNetUser, scene: THREE.Scene): Player {
+  public static fromUser(user: IcyNetUser, scene: Scene): Player {
     const entity = new Player(user);
     entity.initialize();
     scene.add(entity.container);
@@ -75,7 +74,7 @@ export class Player extends PonyEntity {
   }
 
   public moveCharacter(dt: number) {
-    const vector = new THREE.Vector2();
+    const vector = new Vector2();
     const wasExternalForce = this._externalForce;
     this._externalForce = false;
 

src/client/object/pony-loader.ts

@@ -1,6 +1,5 @@
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
-import { Color, Mesh, MeshStandardMaterial } from 'three';
 
 // Instantiate a loader
 const loader = new GLTFLoader();
@@ -27,11 +26,6 @@ class PonyModel {
           // temp: disable frustum culling for eyes
           this.ponyModel.children[0].children[2].frustumCulled = false;
 
-          // (
-          //   (this.ponyModel.children[0].children[1] as Mesh)
-          //     .material as MeshStandardMaterial
-          // ).color = new Color(0xffffff);
-
           resolve(gltf.scene);
 
           // gltf.animations; // Array<THREE.AnimationClip>

src/client/object/pony.ts

@@ -1,10 +1,17 @@
 import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
-import * as THREE from 'three';
 import modelLoaderInstance from './pony-loader';
 import { CharacterPacket, FullStatePacket } from '../../common/types/packet';
 import { NameTag } from './nametag';
 import { CanvasUtils } from './canvas-utils';
-import { Mesh, MeshStandardMaterial, Color } from 'three';
+import {
+  Mesh,
+  MeshStandardMaterial,
+  Color,
+  AnimationAction,
+  AnimationMixer,
+  Object3D,
+  Vector3,
+} from 'three';
 
 const nameTagBuilder = new CanvasUtils({
   fill: false,
@@ -15,15 +22,15 @@ const nameTagBuilder = new CanvasUtils({
 });
 
 export class PonyEntity {
-  public velocity = new THREE.Vector3(0, 0, 0);
-  public angularVelocity = new THREE.Vector3(0, 0, 0);
-  public mixer!: THREE.AnimationMixer;
-  public container!: THREE.Object3D;
-  public model!: THREE.Object3D;
-  public material!: THREE.MeshStandardMaterial;
+  public velocity = new Vector3(0, 0, 0);
+  public angularVelocity = new Vector3(0, 0, 0);
+  public mixer!: AnimationMixer;
+  public container!: Object3D;
+  public model!: Object3D;
+  public material!: MeshStandardMaterial;
   public walkAnimationState = 0;
-  public idleAction: THREE.AnimationAction;
-  public walkAction: THREE.AnimationAction;
+  public idleAction: AnimationAction;
+  public walkAction: AnimationAction;
   public nameTag?: NameTag;
   public changes: FullStatePacket = {};
 
@@ -34,18 +41,18 @@ export class PonyEntity {
         .material as MeshStandardMaterial
     ).clone();
     (this.model.children[0].children[1] as Mesh).material = this.material;
-    this.mixer = new THREE.AnimationMixer(this.model);
+    this.mixer = new AnimationMixer(this.model);
     this.idleAction = this.mixer.clipAction(modelLoaderInstance.animations[0]);
     this.walkAction = this.mixer.clipAction(modelLoaderInstance.animations[2]);
     this.idleAction.play();
-    this.container = new THREE.Object3D();
+    this.container = new Object3D();
     this.container.add(this.model);
   }
 
   update(dt: number) {
     this.container.position.add(this.velocity.clone().multiplyScalar(dt));
     this.container.rotation.setFromVector3(
-      new THREE.Vector3(
+      new Vector3(
         this.container.rotation.x,
         this.container.rotation.y,
         this.container.rotation.z,

src/client/renderer.ts

@@ -1,17 +1,27 @@
-import * as THREE from 'three';
+import {
+  Scene,
+  PerspectiveCamera,
+  WebGLRenderer,
+  DirectionalLight,
+  AmbientLight,
+  Mesh,
+  Clock,
+  BoxGeometry,
+  MeshToonMaterial,
+} from 'three';
 
 export class Renderer {
-  public scene!: THREE.Scene;
-  public camera!: THREE.PerspectiveCamera;
-  public renderer!: THREE.WebGLRenderer;
+  public scene!: Scene;
+  public camera!: PerspectiveCamera;
+  public renderer!: WebGLRenderer;
 
-  public sun!: THREE.DirectionalLight;
-  public ambient!: THREE.AmbientLight;
+  public sun!: DirectionalLight;
+  public ambient!: AmbientLight;
 
-  public ground!: THREE.Mesh;
+  public ground!: Mesh;
 
-  private clock = new THREE.Clock();
-  private _renderFn?: (dt: number) => void;
+  private clock = new Clock();
+  private _updateFn?: (dt: number) => void;
 
   constructor() {}
 
@@ -20,30 +30,30 @@ export class Renderer {
   }
 
   initialize() {
-    this.scene = new THREE.Scene();
-    this.camera = new THREE.PerspectiveCamera(
+    this.scene = new Scene();
+    this.camera = new PerspectiveCamera(
       75,
       window.innerWidth / window.innerHeight,
       0.1,
       1000,
     );
 
-    this.renderer = new THREE.WebGLRenderer();
+    this.renderer = new WebGLRenderer();
     this.renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(this.renderer.domElement);
 
     this.renderer.setClearColor(0x00ddff);
 
-    this.sun = new THREE.DirectionalLight(0xffffff);
+    this.sun = new DirectionalLight(0xffffff);
     this.sun.position.set(10, 10, 0);
     this.scene.add(this.sun);
 
-    this.ambient = new THREE.AmbientLight(0xffffff, 0.5);
+    this.ambient = new AmbientLight(0xffffff, 0.5);
     this.scene.add(this.ambient);
 
-    this.ground = new THREE.Mesh(
-      new THREE.BoxGeometry(100, 1, 100, 10, 1, 10),
-      new THREE.MeshToonMaterial({ color: 0x32a852 }),
+    this.ground = new Mesh(
+      new BoxGeometry(100, 1, 100, 10, 1, 10),
+      new MeshToonMaterial({ color: 0x32a852 }),
     );
 
     this.ground.position.set(0, -0.5, 0);
@@ -64,14 +74,14 @@ export class Renderer {
     requestAnimationFrame(() => this.render());
 
     const delta = this.clock.getDelta();
-    if (this._renderFn) {
-      this._renderFn(delta);
+    if (this._updateFn) {
+      this._updateFn(delta);
     }
 
     this.renderer.render(this.scene, this.camera);
   }
 
-  public registerRenderFunction(fn: (dt: number) => void) {
-    this._renderFn = fn;
+  public registerUpdateFunction(fn: (dt: number) => void) {
+    this._updateFn = fn;
   }
 }

webpack.config.js

@@ -32,5 +32,5 @@ module.exports = {
     path: path.resolve(__dirname, 'dist', 'public'),
     filename: 'bundle.js',
   },
-  devtool: 'source-map'
+  devtool: process.env.NODE_ENV !== 'production' ? 'source-map' : undefined,
 };