Udemy

React Three Fiber(R3F) - Interactive 3D web development

Enroll Now
  • 203 Students
  • Updated 8/2025
4.3
(23 Ratings)
CTgoodjobs selects quality courses to enhance professionals' competitiveness. By purchasing courses through links on our site, we may receive an affiliate commission.

Course Information

Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
9 Hour(s) 3 Minute(s)
Language
English
Taught by
TaeJae (Jay) Han world of coding
Rating
4.3
(23 Ratings)
4 views

Course Overview

React Three Fiber(R3F) - Interactive 3D web development

Learn how to use React and Three.js together! From 3D basics to projects that can be used in the workplace.

Interact 3D web development with React Three Fiber (R3f), and learn from a current web graphic engineer team leader of 10 years.


Learn how to use React and Three.js together! From 3D basics to projects that can be used in the workplace and optimization tips!


Aren’t you tired of creating website bulletin boards and developing pop-up windows?

Would you like to create a website for your company that is flashy, stands out, and stands out from the crowd?

Do you want to create a website that WOWs?


Industries like virtual reality (VR), augmented reality (AR), online gaming, and blockchain are asking for more colorful and interactive web content. And there's a big demand for people like front-end developers and web graphic engineers who can make it happen!

However, while there are lots of resources for game developers and Unity Developers, there aren't enough for creating web 3D.


That's where this course comes in!


You'll learn about R3F (React Three Fiber), a tool that lets you master React and Three.js at the same time.

You’ll learn about how to create a 3D website in an easier and fun way with R3f stack learning that can’t be found anywhere else!

You'll get tips and tricks from a web graphic engineer at a 3D interactive gaming company with 10 years of experience.


And you'll learn step by step, with plenty of practical real-use examples along the way.


*This lecture consists of a video using TTS (speech synthesis).  Please be sure to check the lecture [preview] before taking the course.

*This course consists of a total of 12 lectures and all lectures have currently been translated and uploaded.

*Please let me know if there is anything strange about the translation or subtitles.


Course Content

  • 10 section(s)
  • 58 lecture(s)
  • Section 1 Development environment settings
  • Section 2 R3F
  • Section 3 Object 3D
  • Section 4 Geometry
  • Section 5 Material
  • Section 6 Light / Env / Shadow
  • Section 7 Interaction & event / raycaster
  • Section 8 [Project] E-commerce shoe making project setting
  • Section 9 [Project] Insert shoe 3D modeling file
  • Section 10 [Project] Camera Controls

What You’ll Learn

  • Practical tips and optimization methods learned from a current full-time web development team leader in a major gaming company.
  • Learn Web3D from the ground up step by step.
  • Master React & Three js all at once with React Three Fiber (R3F).
  • Build R3F Web through learning R3F stack that you won’t be able find anywhere else with ease and fun.
  • Create your own portfolio through working with various examples that can put into real use and apply to your own with variation.
  • After the course, you will be able to build websites with outstanding special effects that is unique and different from anyone else.

Reviews

  • I
    Irfan Ismail
    5.0

    come on

  • H
    Hemant Menon
    5.0

    Really good course for an absolute beginner. I highly recommend it

  • C
    Chaklader Asfak Arefe
    5.0

    I only into the first chapter and the course may get better as I progress. But, his explanation about scene, camera and renderer is the most creative way of putting this altogether. I highly recommend this course. PS: I'm almost finished the course and this is the best course for R3F, the instructor is very knowledgeable and also, creative with explanation. My only regret if he speaks English, the course will be 2x better. The person translate is not so good and probably, isn't technical

  • J
    Js R
    5.0

    The explanation is provided while looking at the three.js official site, so it is good for applying to other things. If you are new to R3F, this is a good choice.

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed