Create a STREAM COUNTDOWN with THREE.JS! [FREE CODE | CODEPEN]
Channel: Miro Leon
Date: 2024-04-06

JOIN OUR DISCORD! https://discord.gg/9JtYAqdWzq

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/gradient_hdr_pack

Previous Three.js Tutorial Gradient HDRs https://youtu.be/Muq-VpaPzoE
Previous Three.js Tutorial Introduction https://youtu.be/l7zkOM4FvZQ
Previous Three.js Surface Imperfection Tutorial https://youtu.be/6x6h9ALZ_-Q

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

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

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

Find my other artwork on Instagram – https://www.instagram.com/miroxleon/
Follow me on Twitter – https://twitter.com/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