Setting Up Servez
Developing with WebGL and Three.js requires more than just copies of the relevant javascript files copied locally. It requires a web server. This tutorial will show you how to get a server up and running so that you can develop without using the internet.
Servez is a simple web server specifically created for local development. Though you could use a more sophisticated application like Apache to do your web serving, Servez requires no setup and (at least for me) just worked. Here is a screenshot of the Servez application:
It’s incredibly simple to use. Simply browse to the folder containing your website as the “Folder to Serve”. Then, click Start. Once you do, you’ll see the log change to something like this:
That’s it. Your website is getting served. To see it in the Browser, just click the “Launch Browser” button, which should have become sensitivized once the server was started.
To test and see if Servez is working properly, try the following steps:
- Create a folder called testServez
- In the folder, create a file called index.html that contains the following single line:
If you see this, then Servez is working.
- Point Servez to the testServez directory, hit Start, and launch the browser. It should launch your default browser and you should see the line you wrote as shown below.
I’m using the Brave browser on a Mac running Catalina. If you’re working in a different environment, the browser won’t look the same. But you should see the same text in the browser window.
Note that the url of the website is localhost:8080. This indicates that, in fact, the website is getting served by your own computer using the Servez server.
You can click “Stop” on servez to stop the web server until you’re ready to run your next page.
Setting Up and Testing Three.js
We’re going to use code from The Beginner’s Guide to Three.js. Access the website and download the code into a directory onto your computer. Then run Servez and point it at the directory you just downloaded, and launch the browser. If everything goes well, you should see something like this:
You should be able to click-and-hold on the image and rotate the logo around. If so, you know that three.js is working on your computer!
The next step is to get new code to run on the computer. My suggestion is to try to get the code from “The Beginners Guide to Beginning Three.js.
