طراحی سایت · سه‌بعدی
طراحی سایت سه‌بعدی و WebGL
سایت سه‌بعدی یک شیء یا صحنهٔ بی‌درنگ را داخل خود صفحه می‌گذارد و اسکرول یا حرکت ماوس آن را هدایت می‌کند، تا محصول به‌جای یک عکس تخت در مرورگر چرخانده و بررسی شود. من مسعود زارعی هستم، طراح سایت سه‌بعدی و توسعه‌دهندهٔ Three.js؛ هدایت، طراحی و اجرای این سایت‌ها را خودم انجام می‌دهم. این کار برای محصول‌ها و فضاهایی است که یک تصویر ثابت کمشان می‌فروشد.
- قیمت
- شروع پروژه‌ها از ۸۰ میلیون تومان
- زمان پاسخ
- ظرف ۲۴ ساعت
- همکاری با
- برندهای سراسر جهان، به فارسی یا انگلیسی
سایت WebGL از چه ساخته می‌شود
WebGL راهی است که مرورگر با آن گرافیک سه‌بعدی را روی کارت گرافیک می‌کشد و Three.js کتابخانه‌ای است که من روی آن می‌سازم. GSAP صحنه را به اسکرول وصل می‌کند، تا دوربین، نور یا خود شیء همراه با پایین‌رفتن بیننده واکنش نشان دهد.
صحنهٔ سه‌بعدی هزینه دارد: حجم فایل، باتری و بیننده‌ای که گوشی قدیمی دارد. بخشی از کار این است که تعیین کنیم چه چیزی واقعاً باید بی‌درنگ باشد و چه چیزی را یک عکس خوب، یک ویدیوی کوتاه یا افکتی سبک‌تر می‌تواند حمل کند.
کارهای موجود چه چیزی را نشان می‌دهند
- روی همین سایت
- لنز در بخش اسپات‌لایت صفحهٔ اصلی یک صحنهٔ Three.js است. مدل آن از قبل در یک فایل فشرده پخته شده، صحنه با نزدیک‌شدن بخش بارگذاری می‌شود و فقط وقتی اسکرول آن را حرکت می‌دهد فریم کشیده می‌شود. در صفحهٔ اصلی ببینید.
- کاهش حرکت
- وقتی کاهش حرکت روشن باشد، همین بخش به یک چیدمان ثابت تبدیل می‌شود و بوم سه‌بعدی نمایش داده نمی‌شود.
- صفحهٔ باریک
- زیر ۱۰۲۴ پیکسل، این بخش طراحی تک‌ستونهٔ مخصوص خودش را دارد و شیء سهم بزرگ‌تری از صفحهٔ موبایل می‌گیرد.
- کانسپت‌ها
- کاسیو ۴۴سی و نوشیدنی لایف یک محصول سه‌بعدی را در مرکز یک قاب صحنه‌پردازی‌شده می‌گذارند. هر دو مستقل‌اند و ادعای نتیجه برای مشتری ندارند.
چه چیزی شامل می‌شود
- هدایت خلاق
- شیء چه می‌کند، دوربین چه می‌بیند و سه‌بعدی کجا تمام می‌شود و صفحه از کجا شروع.
- آماده‌سازی مدل
- کم‌کردن هندسه، فشرده‌سازی تکسچر و پختن نوری که لازم نیست زنده باشد. مدل را می‌توانید خودتان بدهید یا من یک مدل دارای مجوز پیدا کنم.
- ساخت صحنهٔ Three.js
- نور، متریال، مسیر دوربین و شیدر، برای همان شیء مشخص نوشته می‌شود.
- کوریوگرافی اسکرول
- GSAP صحنه را از روی موقعیت اسکرول جلو می‌برد و زمان‌بندی در یک جا نوشته می‌شود تا قابل تنظیم باشد.
- بودجهٔ سرعت
- صحنه دیر بارگذاری می‌شود، فقط وقتی چیزی عوض می‌شود رندر می‌گیرد و برای دستگاه‌های ضعیف نسخهٔ سبک‌تر یا ثابت دارد.
- دسترس‌پذیری
- کاربر با کاهش حرکت چیدمان ثابت می‌بیند، فوکوس کیبورد دیده می‌شود و محتوا هیچ‌وقت فقط داخل بوم نیست.
یک پروژه چطور پیش می‌رود
بریف و بررسی دارایی‌ها
محصول، مدل‌هایی که از قبل دارید و دستگاه‌هایی که مخاطبتان واقعاً استفاده می‌کند را بررسی می‌کنیم.
استوری‌بورد صحنه و اسکرول
توالی حالت‌های شیء مرتبط با اسکرول، پیش از آنکه چیزی در کد ساخته شود.
نمونهٔ اولیه روی دستگاه واقعی
یک نسخهٔ خام زود روی گوشی اجرا می‌شود، تا حجم و روانی پیش از پرداخت مشخص باشد.
اجرا و تنظیم
صحنهٔ نهایی، زمان‌بندی اسکرول، حالت‌های جایگزین و چیدمان واکنش‌گرا.
انتشار
بررسی روی اندازه‌ها و مرورگرهای مختلف و بعد انتشار. آموزش و پشتیبانی بعد از انتشار هم جزو کار است.
کیس‌استادی‌های مرتبط
هر سه کانسپت مستقل‌اند و همین‌طور معرفی شده‌اند. سفارشی از طرف برندهای نام‌برده ادعا نمی‌شود و نتیجه‌ای هم مطرح نیست.
پرسش‌های رایج
آیا از قبل به مدل سه‌بعدی نیاز دارم؟
لزوماً نه. می‌توانم روی مدلی که دارید کار کنم یا یک مدل دارای مجوز پیدا و برای وب آماده کنم. اگر مدل سفارشی لازم دارید، مدل‌سازی سه‌بعدی از صفر را هم انجام می‌دهم. هزینهٔ آن جدا از هزینهٔ اجرا حساب می‌شود و دامنهٔ کار را تغییر می‌دهد، پس زود بگویید.
آیا سایت WebGL کند می‌شود؟
لازم نیست کند باشد. صحنه با نزدیک‌شدن بیننده بارگذاری می‌شود، فقط وقتی چیزی تغییر می‌کند رندر می‌گیرد و مدل و تکسچر پیش از انتشار سبک می‌شوند. برای دستگاه‌های ضعیف یک نسخهٔ سبک‌تر در نظر می‌گیرم.
آیا سایت سه‌بعدی روی موبایل کار می‌کند؟
گوشی‌های امروزی این صحنه‌ها را خوب اجرا می‌کنند و هر پروژه چیدمان تک‌ستونهٔ مخصوص خودش را دارد. روی دستگاه واقعی تست می‌کنم و هرجا گوشی لازم داشته باشد صحنه را سبک‌تر می‌کنم.
هزینهٔ طراحی سایت سه‌بعدی چقدر است؟
شروع پروژه‌ها از ۸۰ میلیون تومان است. صحنه‌های سه‌بعدی به‌خاطر آماده‌سازی مدل و تست روی دستگاه‌ها به سمت بالای این بازه می‌روند، پس بعد از دیدن مدل و بریف قیمت می‌دهم.
شما طراح هستید یا توسعه‌دهندهٔ Three.js؟
هر دو. صفحه را هدایت و طراحی می‌کنم و کد Three.js و GSAP را هم خودم می‌نویسم، پس چیزی بین فایل طراحی و اجرا گم نمی‌شود.
دربارهٔ پروژه‌تان برایم بنویسید
محصول، مدل (اگر دارید) و جایی که سایت باید اجرا شود را بفرستید. ظرف ۲۴ ساعت پاسخ می‌دهم.