Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Create a Three.js Portfolio with React Three Fiber
Rating: 4.3 out of 5(8 ratings)
90 students

Create a Three.js Portfolio with React Three Fiber

React Three Fiber / Drei - Framer Motion - Swiper.js - Email.js
Created byWeb 3D
Last updated 5/2023
English

What you'll 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

Course content

4 sections17 lectures2h 55m total length
  • Introduction2:30

Requirements

  • Basic React & Three js understanding

Description

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.

Who this course is for:

  • Anyone interested in creating unique 3D websites