Hobby 3D Game Programming with Three.js

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

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