سایت سه‌بعدی سریع و قابل‌استفاده؛ از موبایل تا کاهش حرکت

پیش از افزودن انیمیشن، مشخص کنید کاربر چه دستگاهی دارد و مهم‌ترین کار او چیست. یک لندینگ خدماتی معمولاً به یک صحنهٔ سنگین دائمی نیاز ندارد. برای شروع، تصویر، متن و دکمهٔ اصلی را در اولویت قرار دهید و سپس ببینید چه میزان حرکت به انتقال پیام کمک می‌کند.

در صحنه‌هایی که فقط با تعامل تغییر می‌کنند، ممکن است رندر هنگام تغییر به‌جای رندر پیوسته مناسب باشد. راهنمای Three.js این رویکرد را برای کاربردهایی مانند نمایشگر محصول و ویرایشگر توضیح می‌دهد. در عمل باید تعامل، تغییر اندازه و بارگذاری مدل هم باعث به‌روزرسانی صحنه شوند؛ صرفاً قطع‌کردن حلقهٔ رندر کافی نیست.

نمایشگرهای متراکم می‌توانند تعداد پیکسل‌های رندر را زیاد کنند. راهنمای واکنش‌گرایی Three.js به هزینهٔ پردازش گرافیکی و انتخاب ابعاد رندر توجه می‌دهد. در پروژهٔ واقعی، کیفیت سایه‌ها، تعداد جزئیات و اندازهٔ بافت‌ها را روی موبایل معمولی هم آزمایش کنید. وضوح بیشتر همیشه انتخاب کاربردی‌تری نیست.

بعضی کاربران حرکت زیاد را نامطلوب یا آزاردهنده می‌دانند. با prefers-reduced-motion می‌توان درخواست سیستم‌عامل برای حرکت کمتر را تشخیص داد. در این حالت، چرخش و حرکت‌های غیرضروری را حذف کنید و یک نمای ثابت و کامل ارائه دهید. فرم، لینک و توضیح محصول باید در هر دو حالت قابل‌استفاده بمانند.