آموزش متوسط ​​Three.js با Shaders

یک گلوب تعاملی با سایه بان های سفارشی ایجاد کنید Create An Interactive Globe with Custom Shaders

• معرفی Introduction

• یک کره ایجاد کنید Create a Sphere

• بافت نقشه روی کره Map Texture Onto Sphere

• تیز کردن رندر Sharpen Rendering

• یک Vertex Shader ایجاد کنید Create A Vertex Shader

• یک سایه بان قطعه ایجاد کنید Create A Fragment Shader

• Shader Vertex را برای استفاده با Three.js تغییر دهید Modify Vertex Shader for Use With Three.js

• بافت را به Fragment Shader اضافه کنید Add Texture to Fragment Shader

• سایه آبی را به بافت زمین اضافه کنید Add Blue Shade to Earth Texture

• اتمسفر را اضافه کنید Add Atmosphere

• تعامل حرکت ماوس را اضافه کنید Add Mouse Movement Interaction

• اضافه کردن ستاره های پس زمینه Add Background Stars

• HTML و CSS را اضافه کنید Add HTML & CSS

برای نمایش جمعیت کشور، نقاط داده تعاملی را اضافه کنید Add Interactive Data Points to Show Country Population

• قرار دادن نقاط با طول و عرض جغرافیایی Placing Points with Latitude and Longitude

• اندازه بوم را در Refresh حفظ کنید Maintain Canvas Size on Refresh

• همیشه گلوب را در Refresh نشان دهید Always Show Globe on Refresh

• نقاط را با منشورهای مستطیلی جایگزین کنید Replace Points with Rectangular Prisms

• منشورها را با GSAP متحرک کنید Animate Prisms with GSAP

• برچسب های داده را روی Mouse-Over ایجاد کنید Create Data Labels on Mouse-Over

• درج داده های کشور انبوه Insert Bulk Country Data

• روی عملکرد کلیک کنید و بکشید Click and Drag Functionality

• پاسخگویی صحنه سه بعدی 3D Scene Responsiveness

• شنوندگان رویداد موبایل Mobile Event Listeners