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
Смотрите видео React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь freeCodeCamp.org 27 Март 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 204,56 раз и оно понравилось 7 тысяч людям.