Freecam

package.json

@@ -1,6 +1,6 @@
 {
   "name": "replay-viewer",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Rocket League replay viewer React component and tooling",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

src/builders/GameBuilder.ts

@@ -3,6 +3,7 @@ import { LoadingManager } from "three"
 import CameraManager from "../managers/CameraManager"
 import DataManager from "../managers/DataManager"
 import { GameManager } from "../managers/GameManager"
+import KeyManager from "../managers/KeyManager"
 import { ReplayData } from "../models/ReplayData"
 import { ReplayMetadata } from "../models/ReplayMetadata"
 import FPSClock from "../utils/FPSClock"
@@ -31,6 +32,7 @@ const defaultGameBuilder = async ({
   defaultAnimationBuilder(replayData, sceneManager.players, sceneManager.ball)
   DataManager.init({ replayData, replayMetadata })
   CameraManager.init()
+  KeyManager.init()
 
   return GameManager.init({
     clock,

src/builders/field/addCameras.ts

@@ -4,6 +4,7 @@ import { DEFAULT_CAMERA_OPTIONS } from "../../constants/defaultCameraOptions"
 import {
   ABOVE_FIELD_CAMERA,
   BLUE_GOAL_CAMERA,
+  FREE_CAMERA,
   ORANGE_GOAL_CAMERA,
   ORTHOGRAPHIC,
 } from "../../constants/gameObjectNames"
@@ -24,6 +25,11 @@ export const addCameras = (scene: Scene) => {
   aboveFieldCamera.position.set(0, 2000, 0)
   scene.add(aboveFieldCamera)
 
+  const freeCamera = new PerspectiveCamera(...DEFAULT_CAMERA_OPTIONS)
+  freeCamera.name = FREE_CAMERA
+  freeCamera.position.set(0, 1000, 0)
+  scene.add(freeCamera)
+
   const generateOrthographicCamera = () => {
     const camera = new OrthographicCamera(-320, 320, 240, -240, 0.1, 20000)
     camera.zoom = 0.05
@@ -68,6 +74,7 @@ export const addCameras = (scene: Scene) => {
     blueGoalCamera,
     orangeGoalCamera,
     aboveFieldCamera,
+    freeCamera,
     ...orthographicCameras,
   ]
 }

src/constants/eventNames.ts

@@ -3,3 +3,4 @@ export const CAMERA_FRAME_UPDATE = "CAMERA_FRAME_UPDATE"
 export const PLAY_PAUSE = "PLAY_PAUSE"
 export const FRAME = "FRAME"
 export const CANVAS_RESIZE = "CANVAS_RESIZE"
+export const KEY_CONTROL = "KEY_CONTROL"

src/constants/gameObjectNames.ts

@@ -6,6 +6,7 @@ export const GROUP_SUFFIX = "-group"
 export const BLUE_GOAL_CAMERA = "Blue Goal Camera"
 export const ORANGE_GOAL_CAMERA = "Orange Goal Camera"
 export const ABOVE_FIELD_CAMERA = "Above Field Camera"
+export const FREE_CAMERA = "Free Camera"
 export const ORTHOGRAPHIC = {
   ABOVE_FIELD: "ORTHOGRAPHIC_ABOVE_FIELD",
   BLUE_LEFT: "ORTHOGRAPHIC_BLUE_LEFT",