Space 4X strategy game using three js

Showcase
1

Hi everyone,

I’ve been building a space-themed browser game shell called SpaceWars and wanted to share the setup and hear your opinions.

Stack: Vite, React 19, TypeScript, Three.js via React Three Fiber + Drei, Zustand for state, Tailwind for UI. I also use three.quarks for some particle work.

3D-wise, the app has two main canvases:

  1. Planet / home view — orbit camera around a central planet, zones you can select, distant billboard planets, environment/sky, various small VFX. When a fullscreen modal is open I pause the canvas (frameloop: 'never') instead of unmounting, to avoid WebGL teardown weirdness.

  2. Territory holomap — a second scene that reuses a similar “space shell” look but is really a tactical map (GLTF props, textures, lines between systems, battles/raids, etc.).

There’s also a small Express + Postgres backend for persistence; the renderer doesn’t depend on it for the core loop.

I’m actively looking for feedback from people who’ve shipped or tuned R3F/Three apps — nothing is sacred. For example:

  • Does the dual-Canvas approach sound reasonable for this split (planet vs. map), or would you strongly prefer one renderer with scene switching?

  • Any performance or lifecycle pitfalls I should watch for (context loss, resize/DPR caps, suspense + loading, disposing assets)?

  • For this kind of UI-heavy 3D (not a full uninterrupted game loop), how do you usually balance useFrame work vs. LOD / instancing?

  • Anything you’d change about particles here (stick with Quarks vs. leaning more on instancing / custom shaders)?

If anyone wants to skim architecture opinions that’s plenty useful too. Happy to summarize specific pain points if it helps steer the discussion.

Thanks for reading — curious what you’d do differently