JR Logo
Aim Trainer
Updated Sep 2024Next.js

FPS Aim Trainer

A basic FPS training prototype built while learning Three.js and React

A simple aim training project I made to learn React and Three.js basics. It helped me understand 3D environments and basic game mechanics.

Build Key Features

  1. 01

    Basic Weapon System

    Simple weapon mechanics including basic bullet behavior and fire rates. Still needs work on recoil patterns and accuracy.

    Basic Weapon System
  2. 02

    Target Practice

    Basic static and moving targets to shoot at. Nothing fancy, just helps practice aim.

    Target Practice
  3. 03

    Player Movement

    Basic WASD controls with mouse look. Added simple jumping and crouching, though the physics need improvement.

    Player Movement
  4. 04

    Simple 3D Space

    Basic training area built with Three.js. Pretty bare-bones but works for practice.

    Simple 3D Space
  5. 05

    Score Tracking

    Basic hit/miss counter and timer. Shows you how you did after each session.

  6. 06

    Basic Settings

    Added some simple options like mouse sensitivity and graphics quality toggles.

  7. 07

    Basic UI

    Simple menu system and in-game HUD. Nothing special, just the essentials.

Friction Challenges

  1. 1

    Performance Issues

    Struggled with keeping framerates stable while learning Three.js optimization basics.

  2. 2

    Basic Physics

    Implementing even simple bullet and movement mechanics was trickier than expected.

  3. 3

    React State

    Learning to manage game state in React without everything breaking was challenging.

  4. 4

    UI Design

    First attempt at combining 3D gameplay with basic UI elements - lots of room for improvement.

Takeaways Learnings

3D Basics

  • First time using Three.js with React - learned basic 3D rendering concepts.
  • Started understanding 3D math and camera controls, though still lots to learn.
  • Learned about basic performance optimization the hard way.

Game Dev Fundamentals

  • Got my hands dirty with basic game loops and collision detection.
  • Implemented simple shooting mechanics - needs refinement but works.

Performance

  • Learned some basic React and Three.js optimization techniques.
  • Started using dev tools to find major performance issues.

Code Structure

  • Attempted to keep code organized, though it needs cleanup.
  • Made some reusable components, but could be more efficient.