Skip to content
UdemyWeb DevelopmentPaid courseAll LevelsCertificate

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

icon
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

icon
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

icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

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


icon
More Web Development courses

$19.99

$89.99

$89.99

$79.99

$10.99

$84.99

icon
Reviews

4.6

461 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

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

Showing all 10 reviews on CourseDuck

Read all 461 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 92 / 100