Riviera Rivals: a full strategy card game in react-three-fiber (free, in the browser)

Showcase
,
1

I spent the last month building a complete strategy card game in R3F and wanted to show it here, since this community makes games like these possible.

It’s a drafting game: one shared market, pick cards, guests check in, best reviews fill first. The 3D resort is the game state: every room card becomes a wing, every amenity a building, and guests walk around based on the check-out report. Each of the six locations has its own backdrop and wildlife.

Things that might interest people here:

  • The HUD is plain React/Tailwind and the scene is R3F, both reading the same zustand store, so a purchase becomes a building in the same frame.
  • drei’s PerformanceMonitor steps DPR down on slow GPUs (starting at 1.5); on phones it only ever steps down once, because every change rebuilds the canvas and flashes.
  • Kenney CC0 GLBs, cloned per instance with SkeletonUtils for the animated characters, tinted by multiplying material colour so dark trim stays dark.
  • Night scenes with fireworks, weather effects, and post-processing that can be turned off with ?fx=0.

Happy to answer anything about the scene setup. Also very happy to hear what runs badly on your machine.

2

Nice write-up, and the point that every DPR change rebuilds the canvas on phones is a good one. We use drei’s PerformanceMonitor too, with three quality tiers instead of only DPR. On phones the first decline already steps one tier down, and phones never climb above the middle tier, so it does not flip up and down repeatedly. The monitor is re-armed after each change (a `key` bump), disarmed while the tab is hidden, and after a warm-up delay so the load frame does not count as a slow frame. Might help if you see the DPR flicker on some Android devices. Which phones did you test on?