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

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.

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.

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 )

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