React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP

• Tapovan

Curriculum for the course 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.netlify.app/ ๐Ÿ”— Starter project: https://github.com/bobangajicsm/iphone-3d-website-starter ๐Ÿ”— For full source code check https://patreon.com/CodewithSloba ๐Ÿ”— Webgi SDK https://webgi.xyz/docs/index.html ๐Ÿ”— 3D model credit Reaper3D: https://sketchfab.com/3d-models/iphone-13-pro-max-4f92b60d824a42c89bbf1833374c4f73 ๐Ÿ”— 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 Online Full Course: React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP


Click Here to watch on Youtube: React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP


This video is first published on youtube via freecodecamp. If Video does not appear here, you can watch this on Youtube always.


Udemy React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP courses free download, Plurasight React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP courses free download, Linda React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP courses free download, Coursera React 3D Animation Website Tutorial with ThreeJS (WebGi) & GSAP course download free, Brad Hussey udemy course free, free programming full course download, full course with project files, Download full project free, College major project download, CS major project idea, EC major project idea, clone projects download free

Last updated: March 27, 2023
an "open and free" initiative. Powered by Blogger.