How to Create an Animated Three.JS Landing Page with Counter

Three.JS is a widely used JavaScript library for generating and creating impressive 3D graphics in browser using WebGL. In the following tutorial I will show you how to create a landing page with a counter. Covering creating geometry and adding effects, as well as adding a date counter that counts down to a deadline.

For the purposes of this demo we will be adding Three.JS to a static HTML page to keep it as simple as possible.

Step 1: Create the HTML and CSS

I am going to assume if you are reading this you have a decent understanding of HTML and CSS. First we want to just add the following CSS file to a bog standard HTML page.

Next we want to write the first part of our HTML, before proceeding into the real guts of this project – namely the Three.JS implementation.

The following code sets up our CSS and JS dependencies, make sure to download these following the structure in the GitHub link.

Step 2: Timer

OK, so now we have our dependencies in place we’re going to want to create with Three.JS.
This is a lot of code so take some time to read it to understand what is going on.

The code above now creates our scene and a timer function with our deadline and some maths to workout the time to deadline, and appends it to the element with ID ‘timer’ in the HTML.

Next we want to create those elements on the canvas which the following snippet covers.

Step 3: Three.JS Time!

Next up is the big one, using Three.JS to create some cubes and get all that groovy WebGL stuff going. Look at the code below which creates a scene, and adds 2000 cube elements to the canvas via a for loop.

So what essentially is going on here? It can seem very arcane and complicated at first but read from top to bottom and it should soon become clear.

We are first creating a new three scene, we add some lighting via light, set its position and then proceed to create a for loop to add the objects with some math to randomise their position and scale. The for loop adds the objects 2000 times in this example but you can change it to any number you want! So experiment, go crazy! The way I have learnt the most with Three.JS was experimenting!

Ok almost there, finally copy this code to create the glitch effects as well as adding event listeners for mouse movement.

And finally we want to add some code to change the color of the cubes when the user hovers over.

And that is that, you now have an ultra cool landing page incorporating Three JS and a timer!

If you are stuck and need help, you can refer to the completed solution.

YouTube Video to this Tutorial:

Check out the GitHub for another example and visit Three.JS site for more examples of the amazing things the library is capable of. If you want even more of an overview the video above covers the project in more detail.

Related Posts