Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
12 Hour(s) 26 Minute(s)
Language
English
Taught by
Ahmad Al-shurafa
Rating
1 views
Course Overview
Learn everything you need to build immersive and creative Websites using Three JS and React
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
Course Content
- 7 section(s)
- 51 lecture(s)
- Section 1 Three.Js Refresher
- Section 2 React
- Section 3 React Three Fiber
- Section 4 React Three Drei
- Section 5 React Spring
- Section 6 React Three Rapier
- Section 7 React Post-Processing
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 . . .
Reviews
-
AAbubakar Siddiq
very detailed explanation, easy to understand
-
PPlatform RBT MS\EAS13-VM
Very easy to understand!
-
AAkindeji Hill
Very detailed explanations. Answers my questions as soon as I think them, like magic!
-
GGunasekaran Arumugam
This course is truly excellent. The instructor not only covers all the fundamental concepts but also introduces advanced topics in a clear and approachable manner. His explanations are simple, practical, and easy to follow, which makes learning very effective. The course has gone well beyond my expectations. Thank you for such a valuable learning experience.
