Create a Three.js Portfolio with React Three Fiber

Create a Three.js Portfolio with React Three Fiber, available at $69.99, has an average rating of 4.75, with 17 lectures, based on 4 reviews, and has 63 subscribers.

You will learn about Learn about React Three Fiber & React Three Drei Utilize Framer Motion for Amazing Animations Create 3D carousels with Swiper js Learn how to optimize our React Three Fiber projects This course is ideal for individuals who are Anyone interested in creating unique 3D websites It is particularly useful for Anyone interested in creating unique 3D websites.

Enroll now: Create a Three.js Portfolio with React Three Fiber

Summary

Title: Create a Three.js Portfolio with React Three Fiber

Price: $69.99

Average Rating: 4.75

Number of Lectures: 17

Number of Published Lectures: 17

Number of Curriculum Items: 17

Number of Published Curriculum Objects: 17

Original Price: $24.99

Quality Status: approved

Status: Live

What You Will Learn

Learn about React Three Fiber & React Three Drei

Utilize Framer Motion for Amazing Animations

Create 3D carousels with Swiper js

Learn how to optimize our React Three Fiber projects

Who Should Attend

Anyone interested in creating unique 3D websites

Target Audiences

Anyone interested in creating unique 3D websites

In this course we’ll learn how to create a unique 3D portfolio website using Three.js, React, React Three Fiber / Drei, Framer Motion, and Swiper.js to build a beautiful and intuitive user experience. We will use React Three Fiber & Drei to loads glTF models into our project, one model is of an animated React.js logo, while the other is a model of the Earth, which will scale according to where the user is on our page. Using React Three Drei gives us easy access to the stars we’ll be creating as our background, and I’ll show you how to animate them and create our custom component. We’ll use Framer Motion together with React Intersectional Observer to create awesome animated entrances for elements on our site. Using Swiper.js will allow us to create some of the most beautiful and unique carousels on the web, and we’ll be making two different types of them, one to showcase our portfolio projects and another to showcase our work history. And we’ll use Email.js to give our contact form the ability to send us emails! There are two bonus videos as well that cover optimizing techniques we can use in our projects: how to optimize our glTF models and how to monitor the performance of our React Three Fiber applications.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Chapter 2: React Three Portfolio

Lecture 1: Lets See Some 3D

Lecture 2: Animating our React glTF model

Lecture 3: Creating Custom Animated Stars Component

Lecture 4: Creating Hero Component

Lecture 5: Framer Motion Entrance Animation

Lecture 6: Add Custom CSS Animations and Drei Loader to Hero Section

Lecture 7: Create About Component

Lecture 8: Creating Portfolio Component

Lecture 9: Swiper.js & Finishing Portfolio Component

Lecture 10: Swiper.js & Work Component

Lecture 11: Framer Motion & Contact Component

Lecture 12: Scale Animation for Earth Model Component

Chapter 3: Optimization and Performance

Lecture 1: Entrance Animation Optimization

Lecture 2: Optimize glTF Models

Lecture 3: Performance Monitoring in React Three Fiber Projects

Chapter 4: Go Live!

Lecture 1: Go Live with Netlify

Instructors

Web 3D
3D Web Developer

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 0 votes

4 stars: 1 votes

5 stars: 3 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!