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! This is where Three.js comes to the rescue. The wonderful Three.js team has done all the hard work for us, by typing the hundreds of lines of WebGL initialization code and complex math functions to be able to correctly display and manipulate 3D objects easily in the browser. To my knowledge, Three.js is the easiest to use and most robust 3D graphics library for the web.
But how do we gain access to this library for our own projects? Follow these steps and we will be ready to go!
- Step 1: Find where your example01.html file is located on your computer. When you have found it, right-click in an area close to it, and create a New... Folder. Name this folder js . That's the letter j followed by the letter s , which is short for JavaScript. This will hold all our js files and libraries for our future game projects.
- Step 2: Click on the following link to see the code for Three.js: three.min.js
- Step 3: When you arrive at that page, right-click on the webpage and Save As... three.min.js. The 'min' part means 'minified' , which is a fancy word for code that is shrunk down to the tightest size possible, so that it loads fast in your browser when you navigate to a webpage that uses this library.
- Step 4: Navigate to your 'js' folder that you just created, go inside this folder and save the three.min.js file inside here.
Now copy the following line:
<script src="js/three.min.js"></script>
The above line will make our webpage navigate to the 'src' (source) link. It will first look for a folder named 'js' and then it will look inside that 'js' folder for a file named 'three.min.js' . Go inside your text editor and paste the above code right below the line that reads "Hello World! It Works!". The finished file should now look like this:
<!DOCTYPE html>
<html>
<head>
<title> Hello World </title>
</head>
<body>
Hello World! It Works!
<script src="js/three.min.js"></script>
</body>
</html>
Save the updated file as example01.html (it's o.k. to overwrite the previous one) and open it in your browser. If you want to confirm that it loaded the three.js library, while your webpage is still open, go to the menu of Chrome (which is a 3 horizontal line button on the upper-right corner), go to Tools->, then select 'JavaScript console' from the menu. If you do not see any errors typed in Red color, everything worked perfectly! If you see typed in Red - "Failed to load resource", either it can't see the file because it is not in the right folder, or the three.min.js file is incorrectly saved as another type of file - check the spelling and extension and make sure it is located inside the 'js' folder, which is right next to the example01.html file so the webpage can "see" it.
When you have no errors, Congratulations! We can now use the Three.js graphics library on our webpage game. Next up.. creating our own .js (JavaScript) file that will hold the code to our future games!
