Create a STREAM COUNTDOWN with THREE.JS! [FREE CODE | CODEPEN]

JOIN OUR DISCORD!   / discord  

In this tutorial, we create a 3D stream countdown with Three.js! I learned a lot by going through the code and breaking it down, so I hope you find some value in it as well!

Get my Gradient HDR Pack to support me! https://miroleon.gumroad.com/l/gradie...

Previous Three.js Tutorial Gradient HDRs    • Level Up Your Renderings with GRADIEN...  
Previous Three.js Tutorial Introduction    • Create this 3D WEB RENDERING with FRE...  
Previous Three.js Surface Imperfection Tutorial    • Improve Your THREE.JS MATERIALS and R...  

Codepen for the Stream Countdown – https://codepen.io/miroleon/pen/abMzGNZ
GitHub for the Stream Countdown – https://github.com/miroleon/stream-co...

Get an animated 3D model via Mixamo – https://www.mixamo.com/

Get 2 Freebies – https://miroleon.gumroad.com/l/gradie...
Find the GitHub Repo with the Freebies and a Three.js Example – https://github.com/miroleon/gradient_...

Find my other artwork on Instagram –   / miroxleon  
Follow me on Twitter –   / miroxleon  
For all other links and contact, visit my website – https://miroleon.de/links

Chapters:
0:00 Introduction
1:10 Objectives for this Project
2:18 HTML Setup
2:25 HTML SVG Circles
4:20 CSS Setup
4:40 Timer Styling
6:05 Ring Styling
8:10 Card Styling
8:32 JS Setup
9:11 JS Countdown
12:55 Animating Countdown Ring
14:35 Three.js Setup
15:14 Gradient HDR
15:49 Material Setup
16:23 FBX Model and Mixamo for Animations
17:30 Cubic Ease for Three.js
20:14 Eased Camera Movement
22:58 OBS Setup for Three.js
23:31 Update the Countdown Time
23:38 Outro