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: [ Ссылка ]
🔗 Starter project: [ Ссылка ]
🔗 For full source code check [ Ссылка ]
🔗 Webgi SDK [ Ссылка ]
🔗 3D model credit Reaper3D: [ Ссылка ]
🔗 Upload to [ Ссылка ]

⭐️ 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: [ Ссылка ]

Read hundreds of articles on programming: [ Ссылка ]

свернуть