after reading a lot about ai vibe coding i decided to take a deep dive in and have a look at what all the hype is about (out of curiosity). for my first ever app I decided to create a 3D flight simulator. the agent vibe coding app that i decided to use was replit (the free plan).

here is my initial prompt:

agent: I’ll help you create a 3D flight simulator using the JavaScript Game Stack. Let me analyze your requirements and create a comprehensive plan.

App type

A 3D flight simulator with realistic physics, multiple aircraft, varied environments, and comprehensive flight instruments

I’ll include the following features:

Basic 3D aircraft model with keyboard controls for pitch, yaw, roll, and throttle

Simple flight physics with gravity, lift, drag, and basic aerodynamics

Single environment with terrain and basic skybox

Multiple camera views (cockpit, external, chase cam) with smooth transitions

HUD display showing altitude, speed, heading, and fuel gauge

Fuel consumption system affecting flight performance and engine power

Basic collision detection with terrain

Decided on HUD positioning logic (4 seconds)

I can see the issue from the logs – the HUD component with HTML elements is being rendered inside the Three.js Canvas, which isn’t allowed. Let me fix this by moving the HUD outside the Canvas and ensuring it properly overlays the 3D scene.

Decided on HUD component inclusion

Let me check the current files to ensure my changes were applied correctly and identify why the HUD is still being rendered inside the Canvas.

Decided on flight control functionality

Excellent! The logs show the flight simulator is now working properly. I can see keyboard controls are being detected and responding (showing “Controls active” messages). Let me test the complete flight simulator experience.

Decided on WebGL fallback strategy

I can see from the logs that the flight simulator is actually working behind the scenes – the controls are responding and collision detection is working. However, there’s a WebGL context error causing an overlay. Let me implement a WebGL error boundary and fallback solution.

Confirmed flight simulator functionality

Perfect! The logs show great progress – WebGL is now supported and the context is being created successfully. I can see all the flight controls are working and collision detection is active. Let me test the full flight simulator experience.

Decided on WebGL retry logic

I can see from the logs that WebGL is actually working intermittently, but my detection might be too strict. Let me improve the WebGL detection and add a retry mechanism to handle this better.

Decided on simulator functionality

Excellent! The logs show that the flight simulator is now working perfectly:

“Flight simulator initialized” ✓

“WebGL context created successfully” ✓

“Terrain collision detected!” ✓ (showing physics are working)

Let me test the complete flight experience now.

Restarted Start Game

Took a screenshot

Checkpoint made

53 minutes ago

Add core flight simulation mechanics and user interface elements

As you can see from the screenshots a really rough 3d simulator was generated, but it works at a basic level. I added some prompts to say ‘the terrain was not being generated’ but this didn’t seem to fix the problem. i was impressed at how quickly it took to generate it was less than 20 minutes. as my first quick experiment it was a real eye opener as to what could be generated i will play around with this concept for ar and vr generated content to see what it can do. with the free model i was restricted to how many prompts i had so this was a little frustrating i might end up paying for this as i was that impressed with the results, from simple prompting.