React Three Fiber(R3F) – Interactive 3D Web Development
Published 2/2024
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz
Learn how to use React and Three.js together! From 3D basics to projects that can be used in the workplace.
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.
After the course, you will be able to build websites with outstanding special effects that is unique and different from anyone else.
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.
Overview
Section 1: Development environment settings
Lecture 1 Install chrome, vscode, and iterm2
Lecture 2 Install nvm ( npm / node )
Lecture 3 Create a project with Vite
Lecture 4 How to import module-level components
Lecture 5 Why lecture on js and ts/typescript
Lecture 6 Install R3F, Drei
Section 2: R3F
Lecture 7 Section Introduction / Source Code Download
Lecture 8 Creating an R3F Canvas
Lecture 9 3D Basics – Learn about Components
Lecture 10 Renderer ( useFrame )
Lecture 11 Camera ( Perspective, Orthographic )
Lecture 12 Controls, Helper ( axesHelper, gridHelper )
