Ghost Signal — تجربهٔ تعاملی سه‌بعدی
نمایشگاه تعاملی ربات‌های سه‌بعدی با Next.js و Three.js؛ پنج دنیای سینمایی با امکان چرخاندن مدل‌ها و کاوش تجهیزات.
- Next.js
- React
- Three.js
- React Three Fiber
- TypeScript
- Zustand
- CSS
تجربه‌ای سینمایی و سه‌بعدی در وب با Next.js، Three.js و React Three Fiber. پنج ربات را در دسکتاپ و موبایل کشف کنید، مدل‌ها را بچرخانید و تجهیزاتشان را ببینید.
ویژگی‌های کلیدی
استک فنی
Next.js
مسیریابی با App Router، تولید صفحات استاتیک، متادیتای مسیرها و بیلد production
React
رابط کامپوننت‌محور و مدیریت چرخهٔ حیات نماهای تعاملی
Three.js
رندر WebGL، مدل‌های GLB، نورپردازی، سایه و انیمیشن اسکلتی
React Three Fiber
یکپارچه‌سازی صحنه‌های Three.js با React و به‌روزرسانی‌های هر فریم
TypeScript
تعریف تایپ برای شخصیت‌ها، ساختار فایل‌ها و وضعیت‌های ترنزیشن
Zustand
مدیریت وضعیت مشترک انتخاب شخصیت، کاوش تجهیزات و ترنزیشن صحنه
CSS
چیدمان واکنش‌گرا، فریم‌های زاویه‌دار، جلوه‌های بصری و استایل متناسب با ترجیح کاهش حرکت
چالش‌ها و درس‌آموخته‌ها
هماهنگی حرکت و تعامل
تعویض شخصیت باید خروج مدل فعلی، بارگذاری مدل بعدی و ورود آن را هماهنگ می‌کرد، بدون اینکه پاسخ یک درخواست قدیمی روی انتخاب جدید اثر بگذارد. وضعیت ترنزیشن را از انیمیشن هر فریم جدا کردم و نقاط اتصال تجهیزات را به مختصات صفحه تبدیل کردم تا رابط با حرکت شخصیت هماهنگ بماند.
تحویل قابل اتکای فایل‌های حجیم
سرعت بارگذاری محلی، هزینهٔ انتقال مدل‌ها روی یک اتصال واقعی را نشان نمی‌داد. دانلود مدل انتخاب‌شده را با ترنزیشن‌ها هم‌زمان کردم، درخواست‌های در حال اجرا را به اشتراک گذاشتم، انتقال‌های رهاشده را لغو کردم و آدرس‌های نسخه‌دار و کش حافظه با ظرفیت محدود اضافه کردم. فشرده‌سازی تصاویر نیز در نسخه‌ای مستقل، حجم آن‌ها را نسبت به انتشار قبلی حدود ۷۰٪ کاهش داد.
تعادل جزئیات و هزینهٔ رندر موبایل
نمایشگرهای موبایل با تراکم پیکسلی بالا هزینهٔ رندر WebGL را افزایش می‌دهند و کاهش شدید رزولوشن هم مدل‌ها را تار می‌کند. از بودجهٔ پیکسلی و تنظیم تدریجی کیفیت با امکان بازیابی استفاده کردم؛ سپس اندازهٔ مدل، تماس پا با زمین، نورپردازی، اتصال تجهیزات و تعاملات لمسی روی دسکتاپ و موبایل بررسی شدند.
نتیجه
Ghost Signal در نسخهٔ اول به‌عنوان یک نمایشگاه سه‌بعدی کامل با پنج شخصیت قابل انتخاب و تجربه‌ای منسجم در دسکتاپ و موبایل منتشر شد. این پروژه توانایی من در کنار هم قرار دادن جهت‌گیری بصری، گرافیک زنده، طراحی تعامل و مهندسی فرانت‌اند در یک محصول قابل استفاده را نشان می‌دهد. همچنین رویکردم به تحویل فایل‌ها، بودجهٔ رندر و انتشارهای قابل بازگشت را تقویت کرد؛ بهینه‌سازی تصاویر هم جداگانه منتشر شد تا کیفیت بصری آن‌ها مستقل بررسی شود.