react-three-fiber horror FPS concept -- thistle.

Hey!

Thought I’d share with you a small demo I made with react-three-fiber – first time using the library! It’s a concept for a horror-themed FPS game where you’re chased around by a ghost in an abandoned city. It’s got that old-school PSX/Saturn look with low-res textures and a low draw distance.

You can play it on your phone or PC at https://georgewaraw.github.io/thistle/

or watch the gameplay at https://youtu.be/2jMmznMro2E

The code and assets are at https://github.com/georgewaraw/thistle

CONTROLS

Mouse & Keyboard
Press WASD or the arrow keys to start moving in a given direction. Press the same key again to stop. Move the mouse to aim and look around. Press the left mouse button to shoot.

Touch
Swipe up/down/left/right to start moving in a given direction. Swipe the same way again to stop. While touching the screen, move your finger to aim and look around. Tap the screen to shoot.

Some known issues:

  1. The performance can be spotty on some devices (like iPhone 12). It might be a memory leak or maybe I’m just drawing too much without instancing. I’ll have to look into it some more.
  2. It’s rare but the audio can temporarily cut off while playing. I noticed this happens more if I have YouTube or Netflix paused in a different tab. No idea what to do about this though. This can also cause some stuttering occasionally. Still, it might be on my end because of how I built and use the positional audio component so I’ll have to run some tests.

Anyway, thanks for reading/playing and hope to share with you something bigger and better next time. All the love!