Did you know that modern browser support full 3D graphics?
Most people don’t. Probably because most websites don’t use it. Probably because it’s not really a useful feature for the average news site or online shopping center.
But it’s still a really cool technology and definitely something to keep in mind in case you ever find yourself needing to offer users a degree of interactivity or visualization above and beyond 2D text and images. I can imagine all sorts of scenarios where being able to offer a 3D model viewer or simple simulation would go a long way to making a complex topic understandable.
So let’s dive into the topic by building a simple 3D maze based off of old school first person dungeon crawlers. We’ll be using a library called three.js to handle the nitty gritty details and will cover enough of the basics of user input and game loop logic to at least give you a starting point for any interactive 3D websites you may find yourself needing to build.
Show Me The Finished Code
You can find the final product here. Play around with it to get a feel for what we’re going to build or save the page to your local machine to look at the source code. It’s all Javascript so need for compilers; the whole program is right in the <script> tags of that single page (although you’ll need to download a copy of the three.js library as well to get it working locally).
Show Me The Articles
Let’s Program A 3D Browser Game Part 1: You Can Do That?!
Let’s Program A 3D Browser Game Part 2: Three.js To The Rescue
Let’s Program A 3D Browser Game Part 3: Feeling Boxed In
Let’s Program A 3D Browser Game Part 4: A Different Kind Of Software Architect
Let’s Program A 3D Browser Game Part 5: Before You Can Learn To Walk You Must Learn To Dungeon Crawl
Let’s Program A 3D Browser Game Part 6: Forward To Tomorrow!
Let’s Program A 3D Browser Game Part 7: You Shall Not Pass
Let’s Program A 3D Browser Game Part 8: Dungeon Maintanence
Let’s Program A 3D Browser Game Part 9: Look, Shiny
Let’s Program A 3D Browser Game Part 10: Sometimes I Surprise Myself
Let’s Program A 3D Browser Game Part 11: Hunting For Treasure