Interactive 3D Web Development Learning with React Three Fiber (R3F)

Lecture Topic 📖

due to industries such as the Metaverse, XR (VR, AR), web (HTML5) games, and blockchain,

Demand for 2D/3D web content with spectacular interactions is surging.

Additionally, demand for front-end development + web graphics engineers is surging in the job market as well.

The demand for 2D/3D sites with brilliant interactions, rather than simple websites, will continue.

However, while there are many 3D courses for game developers and Unity developers, there is a significant lack of courses for Web 3D.

You will learn about R3F (React Three Fiber), which allows you to learn and master React and Three.js all at once.

Create 3D websites more easily and fun by learning the R3F stack, which you won't find anywhere else!

Target Audience / Course Objectives 🙆‍♀️

Who should take this course?

• Developers/designers who want to create eye-catching, special websites
• Developers who want to implement 3D on the web
• Developers who want to have a weapon that sets them apart from others
• Developers/designers who want to start trying fun experiments on the web

Do you enjoy the work of building websites?

• Aren't you tired of just making website bulletin boards and developing pop-up windows?
• Do you want to create a web project that stands out from others?
• Is your company asking you to create a flashy, eye-catching website that stands out from the rest?
• How was this website made? Do you want to create a site with a "WOW" factor?

By taking this course, you will

• You will learn about the basics of Web 3D
• React and Three.js all at once! You will learn how to use R3F (react-three/fiber)
• A course where you can build your skills and master the material by coding along step-by-step.
• Practical tips and optimization methods learned from a current development team lead

Course Features ✨

React and Three.js all at once! React Three Fiber (R3F)
From 3D basics to real-world projects and optimization tips!

• You can take this course if you have a basic understanding of Javascript.
• It is better if you have a basic understanding of React, but it is okay if you don't.
• It's perfectly fine if you have no prior knowledge of Web 3D. I assume you know nothing and explain everything starting from the basics.
• The lecture is conducted in Typescript and example codes are shared so that they can be used immediately in practice.
• In each section, important basic concepts are explained with a focus on theory (10–25%).
• Each section consists of hands-on practice-oriented lectures where we work together step-by-step (75~90%)

What you will learn 📚

< Fun explanation of 3D basics >

Understand it perfectly by comparing it to actual filming locations and animation sets!

Theoretical explanation of a web 3D environment that is identical to a real-world environment!

< Geometry, Material >

Various shapes of objects, materials, and even light and shadows!

<3D web E-commerce project>

Projects that can be used immediately in practice, along with optimization tips!

DEMO : https://ecommerce.taejaehan.com/

Frequently Asked Questions Q&A 💬

Q. I am a complete beginner and a non-major. I want to take the course, but will a non-major like me be able to understand it?
A. Hello! In my opinion, even as a non-major, if you know the basics of JavaScript, you should have no problem following the class. If you don't know JavaScript, it might get a bit difficult towards the latter half. This also varies from person to person, but I've seen people learn by looking up parts they don't know through other free lectures or Google. If there's anything you don't understand, please don't hesitate to ask lots of questions!

Q. Is there anything I need to prepare or have ready before taking the course?
A. All you need to prepare is a computer (Mac or Windows) so you can follow along with the lectures. All other necessary tools can be downloaded for free from the internet, including Chrome, VS Code, npm, Blender, and more. Additionally, I am preparing all the necessary materials, resources, and code used in the lectures so that they can be downloaded.

Q. Why should I learn React Three Fiber (R3F)?
A. Currently, React can be considered the mainstream in web development. However, I believe that knowing only React isn't enough to differentiate yourself from others. That's why I think you can create your own unique roadmap by equipping yourself with the weapon of Web 3D, which is bound to keep evolving now and in the future! Furthermore, demand for 2D/3D web content with spectacular interactions is surging due to industries such as the Metaverse, XR (VR, AR), web (HTML5) games, and blockchain. Therefore, the need for 2D/3D sites with flashy interactions, rather than just simple websites, will continue to persist. Accordingly, the demand for 3D web developers is also steadily increasing. Let's create eye-catching, unique websites together!

Notes before taking the course 📢

Practice Environment

• The course uses macOS with Apple Silicon, but Intel-based Macs or Windows environments are also compatible.
• Programs used: Chrome, VS Code, Blender, etc.
• PC Specifications: CPU 2.0GHz or higher, RAM 8GB or higher, and a WebGL-supported graphics card are recommended.

Learning Materials

• 각 섹션별 소스코드 압축 파일 제공 ( zip ) 
  
  • 0, 2, 3, 4, 5, 6, 7 Lectures + Practical Project
  • Shoe 3D modeling files provided

Prerequisite Knowledge and Precautions

• It is possible if you have a basic knowledge of JavaScript.
• It is better if you have a basic understanding of React, but it is okay if you don't.
• I will answer your questions as early as the same day, or within 3 days at the latest.
• Content for the web 3D e-commerce project is being continuously updated.

About the Instructor ✒️

Hello. I am Taejae Han, a web graphics engineer with 10 years of experience. I am primarily a full-stack developer, but I focus on front-end work :)

I have been developing front-ends using frameworks such as Angular and React. However, my favorite work is projects that involve 2D/3D Canvas graphics on the web (HTML5), such as Threejs, WebGL, D3js, and Pixi.js. I am full of passion for interactive web content that creates new and creative user experiences (UX). Let's create a fun project together!

Experience/Portfolio/Personal Videos

• 10th-year Interactive 3D Frontend Developer
• (Current) Neowiz - HTML5 Game Developer
• (Current) Modulabs - Generative Art Lab Director
• Wemade - DeFi Frontend Development Team Lead
• Dabio - Three.js Development Team Lead
• Dmajor - Senior Frontend Developer
• Modulabs - Head of Interactive Art of Web Lab
• Addpac - Junior Frontend Developer
• NHN Naver Japan - UX/UI Designer
• Madman Post - CG Effect Artist
• Kookmin University - Industrial Design Major