Hobby 3D Game Programming with Three.js

Let's consider the effect of timing on games.   Typically, all moving game objects and players/characters are updated every cycle through the game code.  This means that if you instruct the game to "move a character/object by 1 unit", it will indeed move by 1 unit on every pass through your game program.    Take our sun light object for example.  On every frame of animation we want its height to move smoothly, so we type: sunHeight = sunHeight + 1; Just like we expect, the sun will rise smoothly, and it will work on any computing device or smartphone.  That's all good, until you consider that not everyone's device is running at the same rate.  A powerful desktop computer might loop through this statement 60 times a second, while a smartphone or old computer might only get around to it 20 times a second.  That means that the person playing your game on their powerful desktop computer will see and feel a different game experience than the person ...

It's time to do a little house-keeping maintenance on our game template.  I know, that doesn't sound as exciting as player movement and dynamic lighting, but it is just as important.  What we are looking to do in this post is learn how to handle when the user suddenly changes the browser window size.  This happens quite frequently, so we need to have code in place to quickly re-size our game graphics too.  Otherwise, our viewport will get stretched out of proportion or it might get cut off so the user cannot see the whole picture.  Let's take a look at how to keep the browser view centered and in proportion.   Every webpage on the internet has a global 'window' object that contains the entire webpage.  The 'window' is like the trunk of a tree and our game is somewhere out on the branches.  Everything on our webpage is connected back to the 'window' object.  The window object is created for us when we open a browser, and it comes ...

At this point, we have our green cube responding correctly to an off-screen light source that is moving up and down.  In this final part of "Adding Lights with Three.js", we will learn how to create a yellow sphere (representing the Sun) and place it where the light is coming from.  Then we will pull back the camera a bit so we can see the cube being lit while the yellow Sun is moving up and down, all in the same view. First let's see how to make a yellow sphere with Three.js.  Here's how it looks:   var sphereGeometry = new THREE.SphereGeometry(5); var sphereMaterial = new THREE.MeshBasicMaterial({ color: 'rgb(255,255,0)' }); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); scene.add(sphere); In the first line, we name a variable 'sphereGeometry' that will hold the design or blueprint of the sphere shape.  We fill this variable using the equals sign ( = ) and a call to THREE.SphereGeometry();  This function takes a number of optional ...

In the last post we looked at different types of lights and lighted materials in Three.js.  We then learned how to add a point light and change the material of the cube to correctly accept lighting.  Let's have some fun with the light object itself.  Just as you can manipulate the cube position/rotation (spinning),  and the camera position (as we did a while back), you can also change the light position dynamically in real time. We will now essentially pick up the Sun (carefully - ouch!) and move it up in the sky to high noon, and back down again to sunset, back and forth over and over, like an outdoor time-lapse video on endless loop.   We will take our trusty oscillation (back and forth) code that we learned a few posts back and use it to lift the sun up high, and then yank it back down again.  Take a look at the following oscillation  code: if(sunRiseFlag == true){ sunHeight = sunHeight + 1; } if(sunRiseFlag == f...

Now it's time for one of the most important elements in 3D games and graphics:  lights and lighting.   The Three.js library offers us some of the latest and most realistic lighting and shading options available in today's web browsers.   There are a lot of options for types of lights, types of surface materials on the subjects that are lit,  and equations/algorithms that affect the final look of the lighted scene.  This will be a multi-part post because we have to cover quite a bit of setup for lighting to work well in Three.js.   First, we have to change the material (or skin) of our colored cube so that it will correctly respond to lights in the game world.  If you recall, here is the old way of setting up the material/skin of our green-colored cube: var material = new THREE.MeshBasicMaterial({ color: 'rgb(0,255,0)' }); Unfortunately, this way of setting up a 'Basic' material will only shade the cube with the rgb color that you manually give to it...

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