Browser FPS Starter Kit - Three.js Game Template with Full Source

Building a browser-based FPS from scratch takes 6-12 months of complex setup. This template gives you a production-ready foundation in minutes, not months.

NotStrike is a complete first-person shooter template featuring advanced physics, professional weapon systems, GPU-accelerated particles, and optimized rendering. Built with Three.js, Rapier physics, and TypeScript - everything you need to create AAA-quality browser games.

Demo : https://www.notstrike.online/

Why Choose This Template?

Skip Months of Complex Setup

• ✅ Physics Integration - Rapier.js already configured with optimized collision detection
• ✅ Weapon Systems - Already made weapon shooting mechanics code
• ✅ GPU Particles - High-performance effects using custom GLSL shaders
• ✅ Player Movement - Quake-style physics with advanced movement techniques
• ✅ Animation Pipeline - Marker-based system for smooth weapon animations
• ✅ Audio Management - 3D audio with proper timing
• ✅ Production Build - Vite setup for deployment (easy to deploy)
• ✅ Small bundle size - Compared to Unity3D WebGL bundling, this one is 1.5 MB gzipped (with glb assets!)
• ✅ Can load any map - As long as your map can be exported to a GLTF/GLB file, it can load it & it will have physics !

Complete FPS Game Foundation

This is the full source code for NotStrike - a FPS game demo running entirely in the browser. You receive every system, asset, and configuration needed to build and deploy your own FPS game.

Total Codebase: 2,500+ lines of TypeScript
Development Time Saved: 6-12 months of complex setup
Assets Included: 3D models, textures, sounds, animations

<2 MB on first load with gzip. (Thanks to WASM + Asset compression)

Controls

WASD : Move

R : Reload

1 : Primary Weapon (AK47)

2 : Secondary (Pistol)

3 : Knife

Left click to shoot

Advanced Game Systems

• 🎯 Player Controller - Counter-Strike/Quake-style movement with air control, strafe jumping, ground detection
• 🔫 Weapon System - Complete weapon logic, rendering, shooting mechanics, and smooth animations
• ⚡ Physics Integration - Rapier.js setup with collision detection, raycasting, and impact forces
• ✨ Particle Effects - GPU-accelerated muzzle flash, smoke, bullet shells, and impact particles
• 🎬 Animation Pipeline - Marker-based system for weapon animations (idle, shoot, reload, switch)
• 🔊 Audio System - 3D positional sound effects for gunshots, reloads, and weapon switching
• 🎨 Rendering Pipeline - Optimized Three.js setup with shadows, post-processing, and HUD
• 📱 Mobile Support - Touch controls and mobile-optimized performance
• 🚀 Build System - Vite configuration for development and production builds
• Modifiable Map : You can modify the .glb that represent the map, the game engine will automatically compute Trimesh Colliders out of it, this means any map you have on Blender/your 3D tool will work in this as long as you scale it properly (on first export, map tend to be too big/too small)

Professional Code Architecture

Clean, modular design following industry best practices

src/
├── Player.ts           # 🏃 Movement, physics, input handling
├── Camera.ts           # 📷 FPS camera with shake effects
├── PhysicsSystem.ts    # ⚡ Rapier.js integration
├── Scene.ts           # 🌍 3D environment and lighting
├── Renderer.ts        # 🎨 WebGL rendering with post-processing
├── weapon/            # 🔫 Weapon logic, rendering, shooting
├── particle/          # ✨ GPU particle systems
└── animation/         # 🎬 Animation system and FPS meshes

Why This Architecture Works:

• Separation of Concerns - Each system has a single responsibility
• Type Safety - Full TypeScript coverage prevents runtime errors
• Extensible Design - Easy to add new weapons, effects, and features
• Performance Focused - Optimized for 60+/144+ FPS gameplay
• Memory Efficient - Proper cleanup and object pooling

🏃 Movement System

Based on Quake III Arena physics with modern improvements

• Proper acceleration curves with configurable parameters
• Air control for advanced movement techniques (strafe jumping, bunny hopping)
• Ground detection using precise raycasting algorithms
• Smooth collision response with capsule collider
• Configurable movement parameters (speed, friction, jump force, air control)

Code Example:

