Hi! This post will serve as your guide through the GAFFTA Introduction to WebGL with THREE.js workshop. This post is intended to be your companion for the workshop, in case you get lost on your experiments you can always refer back to this page for help.
In case you’ve landed on this page somehow and are not taking the workshop, you can also follow along.
To get started with this workshop, you can follow along one of two ways:
Method A. This will get you good solid setup for any future experimentation you would want to do. I recommend this method first.
Download Google Chrome or Firefox, or any WebGL supported browser.
Download a good text editor so you can write code. For example, SublimeText.
Then download the example sketch. You can also view this sketch online. The example sketch contains all the files you need, such as a main.js where the code lives, and a copy of three.js in the same folder.
Once you have the sketch downloaded, you can open index.html in the sketch with your browser. That’s it! You should then see a rotating cube.
Method B. This method is totally experimental and it’s entirely possible to lose your work, but it’s really good for just trying something out. Give it a shot anyway!
Go to http://mrdoob.com/projects/code-editor/ Mr. Doob wrote a snazzy in-page code editor for the lazy. It’s still early in development and there are always issues with such things, so please keep that in mind.
You can go ahead and edit right in that window and update the code as needed.
Some handy links to have open when you’re working with three.js
The source repository so you can look at what each object expects as arguments.
The three.js wiki. This page might answer a lot of your questions.