How to create animated shaders with three.js

Опубликовано: 18 Март 2026
на канале: Wawa Sensei

21,352

557

How to create animated material shaders using threejs with React Three Fiber?

In this tutorial, we will discover what are shaders, how to create custom ones and how to pass adjust parameters (uniforms) using Leva. To do so we will create Rocket League animated decals styles on a Tesla Cybertruck model.

Get the starter pack here 🔗
https://github.com/wass08/cybertruck-...

#threejs #shaders #r3f

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/

Link to the final result
https://codesandbox.io/p/github/wass0...

Link to the source code
https://github.com/wass08/cybertruck-...

Three.js Journey.
https://threejs-journey.com/
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawa...

Book of Shaders
https://thebookofshaders.com/

The Study of Shaders with React Three Fiber
https://blog.maximeheckel.com/posts/t...

React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...

R3F Drei
https://github.com/pmndrs/drei

▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00 - Intro
00:18 - Final Result
00:38 - Program
00:58 - What is a Shader?
02:11 - Custom Shader Examples
02:36 - Project Setup
03:39 - Shader Material
05:10 - GLSL Format
06:00 - Stripes Shader
09:25 - Disks Shader
10:34 - Resources
11:00 - Thank you

"Tesla Cybertruck" (https://skfb.ly/6QSBr) by hashikemu is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/b....

▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
   / @wawasensei

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 The Discord Community
  / discord

📸 Instagram :
  / wawa.sensei

🎎 Facebook :
  / wawasenseiyt

🐦Twitter :
  / wawasensei

🐦TikTok :
  / wawasensei08

💻 My website :
https://www.wawasensei.dev