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.
- 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.