// Fine-tune movement feel
private maxSpeed = 15.0;        // Ground movement speed
private jumpForce = 18.0;       // Jump height multiplier
private airAcceleration = 10.0; // Air control responsiveness
private friction = 8.0;         // Ground friction coefficient

🔫 Professional Weapon System

Four-layer architecture for maximum flexibility

1. WeaponLogicSystem

• Firing state management and timing
• Reload mechanics with interruption handling
• Weapon switching with proper state transitions
• Ammo management and inventory tracking

2. WeaponRenderer

• Visual rendering
• Smooth animation blending and transitions
• Muzzle flash/Smoke and visual effects integration

3. WeaponShooter

• Precise raycasting for hit detection
• Penetration simulation through multiple surfaces
• Damage calculation with distance falloff
• Impact force application to physics objects

4. WeaponData

• JSON-based configuration system
• Hot-reloadable weapon statistics
• Easy balancing and modification
• Extensible property system

✨ GPU-Accelerated Particle System

VFX pipeline using custom GLSL shaders

Advanced Particle Architecture

• GLSLParticleSystem - Custom vertex/fragment shaders for 2D particles
  • Muzzle flash with realistic fire patterns
  • Volumetric smoke with physics-based dispersal
  • Spark effects with proper lighting interaction
• BulletInstancedParticleSystem - 3D bullet shells
  • Realistic shell ejection with gravity simulation
  • Surface collision and bouncing mechanics
  • Automatic cleanup and memory management
• DecalSystem - Persistent bullet holes using instanced rendering
  • UV-mapped decal placement on any surface
  • Fade-out system for performance optimization
  • Support for multiple decal types and materials
• ImpactParticle - Impact effects
  • Directional debris and smokes on hitpoints for static objects

Performance Features:

• GPU-based particle updates
• Memory-efficient

⚡ Advanced Physics Integration

Rapier.js physics engine with optimized performance

📦 Complete Asset Package

💎3D Models

Ready weapons with low vertex count (good for web games)

🎨 Textures & Materials

• Particle Textures - Muzzle flash, smoke, sparks
• Environment Maps - HDR skyboxes for realistic lighting (disabled by default, but my code supports it ! )
• Decal Textures - Bullet holes, impact marks, scratches

🔊 Audio Assets

Professional sound effects recorded in studio quality

• Weapon Sounds - Gunshots, reloads, weapon switching (48kHz WAV)
• Impact Effects - Bullet hits

📁 Development Assets

• Blender Files - Source models for customization (.blend)
• Animation Data - JSON marker files for timeline sync

🌐 Browser Compatibility & Performance

Supported Platforms

Support all modern browsers (Chrome, Firefox, Safari)

License and Usage

Commercial License

• Use in commercial projects without restrictions
• No attribution required in final products
• Unlimited project usage
• Resale rights (cannot resell the template itself)

What You Can Do

• Create and sell games using this template
• Modify and extend the codebase
• Use in client projects
• Use for educational purposes
• Create derivative works

What You Cannot Do

• Resell the template as a template
• Claim original authorship
• Remove license files from the codebase

Technical Requirements

Development Environment

• Node.js 16+ or Bun 1.0+
• Git for version control
• Code editor with TypeScript support (VS Code recommended)
• Modern browser for testing

Optional Tools

• Blender 4.0+ for 3D asset creation
• Audio editing software for sound effects
• Image editing software for textures

This template gives you a complete, working FPS game that you can customize and deploy immediately. No need to spend months building basic mechanics - start with a solid foundation and focus on making your game unique.

🙏 Credits

Assets

• Weapon Models: Quaternius - High-quality 3D weapon assets
• Environment Models: Kenney - Various 3D environment assets
• FPS Arms: "Cartoon FPS Arms" by DJMaesen (CC BY 4.0)

Audio Assets

• Gunshot Sound: eardeer - Attribution 4.0
• Drawing Gun: JakLocke - Attribution 4.0
• Bullet Casing: keybal - Attribution 4.0
• Glock Reload: KNO SFX - Attribution 3.0
• Gun Reload Ambient: KNO SFX - Attribution 3.0
• AK47 Shot: ninebilly - Creative Commons 0