First-Person Starter Kit with real-time shadows and environment presets

Resources
, , ,
1

Hey everyone,

I’ve been diving deep into Three.js lately, and every time I wanted to test a first-person prototype, I found myself spending hours rewriting the exact same basic architecture (controls, collisions, lighting configurations, etc.).

Since I couldn’t find a lightweight, basic template that handled all of this efficiently out of the box, I decided to build one. I leveraged AI to scaffold the architecture, but spent hours manually tuning and polishing the core features to get them just right. Today, I’m opening it up to the community under the MIT license because I want this to be a resource for all of us devs.

My goal is to contribute back to this incredible Three.js ecosystem and hopefully help people speed up their learning curve or use it as a solid foundation for their own first-person projects.

:package: Key Features Included:

  • Smooth FPS Movement: WASD controls.
  • Global Environment Lighting: Pre-configured ambient and directional light rigs.
  • Skybox & Shadows: Real-time shadow maps optimized for web performance.
  • Time of Day Presets: A clean UI allowing instant switching between Morning, Noon, Sunset, and Night environments (using beautiful assets from Kenney!).

first-person-starter-kit_2

The project is fully documented and ready to spin up via npm in under a minute.

:link: GitHub Repository: https://github.com/augustopolonio/first-person-starter-kit
:globe_with_meridians: Live Demo: first-person-starter-kit.vercel.app

I would love to hear your feedback on the code structure, architecture, or suggestions on features you’d like to see added next. Let’s build and evolve this together!

1 Like