You may recall back when we added the Three.js library file to our project, I said that it makes our 3D game programming lives much easier. Three.js takes care of the not-so-fun raw GL graphics / math initialization for us, so that we can focus on the fun stuff. However, Three.js is meant to only aid in 3D graphics rendering inside the browser. It purposefully leaves out libraries of keyboard/mouse/touch input, AI, networking, game physics, audio, and other various components that we might need for our future games. If it DID include all those, the Three.js library would grow into a huge, unmanageable file that would be slow to download over the internet for people wanting to try our games. Rather, Three.js focuses on just the rendering so that you, the programmer, can add in different components only as you need them. This makes your game projects just big enough to work correctly, but not too big because of unused features and unnecessary components. And everyone's component needs will vary, depending on their type of project, so this makes sense.
So now we have to add in our own keyboard input code. We could try this from scratch, but why re-invent the wheel? If someone has already coded it and packaged it up nicely for you, why not use it? There are all sorts of additional helper files and functions floating around out there on the internet that are meant to be used in conjunction with Three.js. These smaller, specialized files take care of various tasks that aren't inside the main Three.js library (like handling user keyboard input). In fact, one such brave programmer has made it his mission to help everyone in their Three.js journey. His name is Jerome Etienne from Paris, France. He has been kind enough to create and share small helper files for Three.js and game programming in general. And one of these files is devoted to Keyboard input, which we need.
Click on the following link and after the new page loads, Right-Click on the webpage and Save As... 'threex.keyboardstate.js' . Save this inside the 'js' folder where our 'tempGame.js' and 'three.min.js' are already located.
threex.keyboardstate.js
Now you should have a total of 3 different .js (JavaScript) files in your 'js' folder : tempGame.js, three.min.js, and now threex.keyboardstate.js . This last file we just added to our project is kind of like a 'plugin' for game programming in the browser. Thanks to Jerome's fine work, his helper file will allow us to query the keyboard for keypresses in real time. We can then use this information to move the characters/objects in our game and make it truly interactive!
We haven't changed our old 'example01.html' file in a while; but we need to update it now because the browser has to be able to locate the new 'threex.keyboardstate.js' file that we just added to our project.
Do you remember how to include a new JavaScript file in html? We do it with the 'script' tag like this:
<script src="js/threex.keyboardstate.js"></script>With the addition of the above line, we will have 3 different lines with the script tag, each loading in a different component (or dependency). At this point, it's worth noting that the 3 script lines must be placed in the right order, otherwise we'll get errors in the browser console and our game won't work correctly. Take a look below at our new example01.html file and how I ordered the 3 script tag lines:
<!DOCTYPE html>
<html>
<head>
<title> Hello Three.js </title>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/threex.keyboardstate.js"></script>
<script src="js/tempGame.js"></script>
</body>
</html>
If you follow each script line from top to bottom, this .html code first loads the most important library, 'three.min.js' . Then it loads our new helper file, 'threex.keyboardstate.js'. Lastly, it loads our 'tempGame.js' which holds the future game code that we are writing. This file is dependent on the other two .js files to be already in place, so it must be loaded last.
While we have this .html file open, there's one more thing I want to add. It will be a line of text that is placed at the top of our webpage that instructs the user what to do, and what keys to press. It is like a mini help file and I really appreciate when others add it to their demos/games, so we will do it too.
Here's how to add a line of text using the html 'div' tag:
<div id="help" style="position:fixed; left:40%; top:4%; color:grey;">
Press W, A, S, and D keys to move the cube
</div>
This 'div' (short for 'division') element has an id named "help". I chose that because it is descriptive of what this 'div' does. Next we set the style by typing style = " " and inside the double quotes we put key:value pairs. First comes the key/attribute followed by a colon ( : ) and then its value. A semicolon ( ; ) follows each pair. Then comes the next pair and so on. The first key:value pair is 'position:fixed;' . This sets the text to a fixed position on the webpage so that it is in relation to the browser window itself and not some other element on the page. Next comes 'left:40%;' which pushes the left margin of the text over to 40% the width of the webpage (which is almost half way over). Similarly, 'top:4%;' pushes the top margin down just a little, 4% down the webpage. Finally, 'color:grey;' sets the text color to a stock grey. On the next line we type 'Press W, A....' which is the actual content of our text. These instructions will make it more clear what to do for first-time users.
Here is the updated example01.html file with our new 'div' text element and our new 'script' tag line which includes the keyboard helper library to our project:
<!DOCTYPE html>
<html>
<head>
<title> Hello Three.js </title>
</head>
<body>
<div id="help" style="position:fixed; left:40%; top:4%; color:grey;">
Press W, A, S, and D keys to move the cube
</div>
<script src="js/three.min.js"></script>
<script src="js/threex.keyboardstate.js"></script>
<script src="js/tempGame.js"></script>
</body>
</html>
(Continued in part 2)...
