Learn React, React Three Fiber, Drei, React Spring & More

Learn everything you need to build immersive and creative Websites using Three JS and React

What you'll learn

How to install ThreeJs library and import it into your project

Learn the basics of ThreeJs with many demonstrations and example code

Learn about the ThreeJs Scene, Camera and Renderer

Creating our very first scene in ThreeJs

How to move and animate the Objects

Learn about Webpack, NodeJs ,and serving ES6 modules to the browser clients.

Learn about Geometries such as Box, Sphere, Plane, Torus, TorusKnot and more

Learn about the Basic, Normal, Lambert, Phong, Standard, Matcap and other materials

We also will learn how to create a stunning Scene using Particles

Learn React Basics and hooks such as useState,useEffect,useRef, etc

Learn what is meant by JSX

Will also learn about React Rules, Styles, etc

Will bring everything we have done so far in native threejs to react environment under what is called React Three Fiber

A lot of Drei components will be covered

Learn how to animate things while scrolling

How to add sound in the project

Shader Materials

We will learn an animation library called React Spring

React Post Processing

And so much more . . .

Requirements

A device that you can install VSCode or any Code Editor

Basic JavaScript knowledge, you should be familiar with let, const, loops, arrays, functions

And the most two important things are to be patient ( please be patient ), and to have a desire to build 3D Web Applications

Description

Welcome to my course on React Three Fiber, where you will learn how to build immersive and creative 3D websites using Three.js and ReactIn this course, you will learn all about Three.js and some of React basics so that you are able to create 3D websites under a library called React Three FiberThis course is in 6 main sections,1. Three.js Refresher: Some lessons from my three.js course will be reviewed, so you can understand what will be explained later2. React: Some React basics will be explained cause this course is mainly about writing React code3. React Three Fiber: This is where the actual course begins, where you will learn how to write and combine Three.js with React4. React Three Drei: React is about building reusable components, We will cover a lot of the components that Drei have5. React Spring: We will learn a physics-based animation library to make your site looks better6. React Post-Processing: Post-processing are filters that will add beauty to the sceneAll code is provided in the resources folder where you can find the Startup folder which is the code at the beginning of the lecture, and the Last Code folder which is the written code after we finished the lesson.If you encounter any questions regarding a particular lesson, I hope that you will ask the question in the questions section I will answer all questions, so don't be afraid to ask any questionThanks for participating in my course, and I will see you there.Ahmad

Overview

Section 1: Three.Js Refresher

Lecture 1 1 - Hello Cube

Lecture 2 2 - Transformation

Lecture 3 3 - Animation

Lecture 4 4 - Webpack

Lecture 5 5 - Geometries

Lecture 6 6 - Materials

Lecture 7 7 - Particles

Section 2: React

Lecture 8 1 - Introduction to React

Lecture 9 2 - First React Application

Lecture 10 3 - React Rules

Lecture 11 4 - Styles in React

Lecture 12 5 - Components

Lecture 13 6 - Building a Counter using UseState hook

Lecture 14 7 - UseEffect

Lecture 15 8 - Rendering Elements Conditionally

Lecture 16 9 - Props

Lecture 17 10 - React.memo

Lecture 18 11 - UseRef

Section 3: React Three Fiber

Lecture 19 1 - Introduction to React Three Fiber

Lecture 20 2 - Build Our First React Fiber Application

Lecture 21 3 - Build Our First React Fiber Application

Lecture 22 4 - useLoader

Lecture 23 5 - Particles

Lecture 24 6 - Loading 3D Model _ Playing Animations

Lecture 25 7 - Debug

Lecture 26 8 - Events

Section 4: React Three Drei

Lecture 27 1 - Introduction To Drei

Lecture 28 2 - Environment & Staging

Lecture 29 3 - Camera

Lecture 30 4 - Controls

Lecture 31 5 - Text, 3DText and Html

Lecture 32 6 - Positional Audio

Lecture 33 7 - Shaders

Lecture 34 8 - MeshPortalMaterial

Section 5: React Spring

Lecture 35 1 - Introduction to React Spring

Lecture 36 2 - Getting Started

Lecture 37 3 - Imperative API

Lecture 38 4 - Props

Lecture 39 5 - SpringRef

Lecture 40 6 - useSprings

Lecture 41 7 - useTrail

Section 6: React Post-Processing

Lecture 42 Post-Processing

Beginner Web developers who wants to learn about ThreeJs and React Three Fiber,Front end developers wanting to learn about ThreeJs and React Three Fiber concepts,Web developers who wants to create immersive and creative 3D websites