Hobby 3D Game Programming with Three.js: Creating an HTML Template

First, we have to create an HTML template webpage to hold our future game code. Copy and paste the following HTML code into your text editor:

<!DOCTYPE html>
<html>
   <head>
      <title> Hello World </title>
   </head>
   <body>
      Hello World! It Works!  
   </body>
</html>

Once you've done that, it's time to save the file: click File, Save As... example01.html
You must type all the letters including .html at the end, because if you don't, the text editor will incorrectly save your webpage as a text file (a .txt extension) and the icon might change to a notepad - that won't work - what you want is an html file (a .html extension).

Now when you correctly save this as an .html file, the icon for your file might change to whatever browser will open it. Right-click the icon and choose to "open with"...Google Chrome. If you've installed the Chrome browser and saved your template webpage correctly, the example01.html file will open inside Chrome and you should see the following:

If your Chrome browser looks like this, congratulations! You have successfully set up the webpage template. In my next post, we will see how to add the Three.js library to our webpage so that we can access all of its awesome helper functions.

Thursday, September 5, 2013

Creating an HTML Template