Build a 3D Portfolio Website with React Three Fiber | Learn 3D Web Development and Animation

If you’d like to support my work and help me create more free content, you can do so through Patreon:   / emiliankasemi   ✉️ Contact Me: 🤝 ✅ Open to freelance work and gigs: Email: [email protected] LinkedIn:   / emilian-kasemi   GitHub: https://github.com/theringsofsaturn Unleash your creativity by building an extraordinary 3D portfolio website using React Three Fiber! This isn't just a portfolio, it's an immersive experience! Whether you're new to 3D web programming or looking to take your skills to the next level, this tutorial has something for you. Dive into the code and learn how to create animations that respond to user interactions, giving your visitors a unique and engaging journey through your work. 📂 Resources: • Source Code: https://github.com/theringsofsaturn/3... • Live Website: https://emilian-kasemi-portfolio.netl... • Sky Island 3D Model: https://skfb.ly/6XpAQ • Biplane 3D Model: https://skfb.ly/on8NW • Fox 3D Model: https://skfb.ly/orXGp • Bird 3D Model: https://skfb.ly/6Rw9X ✅ Prerequisites: Basic knowledge of React.js is helpful, but not mandatory, so grab your coding hat and let's create something amazing together! 🛠️ Tools & Installation: • install Node.js on your machine • create the project with Vite. Then - npx vite - to run the project live • npm i - to install all the dependencies if you are downloading the project 📝 What You'll Learn: Check the chapters below 👇 00:00:00 Introduction 00:02:24 What is React Three Fiber and Three.js? 00:04:14 What is Vite? 00:04:55 How to create a new React App with Vite? 00:07:05 How to install Three.js, React Three Fiber and Drei 00:07:52 How to setup the 3D Scene in React Three Fiber? 00:09:00 Import Canvas from React Three Fiber 00:10:52 What is Canvas in Three.js and React Three Fiber? 00:15:12 What is a 3D Model? 00:16:18 What is the "useGLTF" Hook from Drei 00:16:37 What are "Hooks" in React? 00:17:11 What is the "gltfjsx" utility package and how to use it? 00:17:50 How to install the "gltfjsx" package? 00:19:26 How to convert the "gltf" file into a "JSX" React component using "gltfjsx" command 00:21:49 How to optimise "glb" file 00:22:30 The 3D converted React component explained 00:22:49 How to use the "useGLTF" Hook? 00:23:16 The Mesh Group created in React component 00:23:40 The Geometry and Material created in React component 00:23:54 useGLTF.preload 00:24:26 How to import 3D model to App component and use it inside the Canvas 00:28:18 Fix the error: "Failed to parse source for import analysis because the content contains invalid JS syntax." Add "assetsInclude" in your configuration. 00:32:04 How to configure 3D Model's position/rotation/scale properties 00:37:06 How to configure Camera's properties? 00:37:40 Camera's Field of View 00:38:16 The viewing Frustrum: Camera's near and far clipping 00:39:30 How to add Lights to the Scene? 00:39:42 AmbientLight 00:40:26 SpotLight 00:41:26 PointLight 00:43:04 Canvas styles 00:44:41 How to adjust the lights? 00:45:54 The usage of a GUI: UI configurator to interact with the 3D scene in real time 00:47:15 How to import the OrbitControls in the Scene 00:47:55 What is the "OrbitControls"? 00:48:17 What is "lil-gui"? 00:49:11 Install "lil-gui" 00:49:36 How to create the Hook "useGUI" 00:57:22 How to add a reference to the 3D model 00:57:36 What is the "useRef" Hook and how to use it? 01:00:32 Code to add the sliders to tweak the parameters of the GUI in real time 01:03:49 Testing the GUI 01:10:47 Refactor code: Migrate App.jsx code to Homepage.jsx 01:17:13 Import "BrowserRouter" from "react-router-dom" 01:18:06 How to use the "Router/Routes/Route" in React 01:19:27 Explaining the "react-router-dom" and how to add different pages to our app 01:30:15 Add the Play Button 01:32:05 How to create a state variable in React 01:33:36 What is the state in React? 01:35:00 What is the "useState" hook and how to use it in React 01:36:52 How to pass a state variable from one component to another as a "Prop" 01:40:38 How to use "onClick" eventListener and the "set" function to toggle the state of the audio 01:44:03 How to use the Ternary Operator in React 01:48:03 How to use the "useEffect" Hook in React and why we need it? 01:53:14 Create the Audio source from Three.js class 01:57:54 The dependencies array: How and when to re-render? 02:03:36 Testing the music 02:04:08 Add the styles for the Homepage.css 02:12:48 Create the Info-Box for the sections 02:14:05 Create the components for the profile sections 02:18:53 Display profile sections in the Info-Box based on the current stage 02:20:25 && operator: Conditional Rendering in React 02:29:25 Logic to rotate the island and show the different stages 02:33:08 The "viewport" from the Hook "useThree" 02:33:46 The "gl": The WebGL rendering context from R3F