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

Lecture Topic 📖

by industries such as metaverse, XR (VR, AR), web (HTML5) games, and blockchain

Demand for 2D/3D web content with stunning interactions is rapidly increasing.

Additionally, demand for frontend developers + web graphics engineers is rapidly increasing in the job market.

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

However, while there are many 3D courses for game developers and Unity developers, there are far too few courses on 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 enjoyably with R3F stack learning that you can't find anywhere else!

Target Audience/Course Objectives 🙆‍♀️

Who would benefit from taking this course?

• Developers/designers who want to create distinctive and special websites
• Developers who want to implement 3D on the web
• Developers who want to have differentiated weapons from others
• Developers/designers who want to start fun experiments on the web

Do you enjoy creating websites?

• Aren't you tired of creating website bulletin boards and developing popup 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 others?
• How was this website made? Do you want to create a WOW website?

While taking this course, you will

• You will learn the basics of web 3D
• Learn how to handle R3F (react-three/fiber) that combines React and Three.js all at once!
• A course where you can learn and build your skills by coding together step by step
• Learn practical tips and optimization methods from a current development team leader

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 knowledge of JavaScript basics.
• It would be great if you have basic knowledge of React, but it's okay if you don't.
• It's perfectly fine if you have no knowledge about web 3D at all. I'll assume you know nothing and explain from the basics.
• The course is conducted in TypeScript and example code is shared so you can use it immediately in practice.
• Each section explains important foundational concepts with a theory-focused approach (10~25%)
• Each section features hands-on, step-by-step practical lectures (75~90%)

Learning Content 📚

< 재미있는 3D 기초에 대한 설명 >

Understanding becomes crystal clear when compared to actual filming locations and animation production sets!

Theoretical explanation of web 3D environments that are identical to real environments!

< Geometry, Material >

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

<3D web E-commerce project>

Projects you can use immediately in real work, plus optimization tips!

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

Expected Questions Q&A 💬

Q. I'm a complete beginner with no technical background. I want to take this course, but would someone like me with no technical background be able to understand the lectures?
A. Hello! I think if non-technical people know the basics of JavaScript, there should be no problem at all following along with 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 understand through other free lectures or Google searches. If you have any questions about parts you don't understand, please don't hesitate to ask away!

Q. Is there anything I need to prepare or have ready when taking the course?
A. What you need to prepare in advance is a computer (Mac or Windows) that you can use to follow along with the course. All other necessary tools can be downloaded for free from the internet, including Chrome, VSCode, npm, Blender, etc. Additionally, all necessary materials, resources, and code used in the course will be made available for download.

Q. Why should I learn React Three Fiber (R3F)?
A. Currently, React can be considered the mainstream in web development. However, I think React alone isn't enough to differentiate yourself from others. So if you equip yourself with the weapon of web 3D, which will inevitably continue to evolve now and in the future, I believe you can create your own differentiated roadmap! Additionally, due to industries like metaverse, XR (VR, AR), web (HTML5) games, and blockchain, the demand for 2D/3D web content with spectacular interactions is rapidly increasing. Therefore, the need for websites with spectacular interactions rather than simple websites will continue. Accordingly, the demand for 3D web developers is also gradually increasing. Let's create eye-catching, distinctive websites together!

Important Notes Before Taking the Course 📢

Practice Environment

• The course uses macOS - Apple chip, but Mac Intel chip or Windows environment is also possible.
• Programs used: Chrome, VSCode, Blender, etc.
• PC Specifications: CPU 2.0GHz or higher, RAM 8GB or higher, WebGL-supported graphics recommended

Learning Materials

• Source code zip files provided for each section
  
  • 0, 2, 3, 4, 5, 6, 7 lectures + practical project
  • 3D shoe modeling file provided

Prerequisites and Important Notes

• If you know the basics of JavaScript, it's possible.
• It would be great if you have basic knowledge of React, but it's okay if you don't.
• I will respond to your questions within the same day at the earliest, or within 3 days at the latest.
• Content about the Web 3D e-commerce project is continuously being updated with additional information.

Instructor Introduction ✒️

Hello. I'm Han Taejae, a web graphic engineer with 10 years of experience. I'm basically a full-stack developer, but I focus on frontend work :)

I have been doing frontend development using frameworks like Angular and React. However, my favorite work is still projects that handle 2D/3D Canvas graphics on the web (HTML5) using Three.js, WebGL, D3.js, Pixi.js, etc. I am passionate about interactive web content that creates new and creative user experiences (UX). Let's create fun projects together!

Resume/Experience/Portfolio/Personal Videos

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