Three.js, React Three Fiber, Drei, React Spring & More

Three.js, React Three Fiber, Drei, React Spring & More, available at $19.99, has an average rating of 4.56, with 51 lectures, based on 220 reviews, and has 1837 subscribers.

You will learn about 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 . . . This course is ideal for individuals who are Beginner Web developers who wants to learn about ThreeJs and React Three Fiber or Front end developers wanting to learn about ThreeJs and React Three Fiber concepts or Web developers who wants to create immersive and creative 3D websites It is particularly useful for Beginner Web developers who wants to learn about ThreeJs and React Three Fiber or Front end developers wanting to learn about ThreeJs and React Three Fiber concepts or Web developers who wants to create immersive and creative 3D websites.

Enroll now: Three.js, React Three Fiber, Drei, React Spring & More

Summary

Title: Three.js, React Three Fiber, Drei, React Spring & More

Price: $19.99

Average Rating: 4.56

Number of Lectures: 51

Number of Published Lectures: 51

Number of Curriculum Items: 51

Number of Published Curriculum Objects: 51

Original Price: $24.99

Quality Status: approved

Status: Live

What You Will 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 . . .

Who Should Attend

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

Target Audiences

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

Welcome to my course on React Three Fiber, where you will learn how to build immersive and creative 3D websites using Three.js and React

In 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 Fiber

This 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 later

2. React: Some React basics will be explained cause this course is mainly about writing React code

3. React Three Fiber: This is where the actual course begins, where you will learn how to write and combine Three.js with React

4. React Three Drei: React is about building reusable components, We will cover a lot of the components that Drei have

5. React Spring: We will learn a physics-based animation library to make your site looks better

6. React Post-Processing: Post-processing are filters that will add beauty to the scene

All 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 question

Thanks for participating in my course, and I will see you there.

Ahmad

Course Curriculum

Chapter 1: Three.Js Refresher

Lecture 1: 0 – What is WebGL & ThreeJs

Lecture 2: 1 – Hello Cube

Lecture 3: 2 – Transformation

Lecture 4: 3 – Animation

Lecture 5: 4 – Webpack

Lecture 6: 5 – Geometries

Lecture 7: 6 – Textures

Lecture 8: 7 – Materials

Lecture 9: 8 – Particles

Chapter 2: React

Lecture 1: 1 – Introduction to React

Lecture 2: 2 – First React Application

Lecture 3: 3 – React Rules

Lecture 4: 4 – Styles in React

Lecture 5: 5 – Components

Lecture 6: 6 – Building a Counter using UseState hook

Lecture 7: 7 – UseEffect

Lecture 8: 8 – Rendering Elements Conditionally

Lecture 9: 9 – Props

Lecture 10: 10 – React.memo

Lecture 11: 11 – UseRef

Chapter 3: React Three Fiber

Lecture 1: 1 – Introduction to React Three Fiber

Lecture 2: 2 – Build Our First React Fiber Application

Lecture 3: 3 – Build Our First React Fiber Application

Lecture 4: 4 – useLoader

Lecture 5: 5 – Particles

Lecture 6: 6 – Loading 3D Model _ Playing Animations

Lecture 7: 7 – Debug

Lecture 8: 8 – Events

Chapter 4: React Three Drei

Lecture 1: 1 – Introduction To Drei

Lecture 2: 2 – Environment & Staging

Lecture 3: 3 – Camera

Lecture 4: 4 – Controls

Lecture 5: 5 – Text, 3DText and Html

Lecture 6: 6 – Positional Audio

Lecture 7: 7 – Shaders

Lecture 8: 8 – MeshPortalMaterial

Chapter 5: React Spring

Lecture 1: 1 – Introduction to React Spring

Lecture 2: 2 – Getting Started

Lecture 3: 3 – Imperative API

Lecture 4: 4 – Props

Lecture 5: 5 – SpringRef

Lecture 6: 6 – useSprings

Lecture 7: 7 – useTrail

Chapter 6: React Three Rapier

Lecture 1: 1 – Hello Physics

Lecture 2: 2 – Colliders

Lecture 3: 3 – Rigid Body Methods

Lecture 4: 4 – Mass

Lecture 5: 5 – Types

Lecture 6: 6 – Instanced Mesh

Lecture 7: 7 – Sensor

Chapter 7: React Post-Processing

Lecture 1: Post-Processing

Instructors

Ahmad Al-shurafa
Senior Front-End Developer

Rating Distribution

1 stars: 0 votes
2 stars: 3 votes
3 stars: 15 votes
4 stars: 65 votes
5 stars: 137 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu