Master Webgl with React Three Fiber and Threejs : course 3

Focused View

Yves Vinckier

5:01:55

198 View

1. INTRODUCTION AND THE PROJECT WE WILL BUILD

1. 01 A_INTRODUCTION AND THE PROJECT WE WILL BUILD.mp4

02:28

2.1 _sources_r3f.zip

2. 01 B_SETUP AND LINKS.mp4

09:44

2. Create the scene, shaderMaterial and add texture

1. 02 A_CREATE THE HeroText AND STYLE IT.mp4

30:43

2. 02 B_CREATE THE Scene.mp4

12:28

3. 02 C_USING shaderMaterial.mp4

20:28

4. 02 D_USING useFrame HOOK.mp4

14:20

5. 02 E_USING useLoader TO ADD TEXTURE.mp4

15:06

3. Create the Header and animate the svg wheel while scrolling

1. 03 A_CREATE THE Header and style it.mp4

11:20

2. 03 B_ANIMATE THE SVG wheel while scrolling.mp4

10:34

4. Create the image and the content section and the split text staggered animation

1. 04 A_CREATE THE ImageSection AND STYLE IT.mp4

10:37

2. 04 B_CREATE THE ContentSection AND STYLE IT.mp4

26:03

3. 04 C_CREATE A splitText FUNCTION.mp4

20:01

4. 04 D_CREATE THE STAGGERED ANIMATION.mp4

09:38

5. Create and animate the featured work section

1. 05 A_CREATE THE FeaturedWork AND STYLE IT.mp4

15:27

2. 05 B_ANIMATE FeaturedWork.mp4

11:20

6. Create the projects section and handle mouse event

1. 06 A_CREATE THE Projects AND STYLE IT.mp4

10:10

2. 06 B_CREATE THE ProjectItems AND STYLE IT.mp4

15:31

3. 06 C_HANDLE MOUSE EVENT.mp4

08:41

7. Create and animate the say Hello section

1. 07 A_CREATE THE SayHello AND STYLE IT.mp4

34:16

2. 07 B_ANIMATE THE SayHello.mp4

12:19

8. Thank you

1. 08 A_THANK YOU.mp4

00:41

Description

Master Webgl effects with React Three Fiber and animations with React and Greensock (GSAP)

What You'll Learn?

Create the Scene in React-Three-Fiber
Use shaderMaterial with React-Three/drei
Use useFrame Hook
Use useLoader Hook to add Texture
Passing props to components
Animate SVG on scroll with ScrollTrigger
Parallaxing elements using ScrollTriger and Greensock(GSAP)
Create a SplitText function to split each line into words
Handle mouse event in react
Target and Animate elements on scroll using React and Greensock
Styled your component with styled-components
Learn about geometry and meshes

Who is this for?

This course is for who want to master Webgl effects with React Three Fiber and animations with React and Greensock (GSAP)

This course is for people who care about Design and Development.

This course is also for people who love fine tune animations, motion design and want to learn how to create a meaningful interative experience with React-three-fiber and GSAP (Greensock).

React developers looking to add Three js to their skillset

What You Need to Know?

Html, css and Javascript knowledge

Node installed on your local machine

Knowledge of React

More details

Description
What will you build ?
In this course we will Create a meaningful interative experience with React and GSAP and also a couple of webgl effects using react-three-fiber and threejs. This course will go through underlying core concepts of three.js including scene, geometry, materials and textures.
We will be using react-three fiber to explore how we can create shaders.
We will create a Wave Motion Effect on images with Three.js and i will explain how to make waves on a 3D plane with Three.js using simplex noise.
We will also create some really cool parallaxing effects, staggered text animation and interactions on scroll.

This course is for people who care about Design and Development.
This course is also for those who want to learn webgl and in particular React-Three-fiber.
This course is also for people who love fine tune animations, motion design and want to learn how to create a meaningful interative experience with React, GSAP (Greensock) and React-Three-Fiber.

This is a list of the topics you'll learn in this course:
â€¢ Create the Scene in React-Three-Fiber
â€¢ Use shaderMaterial
â€¢ Use useFrame Hook
â€¢ Use useLoader Hook to add Texture
â€¢ Passing props to components
â€¢ Animate SVG on scroll with ScrollTrigger
â€¢ Parallaxing elements using ScrollTriger and Greensock(GSAP)
â€¢ Create a SplitText function to split each line into words
â€¢ Handle mouse event in react
â€¢ Target and Animate elements on scroll using React and Greensock
â€¢ Styled your component with styled-components

Happy coding !
Who this course is for:
This course is for who want to master Webgl effects with React Three Fiber and animations with React and Greensock (GSAP)
This course is for people who care about Design and Development.
This course is also for people who love fine tune animations, motion design and want to learn how to create a meaningful interative experience with React-three-fiber and GSAP (Greensock).
React developers looking to add Three js to their skillset

User Reviews

Rating

average 0

Total votes0

Focused display

React

Yves Vinckier

Instructor's Courses

Creative Director & Interactive Developer based in Lille, France with focus on Design, Motion, WebGL, Shaders and Javascript.I lead a digital team in Lille (France). I love creating brand narratives via interactive web experiences. When i'm not working, i love travelling all around the world and practising Kung Fu. I really love mixing programming, design and animation.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.