Hobby 3D Game Programming with Three.js

After all the movement coding that we just did, how about we take a step back and do something a little different - color using Three.js.  Remember the rgb (red, green, and blue) line of code that made the cube a bright green?  Just in case, here it is again:  var material = new THREE.MeshBasicMaterial({ color: 'rgb(0,255,0)' }); The three numbers inside the rgb code parentheses, (0,255,0) represent the intensity of each component of the overall final color.  We have 0 for red, 255 for green,and 0 for blue.  Remember that 255 is the maximum value for a color code.  Since we have 0 for both red and blue, they will not be mixed into the final color.  And since we have the maximum 255 for green, our cube turns out to be the brightest green possible.  Let's have a little fun with the color values.  First, try replacing the number 255 with a lower number, like 50.   Since this is a lower intensity, it will still be green, but...

At this point, we have the code ready to flip the camera movement back and forth.  But we don't have any code to regularly 'time' this flipping at set intervals.  This is where we need another if(condition)-type statement to check whether or not it is time to flip the camera going the opposite direction.  There are 2 ways of doing this.  We could make an artificial clock timer and at set times, flip the switch.  We might see this timer element later in our games, but for now I want to try the other easier option.  All we will do is set a distance limit that our camera can travel. Once it reaches this limit, we stop the camera, flip the switch, and send it in the opposite direction.  Here's the new 'if' statement that we will add: if(camera.position.z > 10){ camera.position.z = 10; forwardFlag = true; } Remember that when our program starts, the forwardFlag is set to 'false' and therefore the camera is constantly moving backwards wi...

Let's have a little fun with the camera movement, and at the same time learn a new technique called oscillation.   The general idea is that we would like to move the camera backwards, then forwards, then backwards, then forwards, and so on.  Anything that goes back and forth like this is said to be in an 'oscillation'.  That's just a fancy name for moving back and forth.   Remember that we used the '+' sign to increase the distance between us and the green cube and the '-' sign to shrink the distance.  So what we need is a way of changing periodically between these positive and negative movements, and then we will have an oscillating camera.  If you are new to game programming, you might think, "Ok, let's just put both lines of code back-to-back, like so": camera.position.z = camera.position.z + 0.1; camera.position.z = camera.position.z - 0.1; But you would quickly realize that this adds and subtracts too fast, actually resetting the cam...

In addition to animating the game objects such as our green cube, we can also move and rotate the camera (or eye position) in the game world.  We'll get into camera rotation in a future blog post, because that is slightly more involved.  For now we will focus on camera position movement, which is a little easier to grasp right away. Remember when we picked up the camera and moved it back along the positive z-axis (going behind you) so that we could step back and see more of our scene?  In case you need a refresher, that line of code looks like: camera.position.z = 5; We typed the name of our camera, 'camera' and then used the dot (.) and then the 'position' property, followed by another dot (.) and finally the axis that we wanted, which is 'z' in this case.  Then we filled this property using the = sign followed by the number value that we would like to assign to it, which was '5'.  What will happen if this number value changes every animatio...

Let's take a look at what is going on inside the new animate() function.  Here is the function printed again for reference: function animate(){ requestAnimationFrame(animate); cube.rotation.x = cube.rotation.x + 0.02; cube.rotation.y = cube.rotation.y + 0.03; renderer.render( scene, camera ); } The first line inside the animate() function is a call to requestAnimationFrame().  This comes from the RAF (Request Animation Frame) API that has been developed mainly by Mozilla and the WebKit team (Google and Safari) for use in high performance apps for the web, such as games that we want to make!  The requestAnimationFrame() function will try to update the rendering (drawing) of your game at a smooth 60 frames per second.  As of this writing in 2013, this is the best way to quickly update your game's logic and graphics inside a browser.   Notice that the requestAnimationFrame() function takes a parameter inside its parentheses, whic...

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

Actually, not a lot - even none if that is the case!  This blog series is intended for the casual coder and the hobby game programmer.  Of course it helps if you have at least some experience in JavaScript or C, or any language really.  And you don't need to be a website developing guru because although this is a web development environment, the amount of actual HTML code that we will be doing is negligible.  We just need a simple web page shell or template to house the true game code running inside of it. And since the wonderful Three.js library is written in JavaScript, that will be the main language used.  If you've never used JavaScript before, don't worry: I've found that it is one of the most flexible, stripped-down languages out there.  In my programming travels I have used Basic, Pascal, C, C++, Java, and JavaScript.  JavaScript was the easiest for me to get going with right away.  It doesn't have a lot of constraints and it's nice not t...

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

Today there are tons of resources available to the noob game developer.  From pre-made texture art, to 3D models, to physics engines, to full-blown game studio environments like Unity.  Although there are a lot of tools out there on the internet, it's difficult to narrow your search down to the essentials needed to get started.  Enter Web game development!  Just in the last few years, HTML5 web games have really taken off and the web platform is becoming a major contender in the graphics/game development world.  At first there was only Flash, and although there are some cool 2D Flash games out there, I wanted more - true 3D worlds in the browser.  Recently, WebGL has made its way into the spotlight as a tool to make the browser come to life with 3D graphics.  One of the premiere examples is  QuakeLive  , which runs Quake III Arena-style graphics in the browser. This was the first game that truly opened my eyes to the possibility o...

This might show my age, but I first got the desire to learn game programming back in the 80's as a young teen playing around with my Commodore 64.  I used to buy Compute! magazine with sample program listings inside and type hundreds of lines of Basic code into my C64, and save it to floppy disk (a REAL bendable floppy disk!).  As I laboriously copied the listings line by line, I had no idea what the code did, but the thought of controlling this machine and make it run games I had entered was just too good to pass up.  Then I typed RUN and hoped for the best.  Often what I got was a bunch of Syntax errors, but once in a while my C64 would come to life with graphics and sounds - I was hooked! Fast forward to the year 2000 and I discovered OpenGL.  I had fooled around in Basic before but to use OpenGL for Windows I needed to learn C and basic Windows development - both of which are no easy tasks.  I muscled through and actually (with the help of great books...

Hi and welcome to my game programming blog.  My name is Erich and I am a hobbyist 3D game developer.  In other words, I make simple 3D computer games in my spare time... for fun! Goals for this blog: Learn the basics of creating an .html template page to hold our games Learn how to use the awesome Three.js library for drawing the 3D graphics Discover what's going on beneath the surface of simple games that make them work Learn basic algorithms that move the game's objects and characters around realistically And most importantly, to have fun! Obviously we won't be making the latest triple-A hit games; that usually requires a dedicated team of software engineers and artists working round the clock.  However what we will be able to make in this blog series are simple, solid, true 3D games that are fast and responsive to player's input.  So if you are ready,  let's get started on a deep and fun journey into 3D game programming!