Create a Three.js Portfolio with React Three Fiber

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.

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!