Let's code!

Because Three.js runs in web browsers, it can run on—and be developed on—many different platforms. In fact, we're going to build our first Three.js project directly in a browser!

Open up http://mrdoob.com/projects/htmleditor/. You should see HTML and JavaScript code overlaid on top of a spinning sphere-like shape, as shown in the following screenshot:

The online Three.js editor

This is the Hello, World program of Three.js—the minimum code required to get a spinning shape rendering in the browser. The preview will automatically update when you change any code, so go ahead and play with it and see what happens. For example, try changing THREE.MeshBasicMaterial to THREE.MeshNormalMaterial. What happens if you change IcosahedronGeometry to TorusKnotGeometry? Try fiddling with some numbers. Can you make the shape rotate faster or slower?