A Beginner’s Guide to Three.js

How to build a 3D textured cube

Image from Nahuel A. Verónhttps://medium.com/@Negan1911

During our hackathon working time at Grace Hopper (Fullstack Academy’s bootcamp for Women and Non-Binary People), I decided to dig deeper into Design and animations as the instructors’ priority during Junior Phase was to make sure we were able to build a fully working website first, regardless of its naive UI/UX. It did make sense at this point since we had so much to learn, but as I am passionate about delivering intuitive, beautiful and modern visual experiences, I was excited about the opportunity to pick any technology and explore it: as I only had a day or two for this project, I decided to create a “Visual Portfolio” to showcase my exploration of Three.js, Bootstrap, jQuery and Anime.js: https://youtu.be/552dsPOAqvU.

In this short tutorial, I am going to focus on Three.js and explain a step-by-step and intelligible approach for anyone who wants to start with a simple animation. Now, there are different shapes and animation features we can choose from on threejs.org but here we will focus on a revolving cube to which we can apply the texture of our choice (check the end of the article to see a few examples I created for this project).

Ready? Here’s the recipe to create a revolving textured cube.

  1. HTML template

Create the following html template locally along with a copy of three.js in the js/directory of your choice and open it in your browser.

2. Create a Scene, a Camera and a Renderer

Before we can use the Three.js technology, we first need to set up three things: “a scene” (which allows us to set up what is to be rendered and where), a camera and a renderer (to render the scene using the camera).

The scene is where you set up your object, light and camera — yes, it does sound like we’re shooting a real movie.

The init function is used to initialize so the background doesn’t resize when we change the size of the window.

Create a camera: there are different cameras you can choose from. In this example, we will use the Perspective projection (P), which takes the following arguments:

  • Fov: vertical field of view
  • Aspect: aspect ratio
  • Near: near plane
  • Far: far plane

Set the size of the Renderer:

Render the renderer in the html. We get a black background at this point where we can render our object:

3. Time to create our object

We are going to use a BoxGeometry: BoxGeometry is a geometry class for a rectangular cuboid to which we give a certain ‘width’, ‘height’, and ‘depth’. There is a code example mentioned in the documentation that we can use:

We are mentioning the depth, width and height in the parenthesis. If we want to paint the cube with a certain color, this is how we do it:

If, like in this tutorial, we prefer using a texture/material fabric, we can render it that way:

Let’s now add our cube to the scene…

… and adjust the camera position. We need to reposition the camera before calling the function animate:

Now we need a function. We are going to create a loop that makes the render draw the scene every time it is refreshed:

After that, we need to fix the resizing of the window:

4. Event Listener

Finally, we need to set up an event listener to call the function above:

Let’s now call init and animate:

There you go! You can play with different textures and colors if you’d like.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store