Setting Up Three.js & WebGL

Ever wanted to program generative art graphics?

Ever wanted to create amazing graphics that can work accross web, mobile and installations?

Want an easy environment to sketch your computer graphics in?

Then you've come to the right place.

This tutorial will focus on how to setup Three.js in Visual Studio Code so that you can start coding as quickly as possible. It will be aimed at beginners to generative art, web graphics and three.js so you may want to skim this if you're already versed in these.

1. Setting Up Your Code Editor

To start to code you need someplace to code, store your code files and also run them.

So first of all, go to download Visual Studio Code here.

VS Code is a very basic code editor from Microsoft that is lightweight and easy on the eyes - perfect for this tutorial.

After this, go to the extensions tab and download the Liver Server extenson - it should download in a few seconds. This extension will allow us to run our web code locally on our computer as if it were a regular website.

2. What Is Code

All code is essentially just files with different name extensons, similar to any other kind of file. Instead of extensions like .txt or .jpeg we use extensions like .js for Javascript files, .py for Python, .cpp for C++ files and so on. All the extension does is say to our computer 'Hey this is what I am so when you execute me do it in a certain way'.

To run these files we need the necissary program to open them and execute them. These either come in the form of runtimes or interpritters which are basically a program or set of instructions that runs the file. For example Node.js is a runtime for javascript files. Often runtimes can do a bunch of other stuff as well so there is a benifit to using one as your framework like using Node.js to run JS files instead of using just html.

There are also scripts and executables. This is fairly large so I'll try and simplify things here. A scripting language, like JS or Python, is a very 'light' and 'high level' programming language, meaning it doesn't interfere much with moving and editing the meory of a computer when it runs. As a result, scripts are often much simpler to write but loose some of the serious horsepower and versatility you can get from a 'lower level' programming language such as C++ or Java.

Often scripts remain as the files they are written in and are run using a runtime or an interpreter. Lower level languages are often compiled and built into executable files called .exe which you have probably seen before. An exe file is a standalone file that only needs to be run on the platform (Linux, Windows or Mac etc) it was built for.

3. What Is A Website

All a website is is a bunch of files structured together in a cohesive way. Just like how you 'browse' books on a shelf, internet browsers browse files - they go to the internet address and read the files at that address. These files can be on any networked computer but are mostly on servers, which are basically just lots and lots of networked computers that companies will 'host' you site on.

So when we access our website, our browser goes to that address, which points to the network the computer is on and where within that computer network, which computer it is on and then where in that computer the files are. You can think of it as simply as another computer holding a folder directory full of files decribing your site; the look of it, how it interacts, any data like images or contact details and much, much more.

4. Your First File

To make graphics on the web we primarily use the Javascript (or JS) language alongside HTML and CSS. HTML and CSS are common to all websites, and JS is used for dynamic, graphics based ones. We will use all 3 in tandem which is pretty standard practice.

So to get started we need to make a new folder and make a file called index.html in that folder. Then copy and paste the code below:

Place index.html in the root of your folder structure

The index.html file is the first file that any browser looks at. It is the master file and all websites must have one otherwise you will see an error in your browser.

HTML is made up of tags. Each tag is comprised of a pair; <html>...</html> , <head>...</head>, <body>...</body> With the </> denoting the end of the tag.

What these do is tell the browser how to process the data within the tags.

For example:

- The whole code is within the <html></html> tag, this tells the browser that everything inside is html code.

- <head></head> tags tell the browser metadata information about the whole page. It's title, how it looks on google, what character set to use and many, many other things. In a proper website this can be huge.

- <body></body> defines everything that we see within the actual page, how it is laid out and how it functions.

For now hit Alt+L, Alt+O to run the code from VSCode in your browser. We are able to do this because we downloaded that Liver Server extension earlier. If we did not we would have had to manually setup and run our own web server on our local machine - which is what this extension does automatically.

From this index.html file we can define a whole bunch of things on our webpage and link to other files of various different types that will do a whole range of different things...

5. Some Style

So we now even though we have a website it doesn't look that great. Let's fix that.

The main other file we need is a CSS file. CSS stands for Cascading Style Sheet. This file defines the style our website will render all our content in. Copy and paste the code below into a file called man.css in a subdirectory called /styles:

Create a subdirectory called /styles and place main.css there

Have a go playing with these values and watch your website update whenever you save your file - this is one of the perks of using web-based development, the changes you make are almost instant allowing very fast development and creative flow, something not shared across all programming languages.

7. Graphics!

Okay we have a baller webpage and it's lookin' good but this is a graphics tutorial so lets actually make some graphics in our browser.

Html and CSS are used for static webpages. To make a dynamic webpage, one that changes with the users actions we need to use Javascript.

For our graphics we will be using a very useful library called Three.js. It is a library written in Javascript and basically allows us to use computer graphics in a very simple way. If we didn't use this then we'd have to use core WebGL, which we could do but it would take much longer to get the same results. We'd only want to do this if we wanted to do something Three.js couldnt or to implement our own lower level code.

But that isn't what we want right now.

Three.js simplifies things to we can begin creating as soon as possible.

Download Three.js here and put it into a folder called /three somehwere in your system but not in this lessons folder.

Now even though we have access to the whole three.js library we don't want to use all of it in one go. Websites need to be fast and so should contain as few files and lines of code as possible.

Because of this we only want to include the files that are absolutley necissary for us. So let's do that...

Make a new folder called /js/vendor/three/

And copy the three.js and OrbitalControls.js files in there:

Place three.js and OrbitalControls.js in a new folder called /js/vendor/three

After that, make a file called app.js in your /js folder and copy this code in:

Put app.js in the /js folder

The app.js file stands for Application. This is where we will be using the Three.js library and where we will be editing code in the Javascript programming language.

From our index.html file we run this script using this line:

This is telling the browser to run the file found in js/ called app.js.

It might look like a lot to take in compared to the other files we have used but it is actually very simple. We will go into the details of our app.js file in the next lesson.

Et voila

If you have performed all the steps and run your code you should see a nice rotating cube like this:

The final result

This lesson has provided an overview of developing graphics for the web and we now have the base development environment for real-time graphics work.

Next, we will go into detail about how these graphics are working so we can create even more sophisticated ones.

If you have any trouble or are curious, you can find all of the source code for this lesson here.


Learned something?

Tell a friend about this site,

Want to see more like this?

Consider supporting through the store.


Have an idea, suggestion or just want to say hi?

The please leave a comment!