3D Procedurally Generated Rooms Using three.js

Welcome to my final year project I created for my Games Development course! Procedural generation and 3D graphics are two of my favourite fields when it comes to programming and I was curious to know if a grid-based level generator would translate well to a web-based graphics API.

Disclaimer: The program can be quite resource intensive, both in terms of graphics and network. It is not recommended that you load this program via a mobile network and should consider pressing Q to lower the graphical quality when using a low-spec device.

The program can take a while to load on the first room generation and currently seems to be unstable when running in Chrome browsers. Although the program will load on smartphones and tablets, a mouse and keyboard is required to play.

Three.js was chosen thanks to its powerful engine and easy to implement language. It’s a really great language and the year of development it took to complete the project was a real joy, I had a really fun time making it.

Please feel free to comment if you have any thoughts or if you run into any bugs or performance issues. Thanks for playing! 😊  

Move: WASD

Look: MOUSE

Pause: ESC

Change/ Rest Camera: 1, 2

Take Screenshot: SPACEBAR

Generate New Room: ENTER

Toggle Main Light: L

Toggle Graphical Quality: Q

Toggle Room Info: I

Toggle Grid: G

How it works:

All rooms are assigned a colour pallet based on pre-defined colour harmonies. The program examines the size of the room and procedurally picks objects to spawn along each wall based on a random number generator, provided there is enough space on the grid. Once the objects have been spawned, child objects such as ornaments, pillows and smaller items are populated on top of them.

Wall objects check for collision and will only spawn into the scene if they are not colliding with other objects. Some objects can also be assigned lighting.

There are many other approaches that can be taken when procedurally generating rooms, but I wanted a simple solution so that it could run in a browser, which is why I went with a grid-based system. I am a big fan of Derek Yu’s indie-platformer, Spelunky and his book of the same name goes into some of the techniques used here.

I will be uploading the source code and my dissertation report once my course is complete, so I’ll post the links here when I’m done!