# Space 4X strategy game using three js

**URL:** <https://discourse.threejs.org/t/space-4x-strategy-game-using-three-js/91403>\
**Category:** Showcase\
**Created:** [May 5, 2026, 4:03pm UTC](https://discourse.threejs.org/t/space-4x-strategy-game-using-three-js/91403 "2026-05-05T16:03:02Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![GG9826dh](https://avatars.discourse-cdn.com/v4/letter/g/87869e/32.png) [@GG9826dh](https://discourse.threejs.org/u/GG9826dh)\
**Post date:** [May 5, 2026, 4:03pm UTC](https://discourse.threejs.org/t/space-4x-strategy-game-using-three-js/91403/1 "2026-05-05T16:03:02Z")

</div>

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

> **[Crime Harvest: Planet Syndicate](https://zesty-bunny-5ae1cb.netlify.app/)**