Skip to main content

Creative coding with three.js

The idea of using programming as a creative medium isn't new. In fact, people began using computers as a creative outlet almost as soon as computers became widely available.

Creative coding differs from traditional programming in that the intent is expression rather than function. This intention separates it from traditional software development, and even from game development. Though in the case of the latter, the line between expression and function is often blurry.

Tinkering and experimentation are embraced by creative coding. And there are many "happy accidents," in the words of painter Bob Ross, that lead to interesting and engaging works.

What you will build

This tutorial will guide you through assembling a set of building blocks that you can use to experiment with 3D graphics in your web browser. You'll then assemble a complete project using these building blocks. The animation below is what you'll be building.

An animation of a grid of cubes rotating together with each cube randomly changing its size

You'll be using JavaScript and three.js for this project. Three.js is a general purpose 3D graphics library that works well in modern web browsers such as Chrome, Edge, Firefox, and Safari.

Who this tutorial is for

This tutorial is for anyone who wants to use programming as a way to create visual expressions and who has some experience with JavaScript. This tutorial is not an introduction to programming. If you're not already familiar with concepts such as variables, types, arrays, objects, loops, conditional statements, and functions, you should complete an introductory tutorial first. You'll find links to introductory JavaScript tutorials in the "Additional resources" section below.

Many existing tutorials provide a quick how-to demonstration for a particular technology. There are also many tutorials about how to build a copy of an existing work. Both types are useful, but neither provides a structured platform for continued learning and experimentation.

This tutorial aims to fill that gap. Because the goal of this tutorial is to leave you with tools you can reuse, you'll find that it is longer than most introductory tutorials. By the end of this tutorial you'll have a platform and starting example to continue working with. With these at hand, you'll be able to get started more quickly on your own creative coding projects.

If you are a more experienced JavaScript developer, you may still find this tutorial to be a helpful introduction to three.js. Keep in mind, however, that the code is structured towards helping those with less programming experience experiment with 3D graphics. This means that optimizations and adherence to certain production patterns have been given less priority than clarity and readability.

How this tutorial is structured

This tutorial is split into three modules that build on each other. The first module, "Setting up a scene," guides you through assembling the foundation that the remainder of the tutorial builds on. The second module, "Adding objects," will show you how to add objects to your scene and do a basic animation. Finally, in the third module, "Adding behavior," you'll add some basic behavior to the objects in your scene.

At the end of each module, you'll find a postscript and a checkpoint. The postscript offers some optional exercises to try with the code and additional resources that are relevant to the module. The checkpoint contains all the code you've assembled in the module, and they exist to provide you with a safety net for experimentation. So try things, experiment, and break things. You can use the checkpoints to quickly get back to a working state.

How to enter the code

The tutorial is written with an online code playground in mind and was tested with JSFiddle. See the "Additional resources" section below for more options. Familiarize yourself with your code playground before you start this tutorial.

As you progress through each section, you'll be shown additional blocks of JavaScript code. Copy and paste each of these blocks at the end of the JavaScript panel of your code playground.

If you are an experienced JavaScript developer, you likely already have a preferred development workflow. This tutorial should fit into that workflow as well.

Additional Resources

Throughout the tutorial, you'll find links to additional resources. These are provided in the hope that they may be useful. Reasonable effort has been made to ensure their soundness, but their presence should not be taken as an endorsement.

Online code playgrounds

There are many online code playgrounds. Most offer some level of free usage, but many require you to create an account before using them. Be sure to review the privacy policy of any online service you use.

Learning JavaScript

If you are completely new to JavaScript, or programming in general, you may find one of the resources below useful.

The contents of this tutorial are licensed under a Creative Commons Attribution-ShareAlike license. The source code used for the tutorial demos is licensed under the MIT License.