React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP
Learn how to build a 3D animation in React, using technologies such as WebGi (powered by Three.js) and GSAP. First, we will learn how to find 3D models and display them on your website using WebGi. Then, we'll use React and GSAP to make a 3D animation of that model. Next we'll learn how to optimize 3D animations in React for mobile devices. Finally, we'll build this website for production and upload.
✏️ Course created by @CodewithSloba
🔗 Final website: https://sloba-3d-animation-iphone.net...
🔗 Starter project: https://github.com/bobangajicsm/iphon...
🔗 For full source code check / codewithsloba
🔗 Webgi SDK https://webgi.xyz/docs/index.html
🔗 3D model credit Reaper3D: https://sketchfab.com/3d-models/iphon...
🔗 Upload to https://www.netlify.com/
⭐️ Chapters ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:01:27) Project setup
⌨️ (0:07:12) Building website navigation
⌨️ (0:15:02) Building jumbotron
⌨️ (0:21:42) Building sound section
⌨️ (0:29:27) Building display section
⌨️ (0:33:27) How to find and load 3D models
⌨️ (0:36:55) Building WebGi viewer component
⌨️ (0:53:17) Animating 3D model with GSAP scroll animation
⌨️ (1:13:42) Implementing 3D model preview mode
⌨️ (1:32:27) Optimizing 3D animation for mobile phones
⌨️ (1:43:31) Building production-ready website and uploading
⌨️ (1:45:07) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Watch video React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP online without registration, duration hours minute second in high quality. This video was added by user freeCodeCamp.org 27 March 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 204,564 once and liked it 7 thousand people.