Learn Three.Js Using React: Build A 3D Tesla Workshop 2021

The Complete Course on Three.js using React: Three.js made easy and fun - Learn from a Silicon Valley Software Engineer

What you'll learn
This course, we will learn Three js from the ground up
Learn how to set a scene and manipulate it using objects and meshes
Master camera settings and lighting to render the perfect scene
Apply materials and textures to objects to make them come to life
Learn about geometry and meshes to create realistic looking objects
Make your 3D webpage interactive by adding controls and setting up events
Create the perfect Tesla car showroom that you can show your friends
Requirements
Knowledge of React
Description
This course introduces you to the world of three.js and how it can be integrated with react based web application. We make use of react-three-fiber to help you learn and build a website that supports interactive 3D objects.  Let us help you become competitive in building 3D websites and enhance your portfolio!We will teach you how to setup your react app along with other environment settings to connect with react-three-fiber. This course will go through underlying core concepts of three.js including scene graph, geometry, lighting, materials, textures and shadows. You will learn how to make objects interactive and add physics to your scene. You will learn how camera settings and lighting work to render the perfect scene. Apply materials and textures to objects to make them come to life. Learn about geometry and meshes to create realistic looking objects. Make your 3D web application interactive by adding controls and setting up events.By the end of this course you should have your react webpage ready with a 3D model of Tesla workshop that you can enjoy for yourself or share with you friends.Who should enroll in this course?This course is for anyone who has basic knowledge or react or javascript and wants to learn how to create interactive 3D websites.

Overview

Section 1: Introduction

Lecture 1 Course Introduction

Lecture 2 Setting up a Development Environment

Lecture 3 Overview of create-react-app

Lecture 4 Github Link to Code for this course

Section 2: The Scene Graph

Lecture 5 The Scene Graph

Lecture 6 Building a Scene with Plain Three.js

Lecture 7 Building a Scene with react-three-fiber

Lecture 8 Axes and Orbit Controls

Section 3: Geometry, Lighting, Materials and Textures

Lecture 9 Overview of Geometry

Lecture 10 Lights and Shadows

Lecture 11 Overview of Materials

Lecture 12 Adding Textures

Section 4: Events and Controls: Becoming Interactive

Lecture 13 Working with Events: Make it Interactive

Lecture 14 Implementing DragControls

Section 5: Adding Physics and Modells to the Scene

Lecture 15 Adding Physics

Lecture 16 Adding Models to a Scene

Lecture 17 Debugging Physical Properties with Bounding Boxes

Section 6: All about the Camera and Shadows

Lecture 18 Adding Camera Panning Functions

Lecture 19 Adding Camera Panning User Interface

Lecture 20 Changing Paint Color

Lecture 21 Adding Shadows to Models

Section 7: Postprocessing

Lecture 22 Postprocessing Setup

Lecture 23 Adding Effects with Postprocessing

Lecture 24 Adding the Godrays Effect

Section 8: The Final Stride: Animations, Deploying with Github, and Next Steps

Lecture 25 Playing Animations

Lecture 26 Deploying with Github Pages

Lecture 27 Outro: Next Steps

Beginners curious about Three JS and 3D web development,Developers interested in basics of 3D web development using three js and react,React developers looking to add Three js to their skillset