Three.js, React Three Fiber, Drei, React Spring & More (Udemy.com)
Learn everything you need to build immersive and creative Websites using Three JS and React
Created by: Ahmad Al-shurafa
Last updated November 2024
What you will 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
How it compares
Against the other 815 rated Udemy courses in Web Development on CourseDuck:
- Rating4.6 out of 5higher than 70% of them
- Reviews461#302 of 816 by number of reviews
- Length12.4 hourslonger than 66% of them
- Last updatedNovember 2024earlier than 52% of them
Course 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
Instructor Details
- 4.6 Rating
461 Reviews
Ahmad Al-shurafa
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
More Web Development courses
Python Fullstack Mastery: Build Modern Web Apps with Django (2025)
5.0 (165 Reviews)
Provider: Udemy
Time: 35h
$19.99
NgRx Signal store for Angular - The missing guide (2026)
4.9 (436 Reviews)
Provider: Udemy
Time: 11.3h
$89.99
Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia) (2024)
4.9 (177 Reviews)
Provider: Udemy
Time: 7.6h
$79.99
Build a URL Shortener App with ASP.NET: Step by Step (2026)
4.9 (100 Reviews)
Provider: Udemy
Time: 9.6h
$10.99
The Complete Elixir and Phoenix Bootcamp (2021)
4.8 (7,773 Reviews)
Provider: Udemy
Time: 17.4h
$84.99
Reviews
By Mohamed Hesham Elkhiouty on 7/7/2026
The course is excellent and packed with valuable information. The instructor explains the topics clearly and does a great job throughout the course. My only suggestion is to split some of the lessons into smaller videos. In several cases, a single video covers multiple new concepts, which makes it harder to find and review a specific topic later. Shorter, more focused lessons would make the course even easier to navigate and use as a long-term reference.
By Dominion ikonwa on 3/7/2026
Yeah it was, it really helped me but i was thinking there will be a finally project, like a full web 3D project that will combine the techniques we have learnt in the course that student can add to their portfolio or possibly project ideas to build
By Gunasekaran Arumugam on 9/13/2025
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.
By Greg Barker on 1/13/2025
Quality lessons that teach you how to use the framework properly. 3d on the web is a quirky thing still and this course is the best I've seen so far for demistifying the errors that occur when trying to build what's in my head.
By Chaklader Asfak Arefe on 12/17/2024
I almost completed the course and the instructor is very knowledgable and more importantly, his way of explaining is super lucid and easy to follow. The only issue I felt is if he zoom little during the time of coding, it will be very helpful and easy to follow. I use an ultra-wide monitor and its lkittlew difficult for me. Overall, I'm super grateful for him to create this course.
By Cameron Jensen on 5/9/2024
Great course. Instructor does a great job of going through all aspects of 3D web development using react three fiber. Only thing stopping me from giving it full 5 stars is the lack of a cohesive project that takes all aspects and combines them to one application
By Yung-Shun Chang on 5/8/2024
Overall a GOOD course. Lots of contents more than I expected. Pros: 1. Rare resources 2. Capable teacher 3. Good introduction to an advanced domain Cons: 1. It will be better if there are more real world examples not just some very simple demos. 2. After finishing this course, you still need much effort in order to master this topic.
By Rutuparn Dalvi on 1/14/2024
The Course Quality is extremely high. The instructor knows what he is doing really well and is able to impart that information in a highly effective manner. As a Unity Developer, I can say that Ahmad seems to know and teach game development tooling in a better way that most Game Engine instructors. I can see his courses getting more traction if he focuses more on the aesthetics of the course. But, I am totally satisfied.
By Steven Manus on 12/26/2023
Material is good, but the presentation is uneven. The lecturer will spend a lot of time with trivial descriptions (e.g. how to define a path) and then pass over important concepts (e.g. using "attach" and "primitive"). When he does explain concepts he does a good job.
By Balogun Muhammad Awwal on 11/19/2023
This course is highly above what I actually anticipated with clear explanation and the instructor also showed his talent and his deep understanding about Three.js with React. This course actually help me with my 3d skills, thank you so much I really appreciate
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 92 / 100






