$67

Browser FPS Template - Complete Three.js Game Starter

I want this!

Browser FPS Template - Complete Three.js Game Starter

$67

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 - 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.9 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)

to open .blend files, please download https://www.blender.org/

Controls

WASD : Move

R : Reload

1 : Primary Weapon (AK47)

2 : Secondary (Pistol)

3 : Knife

Left click to shoot

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 - GLSL Based muzzle flash, smoke and impact particles
  • Animation Pipeline - Marker-based system for weapon animations (idle, shoot, reload, switch)
  • Audio System - positional sound effects for gunshots, reloads, and weapon switching
  • Rendering Pipeline - Optimized Three.js setup with shadows, post-processing, and HUD
  • 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
  • Weapon switching
  • Ammo management

2. WeaponRenderer

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

3. WeaponShooter

  • Precise raycasting for hit detection
  • Damage calculation
  • Impact force application to physics objects

4. WeaponData

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

✨ GPU-Accelerated Particle System

Particle Architecture

  • GLSLParticleSystem - Custom vertex/fragment shaders for 2D particles
  • BulletInstancedParticleSystem - 3D bullet shells
    • Shell ejection on shoot
    • Automatic cleanup and memory management
  • DecalSystem - Persistent bullet holes
    • Fade-out system for performance optimization
  • 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
  • Environment Maps - HDR skyboxes for realistic lighting (disabled by default, but my code supports it ! )
  • Decal Textures - Bullet holes

🔊 Audio Assets

Professional sound effects recorded in studio quality

  • Weapon Sounds - Gunshots, reloads, weapon switching
  • Impact Effects - Bullet hits

📁 Development Assets

Browser Compatibility & Performance

Supported Platforms

Support all modern browsers (Chrome, Firefox, Safari)

License and Usage

Commercial License

  • Use in commercial projects without restrictions
  • Attribution required in final products for credited assets (see below)
  • Unlimited project usage

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

I want this!

Full source code + 3D Assets

Size
3.95 MB
Copy product URL
Powered by