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! miroleon.gumroad.com/l/gradie...
Previous Three.js Tutorial Gradient HDRs • Level Up Your Renderin...
Previous Three.js Tutorial Introduction • Create this 3D WEB REN...
Previous Three.js Surface Imperfection Tutorial • Improve Your THREE.JS ...
Codepen for the Stream Countdown - codepen.io/miroleon/pen/abMzGNZ
GitHub for the Stream Countdown - github.com/miroleon/stream-co...
Get an animated 3D model via Mixamo - www.mixamo.com/
Get 2 Freebies - miroleon.gumroad.com/l/gradie...
Find the GitHub Repo with the Freebies and a Three.js Example - 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 - 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

[@kaushikkaranam6788]

Man how are you so artistic? Inspired.

[@three30am]

This is just awesome. Keep giving us such great content.

[@miroxleon]

Thank you so much for your kind comment! This made my day! It took a while to finish this video, but I’m back with hopefully much more to come soon!

[@mr.fabian8471]

Thanks

[@miroxleon]

Thank YOU for watching and leaving a comment!