Three.js, React Three Fiber, Drei, React Spring & More

Focused View

Ahmad Al-shurafa

10:50:10

28 View

1. Three.Js Refresher

1.1 Last Code.zip

1. 1 - Hello Cube.mp4

32:40

2.1 Last Code.zip

2.2 Startup.zip

2. 2 - Transformation.mp4

24:33

3.1 Last Code.zip

3.2 Startup.zip

3. 3 - Animation.mp4

18:07

4.1 Last Code.zip

4.2 Startup.zip

4. 4 - Webpack.mp4

10:50

5.1 Last Code.zip

5.2 Startup.zip

5. 5 - Geometries.mp4

19:23

6.1 Last Code.zip

6.2 Startup.zip

6. 6 - Materials.mp4

27:38

7.1 Last Code.zip

7.2 Startup.zip

7. 7 - Particles.mp4

16:17

2. React

1.1 startup.zip

1. 1 - Introduction to React.mp4

13:13

2.1 last code.zip

2.2 startup.zip

2. 2 - First React Application.mp4

08:10

3.1 last code.zip

3.2 startup.zip

3. 3 - React Rules.mp4

08:25

4.1 last code.zip

4.2 startup.zip

4. 4 - Styles in React.mp4

03:19

5.1 last code.zip

5.2 startup.zip

5. 5 - Components.mp4

03:58

6.1 last code.zip

6.2 startup.zip

6. 6 - Building a Counter using UseState hook.mp4

15:05

7.1 last code.zip

7.2 startup.zip

7. 7 - UseEffect.mp4

13:37

8.1 last code.zip

8.2 startup.zip

8. 8 - Rendering Elements Conditionally.mp4

05:56

9.1 last code.zip

9.2 startup.zip

9. 9 - Props.mp4

16:53

10.1 last code.zip

10.2 startup.zip

10. 10 - React.memo.mp4

04:46

11.1 last code.zip

11.2 startup.zip

11. 11 - UseRef.mp4

05:57

3. React Three Fiber

1. 1 - Introduction to React Three Fiber.mp4

03:42

2.1 last code.zip

2.2 startup.zip

2. 2 - Build Our First React Fiber Application.mp4

41:14

3.1 last code.zip

3.2 startup.zip

3. 3 - Build Our First React Fiber Application.mp4

18:20

4.1 last code.zip

4.2 startup.zip

4. 4 - useLoader.mp4

03:30

5.1 last code.zip

5.2 startup.zip

5. 5 - Particles.mp4

12:47

6.1 last code.zip

6.2 startup.zip

6. 6 - Loading 3D Model Playing Animations.mp4

36:22

7.1 last code.zip

7.2 startup.zip

7. 7 - Debug.mp4

12:50

8.1 last code.zip

8.2 startup.zip

8. 8 - Events.mp4

13:55

4. React Three Drei

1. 1 - Introduction To Drei.mp4

00:57

2.1 last code.zip

2.2 startup.zip

2. 2 - Environment & Staging.mp4

28:30

3.1 last code.zip

3.2 startup.zip

3. 3 - Camera.mp4

06:47

4.1 last code.zip

4.2 startup.zip

4. 4 - Controls.mp4

01:07:27

5.1 last code.zip

5.2 startup.zip

5. 5 - Text, 3DText and Html.mp4

13:30

6.1 last code.zip

6.2 startup.zip

6. 6 - Positional Audio.mp4

02:42

7.1 last code.zip

7.2 startup.zip

7. 7 - Shaders.mp4

20:49

8.1 last code.zip

8.2 startup.zip

8. 8 - MeshPortalMaterial.mp4

18:51

5. React Spring

1. 1 - Introduction to React Spring.mp4

03:11

2.1 last code.zip

2.2 startup.zip

2. 2 - Getting Started.mp4

10:14

3.1 last code.zip

3.2 startup.zip

3. 3 - Imperative API.mp4

08:29

4.1 last code.zip

4.2 startup.zip

4. 4 - Props.mp4

23:13

5.1 last code.zip

5.2 startup.zip

5. 5 - SpringRef.mp4

07:20

6.1 last code.zip

6.2 startup.zip

6. 6 - useSprings.mp4

13:28

7.1 last code.zip

7.2 startup.zip

7. 7 - useTrail.mp4

05:27

6. React Post-Processing

1.1 last code.zip

1.2 startup.zip

1. Post-Processing.mp4

27:48

Description

Learn everything you need to build immersive and creative Websites using Three JS and React

What You'll Learn?

How to install ThreeJs library and import it into your project
Learn the basics of ThreeJs with many demonstrations and example code
Learn about the ThreeJs Scene, Camera and Renderer
Creating our very first scene in ThreeJs
How to move and animate the Objects
Learn about Webpack, NodeJs ,and serving ES6 modules to the browser clients.
Learn about Geometries such as Box, Sphere, Plane, Torus, TorusKnot and more
Learn about the Basic, Normal, Lambert, Phong, Standard, Matcap and other materials
We also will learn how to create a stunning Scene using Particles
Learn React Basics and hooks such as useState,useEffect,useRef, etc
Learn what is meant by JSX
Will also learn about React Rules, Styles, etc
Will bring everything we have done so far in native threejs to react environment under what is called React Three Fiber
A lot of Drei components will be covered
Learn how to animate things while scrolling
How to add sound in the project
Shader Materials
We will learn an animation library called React Spring
React Post Processing
And so much more . . .

Who is this for?

Beginner Web developers who wants to learn about ThreeJs and React Three Fiber

Front end developers wanting to learn about ThreeJs and React Three Fiber concepts

Web developers who wants to create immersive and creative 3D websites

What You Need to Know?

A device that you can install VSCode or any Code Editor

Basic JavaScript knowledge, you should be familiar with let, const, loops, arrays, functions

And the most two important things are to be patient ( please be patient ), and to have a desire to build 3D Web Applications

More details

Description
Welcome to my course on React Three Fiber, where you will learn how to build immersive and creative 3D websites using Three.js and React
In this course, you will learn all about Three.js and some of React basics so that you are able to create 3D websites under a library called React Three Fiber
This course is in 6 main sections,
1. Three.js Refresher: Some lessons from my three.js course will be reviewed, so you can understand what will be explained later
2. React: Some React basics will be explained cause this course is mainly about writing React code
3. React Three Fiber: This is where the actual course begins, where you will learn how to write and combine Three.js with React
4. React Three Drei: React is about building reusable components, We will cover a lot of the components that Drei have
5. React Spring: We will learn a physics-based animation library to make your site looks better
6. React Post-Processing: Post-processing are filters that will add beauty to the scene

All code is provided in the resources folder where you can find the Startup folder which is the code at the beginning of the lecture, and the Last Code folder which is the written code after we finished the lesson.

If you encounter any questions regarding a particular lesson, I hope that you will ask the question in the questions section I will answer all questions, so don't be afraid to ask any question

Thanks for participating in my course, and I will see you there.

Ahmad
Who this course is for:
Beginner Web developers who wants to learn about ThreeJs and React Three Fiber
Front end developers wanting to learn about ThreeJs and React Three Fiber concepts
Web developers who wants to create immersive and creative 3D websites

User Reviews

Rating

average 0

Total votes0

Focused display

Hello, I'm Ahmad, I have obtained a master's degree in Computer Engineering, and I am also a front-end web developer who has worked professionally for clients in companies and as a freelancer, I have been teaching for 7 years, the beginning of my teaching was traditional teaching, and now I decided to start a new and enjoyable journey, which is teaching via the Internet, I hope you will benefit from the courses that I will offer

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.