Uploaded February 2023 | Updated September 2026, 2 weeks ago
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 🔗
github.com/wass08/cybertruck-shaders-r3f-tutorial-starter
#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
codesandbox.io/p/github/wass08/cybertruck-shaders-r3f-tutorial-final
Link to the source code
github.com/wass08/cybertruck-shaders-r3f-tutorial-final
Three.js Journey.
threejs-journey.com
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawasensei1
Book of Shaders
thebookofshaders.com
The Study of Shaders with React Three Fiber
blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
R3F Drei
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" (skfb.ly/6QSBr) by hashikemu is licensed under Creative Commons Attribution (creativecommons.org/licenses/by/4.0/).
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
discord.gg/2wBhwchcWu
📸 Instagram :
instagram.com/wawa.sensei
🎎 Facebook :
facebook.com/wawasenseiyt
🐦Twitter :
twitter.com/wawasensei
🐦TikTok :
tiktok.com/@wawasensei08
💻 My website :
https://www.wawasensei.dev
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 🔗
github.com/wass08/cybertruck-shaders-r3f-tutorial-starter
#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
codesandbox.io/p/github/wass08/cybertruck-shaders-r3f-tutorial-final
Link to the source code
github.com/wass08/cybertruck-shaders-r3f-tutorial-final
Three.js Journey.
threejs-journey.com
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawasensei1
Book of Shaders
thebookofshaders.com
The Study of Shaders with React Three Fiber
blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
R3F Drei
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" (skfb.ly/6QSBr) by hashikemu is licensed under Creative Commons Attribution (creativecommons.org/licenses/by/4.0/).
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
discord.gg/2wBhwchcWu
📸 Instagram :
instagram.com/wawa.sensei
🎎 Facebook :
facebook.com/wawasenseiyt
🐦Twitter :
twitter.com/wawasensei
🐦TikTok :
tiktok.com/@wawasensei08
💻 My website :
https://www.wawasensei.dev
