new three js (#1153)

* injext three

* init injection of new threejs

* update biome calc

* Add in felt center

* attempting to find entites

* three

* clones changed to instances, added helpers, updated models

* three refactoring

* input manager

* Revert listner

* WIP instanced chunks

* bounding sphere

* instances count

* missing hexes bug

* method rename

* update camera, some code removal

* rotation

* work on hexception

* cleanup

* hexception work

* new map controls and updated chunk loading

* chunk load optimize

* old biomes

* new models

* models rename

* enable old models (tmp fix)

* double click transition

* slow load fix

* lil gui and lights

* Draco loader, room env

* move camera to col row

* move camera to url location

* switch scenes

* remove hexception lights

* names refactor

* new models

* optimized models

* worldmap cache

* shadows

* shadowmap

* renderer and scenes separation refactor

* hexception surround biomes

* surrounding biomes and pillars

* fixes

* navigation

* hexception buildings WIP

* add systems

* added knights

* using instanced mesh for armies

* fix bugs

* fixes, animation test

* fix model translation

* add update in worldmap update

* add structure manager

* fix: castles and positioning function

* changes in army manager

* add correct hex coords

* fix: hide biome on occupied cells

* make army work with horse model

* experiment with unique mixer and animation action

* add system manager

* select army on click

* add highlighted hex on click

* add tile system

* add army movement manager

* refactor travel paths

* check if hovering on highlighted hex

* add action info + entity unselect

* remove action info when unselect

* only select if yours

* define path on army move click

* add explore on click

* comment out automatic movement

* remove events firing up 2x

* fix explore

* add travel

* clean

* refactoring

* fix action info

* Add background to map

* add labels

* clean

* move army in right direction

* add border hexes

* add border hex manager

* create highlight hex manager

* name changes

* fix border offset

* fixes #1130 by fixing hex from world position

* use instance mesh for border hexes

* fix border issues + render transparent hexes on explored

* fixes #1129 by only allow raycast on interactive hex

* use react ActionInfo #1135

* fixes #1135

* refactor

* chnage border color

* fix build

* fix travel path

* rerender new explored hexes

* optimistic update explore tile

* linked to #1136

* fix: antialias

* fix: render order

* fix: GUI manager

* remove raycast from aura

* fix aura raycast

* fix: army model

* fix ticks three

* fix: extract general constants

* fix #1132

* fixes

* fix food balance

* fix: hide small details

* fix stamina bug

* tile manager

* fix aura not showing because of highlight

* fix food in action info

* set explore stamina to 0 for testing

* feat: updated 3d models

* Feat: castles models

* feat: interactive manager for hexception

* move label renderer to game renderer

* action info without three

* error fix

* fix: action info tooltip

* refactor

* fix bug

* refactor action info

* fix: set realm entity id on hexception route

* fix: build error

* feat: highlight hexes

* feat: enable highlight in build mode

* fix build

* fix action info bug

* army info label on hover

* add throttle

* add entity details when clicking on hex

* cleanup

* remove map store + add three store into uistore

* move shaders out of react

* rename store files

* fix: top bar pointer events

* fix: unmount hidden div

* fix: perf update

* refactor

* add new input manager + refactor scene manager

* v1 new system manager

* new System manager + refactor army and structure manager

* feat: hexagon scene superclass

* refactor mouse interactions

* fix bugs and add worldmap logic to worldmap scene

* fix build

* add army update

* fix load model

* add loadBiomeModels to HexagonScene

* turn HexagonScene into abstract + add abstract methods for input manager

* fix build

* remove click when dragged

* remove difference between border and transparent hex

* fix structure

* fix build

* fix rendering bug + explore bug

* fix: resize listener

* fix: enable handlers only on active scene

* refactor ID

* refactor system manager

* number to ID

* feat: building preview

* remove zustand from army manager

* fix build issues

* preview building colors

* add tile manager

* debug building placement

* remove return

* avoid simple click if double click

* clear building mode + show model after tx

* avoid click events going through

* fix

* feat: new models

* fix: bug with coords

* fix: move camera to url location

* fix tests

* knip clean

* refactor

* linter

* pr review

* linter

---------

Co-authored-by: ponderingdemocritus <[email protected]>
Co-authored-by: 0x1337 <[email protected]>
Co-authored-by: 0x1337 <[email protected]>
Co-authored-by: tedison <[email protected]>

.knip.json

@@ -15,6 +15,9 @@
     "client/src/hooks/store/useBankStore.tsx",
     "client/src/ui/components/bank/BankEntityList.tsx",
     "client/src/ui/components/bank/BankStats.tsx",
-    "config/bank/index.ts"
+    "config/bank/index.ts",
+
+    "client/src/three/components/FogManager.ts",
+    "client/src/hooks/useUISound.tsx"
   ]
 }

client/package.json

@@ -38,6 +38,7 @@
     "graphql-request": "6.0.0",
     "graphql-ws": "^5.15.0",
     "gsap": "^3.12.5",
+    "lil-gui": "^0.19.2",
     "lodash": "^4.17.21",
     "lucide-react": "^0.365.0",
     "postprocessing": "^6.35.2",
@@ -47,9 +48,12 @@
     "react-toastify": "^10.0.5",
     "rxjs": "^7.8.1",
     "tailwind-merge": "^2.2.2",
-    "three": "^0.163.0",
+    "three": "^0.166.0",
+    "three-csg": "^1.0.0",
+    "three-csg-ts": "^3.1.14",
     "three-stdlib": "^2.29.5",
     "use-sound": "^4.0.1",
+    "vitest-canvas-mock": "^0.3.3",
     "wouter": "^2.12.1",
     "zustand": "^4.5.2"
   },

client/src/App.tsx

@@ -5,10 +5,10 @@ import { World } from "./ui/layouts/World";
 
 function App() {
   return (
-    <div className="relative w-screen h-screen bg-brown">
+    <>
       <ToastContainer style={{ zIndex: 1100 }} />
       <World />
-    </div>
+    </>
   );
 }
 

client/src/dojo/createClientComponents.ts

@@ -9,5 +9,6 @@ export function createClientComponents({ contractComponents }: SetupNetworkResul
     Building: overridableComponent(contractComponents.Building),
     Position: overridableComponent(contractComponents.Position),
     Stamina: overridableComponent(contractComponents.Stamina),
+    Tile: overridableComponent(contractComponents.Tile),
   };
 }

client/src/dojo/events/hyperstructureEventQueries.ts

@@ -32,7 +32,7 @@ export async function getHyperstructureEvents(): Promise<HyperstructureEventInte
   });
 }
 
-export function parseHyperstructureFinishedEventData(eventData: Event): HyperstructureEventInterface {
+function parseHyperstructureFinishedEventData(eventData: Event): HyperstructureEventInterface {
   const [hyperstructureEntityId, timestamp] = eventData.data;
 
   return {