Hobby 3D Game Programming with Three.js

If you have been following along with this blog, you might be saying "These graphics demos and code examples are nice, but when are we going to start making a real 3D game?"  Well, I'm happy to tell you that we are finally ready to start our first game!   Sorry if the game setup blog posts before this were kind of dull.  But this is a necessary chore for anyone wanting to create a computer game.  Here's the good news:  now that we have gotten the boring setup code out of the way, we can now focus on the fun part: designing and building a real 3D game!  And because we have some basic template code in place to handle different devices, different speeds of hardware,  and different methods of user input, we can relax and feel confident that whatever games we make will work and run smoothly on most devices in the world today. So, what kind of game should we start with?  There's a saying I like that goes, "Learn to walk before you r...

It's finally time for some 3D!  We are going to add 5 lines of code to our tempGame.js file that will make our green cube come to life with spinning and movement, right in your browser. First we must create our own custom function (or block of code) that will animate the cube.  In JavaScript we create a function by using the 'function' keyword and giving our function a name.  The name should make sense to you and others who may read your code, and it should be descriptive of what it does.  Since we want to have an animation-type function, we will name our function 'animate'.  There are different ways to declare and use functions in JavaScript, but for now we will use this format: function animate(){ //our code goes here } I first used the 'function' keyword followed by the name we give to our function, in this case 'animate'.  Open and closed parentheses () follow the name.  If you choose, you can put a comma-separated list of parameter...

.... Continued from part 1 06 var geometry = new THREE.CubeGeometry(1,1,1); 06 To see anything in our newly created scene, we have to create some game objects.    Again, we use the 'var' keyword and pick a name for our object, in this case it is called 'geometry'.  We then fill it with '= new' and a call to THREE.CubeGeometry(1,1,1).   Have you noticed a pattern yet?  The pattern is:  var name = new THREE.something();  -  (where 'name' is the name you pick, and '.something' is the name of the helper function you are calling from the Three.js graphics library. Get used to this pattern because you will see a LOT of instances of it throughout our code, especially the THREE.something part.  Moving on, '.CubeGeometry()' is a function of the Three.js library that creates a cube or box shape.  The 3 parameters inside the parentheses() give the dimensions of the cube in order: (width, height,depth).  So to create a box or cube with 1 un...

So, how did those 11 lines of set-up code magically produce a green square (actually a cube as we will see) in our browser?  I will now explain each line of the code we just blindly copied so that we know what's going on.  Here is tempGame.js, printed again, but with my added line numbers so that we can examine each line  (p.s. Don't try to run the project with the exact code below, because it won't work with my added line numbers; this is just for explaining purposes). 01 var scene = new THREE.Scene(); 02 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 03 var renderer = new THREE.WebGLRenderer(); 04 renderer.setSize(window.innerWidth, window.innerHeight); 05 document.body.appendChild(renderer.domElement); 06 var geometry = new THREE.CubeGeometry(1,1,1); 07 var material = new THREE.MeshBasicMaterial({ color: 'rgb(0,255,0)' }); 08 var cube = new THREE.Mesh(geometry, material); 09 scene.add(cube); 10 camera.position....

Let's make a quick change to our .html webpage.  Open example01.html inside your text editor and remove the line that reads 'Hello World! It works!' (it is inside the <body> tags). Next, change the title of the webpage to Hello Three.js The updated example01.html file should look like this now: <!DOCTYPE html> <html> <head> <title> Hello Three.js </title> </head> <body> <script src="js/three.min.js"></script> <script src="js/tempGame.js"></script> </body> </html> Save the updated example01.html file (it's ok to overwrite the old example01.html).   We will now add some easy set-up code to our tempGame.js file, which is currently blank.  Open up the tempGame.js file in your text editor.  Now select and copy the following code: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/wind...

Now we will add our own .js (JavaScript) file to our game project.  Go inside your text editor and create a new blank file.  Save it as tempGame.js  and place it in the same folder as example01.html and three.min.js so that all the files can "see" each other.  Also make sure you save our new tempGame file as a .js extension.  This extension tells the browser that our file will add functionality to the webpage - in our case the game and graphics code.  There's one more line to add to our old HTML file now so that it can find our new .js file that we just created.  Now copy the following line: <script src="js/tempGame.js"></script> Open up the example01.html file in your text editor and paste it right below the "three.min.js"line.  The finished file should look like this: <!DOCTYPE html> <html> <head> <title> Hello World </title> </head> <body> Hello World! It Work...

We are about to include the Three.js graphics library in our webpage.  If you don't know much about how HTML and JavaScript work, I'll give you the fastest re-cap possible!  All websites use some form of HTML to tell the browser (Chrome browser in our case) how to display a webpage. That's why we needed the simple HTML webpage code that you just copied.  The .html extension tells the browser that it can open up this file and display its contents.  But to have true functionality such as moving page elements, user interaction, and special graphics displays, we must use the JavaScript language.  Think of it this way: HTML for basic content, JavaScript for functionality/interaction. If we want to use WebGL for 3D graphics on a webpage, JavaScript is how we access it.  The problem is that WebGL on its own has a steep learning curve and takes a lot of JavaScript coding just to set up the graphics, and you still won't have drawn anything to the screen!  Th...

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 templa...