Hobby 3D Game Programming with Three.js

It's time to do a little house-keeping maintenance on our game template.  I know, that doesn't sound as exciting as player movement and dynamic lighting, but it is just as important.  What we are looking to do in this post is learn how to handle when the user suddenly changes the browser window size.  This happens quite frequently, so we need to have code in place to quickly re-size our game graphics too.  Otherwise, our viewport will get stretched out of proportion or it might get cut off so the user cannot see the whole picture.  Let's take a look at how to keep the browser view centered and in proportion.   Every webpage on the internet has a global 'window' object that contains the entire webpage.  The 'window' is like the trunk of a tree and our game is somewhere out on the branches.  Everything on our webpage is connected back to the 'window' object.  The window object is created for us when we open a browser, and it comes ...

Here's a list of what you need to follow along with my series and run the examples that we will be making: Either a desktop, a laptop, or tablet for development (doesn't matter what operating system).  You could use a smartphone, but the smaller screen size makes it cumbersome for typing and editing code.  However, our finished examples and games WILL run on all devices, no matter what size or operating system, even phones! A Chrome browser.  Google is leading the way in cutting-edge technology for the modern web browser, and at the time of this writing, Chrome is the best choice to run our games and test our code. A text editor for typing in and editing HTML files and JavaScript files.  Every device comes with some kind of text editor.  There are more fancy ones out there like Sublime Text  , but there's really no need to install anything on your computer. A copy of the library Three.js (a JavaScript file) which is available for free from GitHub. ...