Three.js tutorial – building an atom

Three.js is a powerful open-source library for 3D modeling and animation using pure JavaScript.

This tutorial will cover the basics of working with three.js, and we’ll build an animated atom in the process.

Here’s what our end product will look like:


For the purposes of keeping this tutorial as simple as possible, we’ll use inline JavaScript in a single HTML file.

To begin, create an HTML file and name it atomic.html.

Before we dive into Three.js, we have a little bit of housekeeping. We’ll need some HTML in which to place our scene, so add an empty body tag. To save us the hassle of downloading the Three.js library, we can reference a copy of it online. The good folks at cdnjs have a service for just that. We’ll also create an inline script tag to place our JS in.

First, create a scene in Three.js.

Next, create a camera and add it to the scene so that we can see what happens inside of it. We’ll make an aspect ratio and set it equal to the browser width / height. By moving our camera’s z positioning, we can increase or decrease how zoomed in our camera is on the objects we’re about to create.

The last bit of housekeeping is to create a canvas renderer, set its size, add it to an HTML element on the page, and then tell it to render the scene and camera. We’ll render the scene into the body element we created earlier. A renderer will generate the image, drawing our models onto that part of the web page.

Okay, the housekeeping is finished. We’re ready to start playing with objects.

Let’s create our atom nucleus. First, we’ll create a shape using the three.js SphereGeometry, and a Mesh to cover the sphere in. We can then create the nucleus and give it our shape and mesh covering. Lastly, we’ll add the nucleus to our scene.

At this point, you should be able to open your file in a web browser and see the nucleus. Your code should look like this:

Now, its time to add the electrons. Not only are you able to add objects to the scene, you can add objects to other objects, placing them in relative position to those objects.

Do the same with electron #2 and #3.

Now, we’re ready to put the icing on the cake – animation. First, we’ll create a three.js Clock object to allow us to track time. Then, create a simple animate function, and include a timer variable that will use our new clock like a stopwatch. We’ll also need to move the renderer function out of the renderer section and inside our animate method, since we need to render every frame as it changes, rather than a single, one-time rendering.

Next, we are ready to add the animation for each of our electrons. A little geometry allows us to create a smooth orbital path. Be sure to place them inside the animate function.

We can do the same thing for our other electrons. Unfortunately, our third electron will smash into the others, and that makes the animation not-so-cool. A timer offset will ensure they orbit in harmony.

And… you’re done! Extra credit: See if you can figure out how to wrap your objects in a .jpg image or a hex color code. Hint: You’ll need a light source to be able to see the colors. Post a comment if you have any thoughts or if you’re able to pull off the extra credit. 😉

Here is the finished product – an amazingly short 100 lines of code.