Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

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

Name: React Three Fiber(R3F) - Interactive 3D web development
Rating: 4.3 (31 reviews)

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

Created byTaeJae (Jay) Han world of coding

Last updated 8/2025

English

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.

Course content

11 sections • 58 lectures • 9h 3m total length

Install chrome, vscode, and iterm23:23
Install nvm ( npm / node )5:09
Create a project with Vite8:37
How to import module-level components7:14
Why lecture on js and ts/typescript3:50
Discover why the course teaches TypeScript in a React three fiber setting, using any for props and simple string types, with hello.tsx, import/export basics, and a move toward 3JS.
Install R3F, Drei2:32
Install r3f and drei to combine three.js with React, then run npm install and the dev server to build a 3d web page using React Three Fiber.

Section Introduction / Source Code Download0:22
Creating an R3F Canvas9:44
3D Basics - Learn about Components11:37
Explore the core 3D concepts of scene, camera, and renderer in 3js, and learn how moving the camera versus objects shapes the rendered view.
Renderer ( useFrame )17:09
learn how to render a 3d scene with react three fiber, using useThree and useFrame to manage the renderer, scene, camera, and per-frame updates, including automatic resize handling.
Camera ( Perspective, Orthographic )8:44
Controls, Helper ( axesHelper, gridHelper )8:34
Scene ( Mesh - Geometry + Material )14:01
Explore orbit controls, axes helper, and grid helper in a React Three Fiber scene, install orbit controls via npm and interactively navigate a 3D world.
GUI Control ( leva )8:47
Install Leva and import useControls to expose live GUI controls for changing the canvas background color, grid segment, and mesh rotation in Three.js.

Section Introduction / Source Code Download1:16
Learn the basic concept of material.

**How to run source code**

1. Download source code data
2. Open the terminal and go into the folder.

-npm i
-npm run dev

You can check the example. http://127.0.0.1:5173/
material (wireframe, basic, lambert)16:17
Learn to work with wireframe, basic, and lambert materials in React Three Fiber, adjusting color, transparency, opacity, side rendering, depth test and depth write, fog, and emissive lighting effects.
material (phong, normal)13:49
Compare Phong and Lambert materials in r3f, showing Phong's reflective light with specular, shininess, and flat shading, and use normal material to map normals to rgb for visualization.
material (standard, physical, depth)11:33
material (matcap, toon)8:52

Section Introduction0:40
Learn and practice the concept of interaction by clicking on objects in 3D space.

**How to run source code**

1. Download source code data
2. Open the terminal and go into the folder.

-npm i
-npm run dev

You can check the example. http://127.0.0.1:5173/
r3f interaction event types and object changes10:18
Preventing object click event, Raycaster explanation5:49
Receiving and processing an intersect object with raycaster11:39

Section Introduction / Source Code Download0:24
As a practical project, we will create our shoe e-commerce site.

**How to run source code**

1. Download source code data
2. Open the terminal and go into the folder.

-npm i
-npm run dev

You can check the example. http://127.0.0.1:5173/
Development environment & project settings15:12
alias settings9:58
Learn to set up path aliasing in a vite and tsconfig project, configuring baseUrl and paths to map src and components for showroom and three js components.

Modeling & image file and code organization5:03
Using the Camera Controls Library8:47
Differences between Zoom vs Dolly and how to use it7:00
Move the camera smoothly14:15
Create a turntable effect with Sin & Cos8:23
Receiving and using events from camera controls (control, sleep...)13:39
Learn to receive and use camera controls events in React Three Fiber to manage fitting and spinning. Use useState, useEffect, and addEventListener to handle sleep, wake, and control events.
Display like selling shoes6:21
Add realism by adding light and shadows (ContactShadows)13:32

Requirements

Anyone who knows javascript basics.
Having an elementary knowledge about React helps, but even if you don’t, you can still learn from the ground up!

Description

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.

Who this course is for:

You are a developer/designer who wants to have web designs that wow through 3D.
You are a developer/designer who wants to understand special tools that can make websites outstanding and interesting.
Developer who wants to have a weapon that is different from others
Developer/designer who wants to start trying fun things on the web

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

What you'll learn

Explore related topics

Course content

Development environment settings6 lectures • 31min

R3F8 lectures • 1hr 19min

Object 3D4 lectures • 31min

Geometry5 lectures • 42min

Material5 lectures • 52min

Light / Env / Shadow4 lectures • 37min

Interaction & event / raycaster4 lectures • 28min

[Project] E-commerce shoe making project setting3 lectures • 26min

[Project] Insert shoe 3D modeling file4 lectures • 50min

[Project] Camera Controls8 lectures • 1hr 17min

Requirements

Description

Who this course is for: