3d Wonderland banner

3d Wonderland

5 devlogs
14h 46m 5s

Welcome to 3d Wonderland - a site full of 3d games and simulations. This project aims to break the limits of three.js, the most popular 3d js library, and provide super fun and realistic games for anyone to enjoy. The site current contains:
Hou…

Welcome to 3d Wonderland - a site full of 3d games and simulations. This project aims to break the limits of three.js, the most popular 3d js library, and provide super fun and realistic games for anyone to enjoy. The site current contains:
Housefight - customize your house and fight off intruders by punching, kicking and throwing objects at intruders
FighterJetSimulator - Fly around in a realistic fighter jet shooting missiles at enemy jets in a dogfight

This project uses AI

Use Github Copilot to generate the starting code for my ideas. Also for visual assets. I coded js logic myself.

Demo Repository

Loading README...

guitarfan

Shipped this project!

Hours: 14.77
Cookies: 🍪 257
Multiplier: 17.43 cookies/hr

Welcome to 3d Wonderland
I built 4 3d web games that run on three.js, all weapons based. Fight enemies with punching, guns, tanks and even a fighter jet. The fighter jet simulation was by far the hardest to make, due to the projectile motion physics of the missiles, and the flight system, as well as designing the shooting missiles, to make killing enemy jets possible. My goal for this project was to shatter the limits of web games on three.js, and make it better than some PC games. I hope you all enjoy playing them!

guitarfan

Created the homepage with brownish base color, playful fonts. Added depth to every button to give a sense of 3D.

Attachment
0
guitarfan

Created Airsoft Royale

To follow the weapon theme of my other combat games, I made a shooting game on three.js. My vision for this web-app was to create a shooting game that required agile dodges and movement through a maze of indoor walls, inspired by the recreational game of Airsoft. It is functional, but room for improvements in 3d environment.

1. Coded Visual Assets

  • Chose to make an outdoor three.js enivironment with trees, and some buildings
  • First person view with a gun made out of primitives
  • Enemies with simple AI mechanics (will shoot you if you are in sight with deadly accuracy)
  • Also created an recreational indoor environment with wood walls, tires, random cylinder poles and objects fo decoration.

2. Weapon Mechanics and Gameplay

  • 6 types of guns in your arsenal, some shoot faster, some do more damage, etc…
  • Jumping, reloading, flashbang, grenades, scan for enemies
  • Grenades are infinite, but they are quite hard to aim.
    *Problem 1: Jumping was didn’t have a limit, so I had to limit it to 2 jumps)

3. Stages and Game Modes

  • 4 Game modes: Team Death Match, Capture the Flag, King of the Hill, Battle Royale
  • Indoor arenas are just standard death matches.
0
guitarfan

Created a 3d tank combat simulator called Iron Maze

My vision for this web-app was to create a 3D tank combat simulator inspired by the Wii Play Tanks mini-game. It is essentially a 3d version of Wii Play Tanks. Here’s what I’ve coded so far:

3D Environment and Tank Mechanics

  • 3D tank with independent track and turret movement using three.js
  • Multiple camera perspectives: First-person (cockpit), Third-person, and Top-down
  • A military battlefield environment featuring mud terrain, tire tracks, craters, concrete barricades, barbed wire, and props (hedgehogs, oil drums)
  • Transitioning the layout from the original wooden toy-block theme to a military theme required overhauling lighting and materials to prevent color clashes. I updated lighting properties globally, lowered tone mapping exposure, and added a battlefield props generation system.

Combat, Missions, and AI System

  • Shell physics where projectiles ricochet off walls once, allowing shots around corners
  • Deployable landmines that detonate on an 8-second timer or via proximity detection
  • Three enemy AI profiles: Brown Tanks (Patrol), Grey Tanks (Chase), and Green Tanks (Guard)
  • Four escalating missions with briefing screens and end-game flow
  • Refactored the mission lifecycle (startMission -> showBriefing -> startMissionFromBriefing) after iterating on the game logic caused duplicate placeholder functions that broke HUD notifications.

HUD, Dashboard, and Procedural Audio

  • Cockpit dashboard with minimap, hull integrity bar, shell/mine counters, and speed/heading gauges
  • Kill feed, warning overlays for low hull/ammo, smoke trails for damaged tanks, and particle explosions
  • Procedural audio synthesizer using the Web Audio API to convert generated waves into base64 WAV strings. This was added to get around the constraint of needing a single HTML file without external audio assets, allowing overlapping audio for engine, firing, and hit sounds through Howler.js.

Other Features

  • Coded 3 views, so player can play the game from different perspectives; switch views by pressing “v”

Developer Note

  • Video is of me dying on the 4th mission. Observe which keys I press to switch views and other things.
0
guitarfan

Created FighterJetGame.html (Shadow Strike)

My vision for this web-app would be a three.js fighter jet combat simulator game where the player navigates an abandoned, ruined city and executes tactical missions against various aerial and ground threats. What I have coded so far is:

3D flight mechanics and environment modeled using three.js

  • Standard jet flight controls covering pitch, roll, yaw, and throttle (controls were simplified to be intuitive for all players)
  • An environment featuring an abandoned city and a beautiful mountain landscape with green hills and clouds: it has atmospheric daytime and nightime gradient adaptive lighting, and skybox rendering

Real-Time Updated HUD and Dashboard

  • Detailed Heads-Up Display featuring a dynamic crosshair, digital radar (map of enemy jets location), locking indicators on enemy jets, and visual warning panels
  • Real-time bottom dashboard gauges tracking speed, altitude, heading, G-Force, throttle status, and hull integrity
  • Target lead indicators and aim overlays to assist bad aim in dogfights (fights between aircrafts)

The Combat and Mission System

  • Functional weapon loadouts including lock-on missiles (with specialized targeting and mid-air detonation mechanics), rapid-fire cannons, and defensive flares
  • Multiple game modes: Free Flight and 4 combat mission levels
  • Enemy bot logic for patrolling fighter jets, evasive surveillance drones, and destructible command buildings
  • Action feedback loop including health/hull logic, kill feeds, visual damage overlays, and reloading capabilities

Developer Note

  • Game might lag if you have a bad wifi connection, especially if you use the flare
  • The game pulls three.js library from the internet using a cdn script link
  • Video shows me beating the first mission
0
guitarfan

Created Housefight.html
The concept was that the game would let user customize the environment (house), which would give the homeowner an advantage over intruders that come to steal valuables. What it has so far is:
+Custom designed 3d house furniture, objects and house using three.js
+Interior design view to be similar to 3D CAD software, except objects added to house spawn in random locations
-Room parameters: lighting, dimension changing, floor color,
-3d orbit and panning (if you have a mouse) of house via built in three.js capabilities
+Fighting Mode
-Block-built main character with blue shirt design and ominous looking intruder with black cap and red eyes
-The customized house renders and loads into fighting mode environment. Changes to interior design view will appear in fighting mode
-Has primitive walking, punching, kicking, throwing, stunned animations
-Funky interactivity and hitboxes with punches and kicks, throwing objects hitboxes are spot on
-Intruder bot logic (no generative AI behavior)
-Healthbar logic and round timer
-Helpful text pop ups and nice looking fonts
*Video shows me dominating my own game. I might have made this game too easy

0