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

Published: 06 April 2024
on channel: Miro Leon

3,295

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 GRADIENT HDR...
Previous Three.js Tutorial Introduction    • Create this 3D WEB RENDERING with FREE TOO...
Previous Three.js Surface Imperfection Tutorial    • Improve Your THREE.JS MATERIALS and RENDER...

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

On this page of the site you can watch the video online Create a STREAM COUNTDOWN with THREE.JS! [FREE CODE | CODEPEN] with a duration of hours minute second in good quality, which was uploaded by the user Miro Leon 06 April 2024, share the link with friends and acquaintances, this video has already been watched 3,295 times on youtube and it was liked by 84 viewers. Enjoy your viewing!