3D on the Web

Shaders, meshes, and a solar system you can click.

This course has five pages that draw 3D graphics. Every one of them runs in a browser with nothing installed. The first two use no library at all. You write the two small programs that the graphics card runs, and you put a triangle on the screen yourself.

Then the course changes gear. The last three lessons use three.js, which is the library most 3D websites are built with. It writes those small programs for you. The point of doing it the hard way first is that you can tell what the library took off your hands, and you can work out what is wrong when a screen goes black.

Do the lessons in order. Each one gives you a copy of the page beside the guide. Change your copy and watch what happens.

The last three lessons fetch three.js from the internet the first time they run. If your school network blocks it, the first two lessons still work, because they depend on nothing.

Who it's for

Students who have finished JavaScript. The platformer course helps too, because it uses the same canvas and the same animation loop, but it is not required. You need to be comfortable with arrays, loops, and functions.