آموزش Master Three.js صفحات قابل پیمایش با GSAP

سرفصل ها و درس ها

معرفی Introduction

• قرار است چه چیزی خلق کنیم؟ What are we going to create?

• استفاده از ویرایشگر WEBGi برای پیکربندی مدل سه بعدی و ادغام آن در طراحی Using WEBGi editor to configure the 3D model and its integration into the design

• نصب دیگ بخار به WEBGi و وابستگی های آن Installing the boilerplate to WEBGi and its dependencies

• صادرات دارایی ها و ایجاد بخش صفحه اول با HTML و CSS Exporting the assets and creating the first page section with HTML and CSS

• ایجاد بخش های دیگر صفحه و آماده سازی برای انیمیشن ها Creating the other sections of the page and preparing for the animations

• نصب GSAP، ScrollTrigger و راه اندازی اولین انیمیشن Installing GSAP, ScrollTrigger, and setting up the first animation

• ایجاد تابع به روز رسانی برای انیمیشن Creating the update function for the animation

• در نهایت: با استفاده از اسکرول برای کنترل انیمیشن Finally: Using the scroll to control the animation

• ادغام انیمیشن های عناصر html با مدل سه بعدی Merging the animations of the html elements with the 3D model

• بسته شدن و پیش نمایش دروس بعدی Closing and preview of the next lessons

پیکربندی مدل سه بعدی مجاز است Allow 3D model configuration

• رفع سفارشی کردن دکمه و انیمیشن Fix customize button and animation

• رابط کاربری را برای پیکربندی ایجاد کنید Create the interface for the configurator

• چگونه متریال مدل صحیح را برای تغییر پیدا کنیم How to find the correct model material to change

• یک پیکربندی با مدل سه بعدی برای شخصی سازی ایجاد کنید Create a configurator with the 3D model for personalization

صفحه بارگیری، تنظیمات موبایل و اسکرول صاف Loading screen, Mobile adjustments and Smooth Scroll

• در حال بارگیری صفحه نمایش Loading screen

• تنظیمات موبایل Mobile adjustments

صفحه مته را به یک صفحه الماس تبدیل کنید Transform the drill page into a diamond page

• مدل را جایگزین کنید و پارامترها را تغییر دهید Replace the model and change parameters