React Three Fiber(R3F) – Interactive 3D web development by TaeJae (Jay) Han world of coding

On April 19, 2026

Author:TaeJae (Jay) Han world of coding

Duration:9 hours 3 minutes

Release date:2025, August

Publisher:Udemy

Skill level:Intermediate

Language:English

Exercise files:Yes

Software:React, Three.js, React Three Fiber (R3F), Vite, Blender, Midjourney, MUI

Course URL:https://www.udemy.com/course/react-three-fiberr-3f

Master interactive 3D web development by combining React and Three.js with React Three Fiber.

Ready to ditch boring websites and build something that truly pops? This course dives into React Three Fiber (R3F), letting you blend the power of React with the magic of Three.js to create jaw-dropping interactive 3D experiences for the web. You’ll go from understanding the fundamentals of 3D on the web to building portfolio-ready projects that could actually be used in a professional setting.

🎯 What you’ll learn

Get practical optimization tips from a seasoned web development team leader at a major gaming company.
Learn Web3D development from scratch, step-by-step.
Master React and Three.js simultaneously using React Three Fiber (R3F).
Build with the R3F stack in a fun and accessible way, with unique learning resources.
Develop your own portfolio pieces using diverse, real-world examples.
Create websites with unique and outstanding special effects that set you apart.

✅ Requirements

Skills: Basic JavaScript knowledge is essential.
Tools: Familiarity with React is helpful but not strictly required, as the course covers it from the basics.

📝 Description

Tired of the same old website designs? This course is your ticket to creating visually stunning and interactive 3D web experiences using React Three Fiber (R3F). Taught by a seasoned web graphics engineer with a decade of experience in the 3D interactive gaming industry, you’ll learn how to seamlessly integrate React and Three.js. We’ll cover everything from core 3D concepts to advanced techniques for building engaging web content, complete with optimization strategies. You’ll discover unique R3F stack learning methods and work through practical, real-world examples that you can adapt for your own projects. Get ready to make your websites stand out in fields like VR, AR, online gaming, and blockchain.

🧑‍🎓 Who this course is for:

Developers and designers aiming to create wow-factor web designs with 3D elements.
Professionals looking to understand and utilize special tools for making websites unique and engaging.
Developers seeking a competitive edge with specialized web development skills.
Anyone eager to experiment with fun and innovative web technologies.

🧑‍🏫 About the Author

TaeJae (Jay) Han, also known as “world of coding,” is a web graphics engineer with 10 years of industry experience. Primarily a full-stack developer, Jay specializes in front-end development, with a deep passion for 2D/3D Canvas graphics on the web, including technologies like Three.js, WebGL, D3.js, and Pixi.js. He’s dedicated to creating interactive web content that enhances user experience (UX). Jay has held significant roles at companies like Neowiz, Wemade, and Dabeeo, leading teams and developing cutting-edge front-end and Three.js projects.

🏁 Final Result

A portfolio-ready interactive 3D e-commerce website featuring a customizable 3D shoe model, complete with dynamic color changes, realistic lighting, and a polished UI.

Curriculum

📋 Course content

Development Environment Setup
- Install chrome, vscode, and iterm223: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
- Install R3F, Drei2:32
React Three Fiber Fundamentals
- Section Introduction / Source Code Download0:22
- Creating an R3F Canvas9:44
- 3D Basics – Learn about Components11:37
- Renderer ( useFrame )17:09
- Camera ( Perspective, Orthographic )8:44
- Controls, Helper ( axesHelper, gridHelper )8:34
- Scene ( Mesh – Geometry + Material )14:01
- GUI Control ( leva )8:47
Transformations and Object Concepts
- Section Introduction / Source Code Download0:20
- transformation – position, size, rotation9:36
- Object3d Concept – (Scene, Group, Mesh)10:58
- Moving as a group (World, Local coordinate system)10:00
Geometry and Modeling
- Section Introduction / Source Code Download0:20
- Concepts of geometry and modeling9:52
- 3 ways to add mesh in R3F8:18
- WireFrame, shared geometry, boxGeometry options13:40
- Basic geometry types, options of circleGeometry9:31
Materials
- Section Introduction / Source Code Download1:16
- material (wireframe, basic, lambert)16:17
- material (phong, normal)13:49
- material (standard, physical, depth)11:33
- material (matcap, toon)8:52
Lights
- LIght ( Ambient, Hemisphere ) / Source Code Download14:02
- LIght ( Directional, Point, Spot )11:19
- envrinonment3:42
- 3 types of lights and shadows8:22
Interactions
- Section Introduction0:40
- r3f interaction event types and object changes10:18
- Preventing object click event, Raycaster explanation5:49
- Receiving and processing an intersect object with raycaster11:39
Project Settings and 3D Model Loading
- Section Introduction / Source Code Download0:24
- Development environment & project settings15:12
- alias settings9:58
- Preparing shoe 3D modeling files8:25
- Load and check OBJ and FBX files8:57
- Modify shoe modeling file with Blender and save and load with GLB10:36
Interactive Shoe Customization
- Click on the shoe and change the color for each part21:40
- Modeling & image file and code organization5:03
Camera Controls
- 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
E-commerce Website Design
- Display like selling shoes6:21
- Add realism by adding light and shadows (ContactShadows)13:32
- Designing a shoe e-commerce website UI using generative AI Midjourney10:51
- Creating a top menu bar using React MUI15:44
- Color List 1 – Adding Constants and SCSS files13:36
- Color List 2 – Creating a color selection list with React MUI7:38
- Color List 3 – Add colors to Recoil global status and change shoe color16:05
- Color List 4 – Add object name to Recoil global state and change shoe color14:45
- Color List 5 – Change object emissive color / add default selected object12:26