JIT
Create 3D FPS Game
Log in
@strikemacelol
Create a 3d shooting fps game
Gemini 2.5 Pro

Okay, let's start building the foundation for a 3D FPS game. We'll begin with the basic scene setup, a ground plane, and initial player controls structure.

This sets up the basic HTML, CSS, scene, camera, renderer, lighting, a ground plane, and integrates PointerLockControls for first-person movement (WASD) and mouse look. Click the screen to lock the pointer and enable controls. Press Esc to unlock.

Updated files
v1
@strikemacelol
add click to shoot and add particles
Gemini 2.5 Pro

Okay, let's add shooting with mouse clicks and a simple muzzle flash particle effect. We'll use raycasting to determine the shooting direction for now, without actual projectiles.

Now, when you lock the pointer and click the left mouse button, you should see a small burst of yellow/orange particles appear briefly in front of the camera, simulating a muzzle flash. The raycasting logic is commented out but provides the structure for detecting hits later.

Updated files
v2
@strikemacelol
add enemies that you can shoot
Gemini 2.5 Pro

Okay, let's add simple enemies (represented by red boxes) that can be destroyed by shooting them.

We'll create a basic Enemy class to manage their state.

Key changes:

  1. Enemy.js: A new file containing the Enemy class. It handles creating the enemy mesh, health, taking damage, and dying (removing itself from the scene).
  2. main.js:
    • Imports the Enemy class.
    • Creates an enemies array to store enemy instances.
    • Calls spawnEnemies() in init() to add some enemies to the scene.
    • The shoot() function now uses the raycaster to check for intersections specifically with the meshes of living enemies (enemyMeshes).
    • If an enemy mesh is hit, it retrieves the corresponding Enemy object from userData and calls its takeDamage() method.
    • The animate() loop now includes a section to remove dead enemies from the enemies array and call update() on living ones (though update doesn't do anything yet).

You should now see red boxes in the scene. Clicking on them will deal damage (check the console log), and after enough hits (4 clicks with 25 damage each), they will disappear.

Updated files
v3
@strikemacelol
add tone.js for sound effects
Gemini 2.5 Pro

Okay, let's integrate Tone.js for sound effects. We'll add sounds for shooting, enemy hits, and enemy deaths using simple synthesizers provided by Tone.js.

Changes:

  1. index.html: Added the Tone.js CDN script tag in the <head>.
  2. SoundManager.js:
    • A new module to handle sound logic.
    • initialize(): Starts Tone.js's AudioContext (required by browsers to happen after a user interaction) and creates simple synth instances for shooting, hitting, and dying. It connects them to a Tone.Volume node and then to the destination (speakers).
    • playShootSound(), playHitSound(), playDeathSound(): Functions to trigger the respective synth sounds.
  3. main.js:
    • Imports SoundManager.
    • The event listener on #instructions now calls SoundManager.initialize() before locking the controls. This ensures the audio context is ready. Added { once: true } to prevent multiple initializations.
    • Calls SoundManager.playShootSound() at the beginning of the shoot() function.
  4. Enemy.js:
    • Imports SoundManager.
    • Calls SoundManager.playHitSound() in takeDamage().
    • Calls SoundManager.playDeathSound() in die().

Now, when you click to start the game, the audio context should initialize. Subsequent clicks (shooting) should produce a simple synth sound, hitting an enemy should produce a noise burst, and destroying an enemy should produce a different noise burst.*

Updated files
v4