Hobby 3D Game Programming with Three.js

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

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

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

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