🌐 سایت‌های سه‌بعدی چی هستند و چگونه کار می‌کنند ؟

🔸 به سایت‌هایی که از مدل‌های سه‌بعدی استفاده می‌کنند و به کاربر این امکان رو می‌دن تا با محتوای داخل سایت به صورت تعاملی کار بکنه، سایت سه‌بعدی میگن.

یعنی چی دقیقا ؟ ⁉️🤔

یعنی اینکه توی سایت‌های سه‌بعدی، به جای دیدن تصاویر و المان های ساده و ثابت، می‌تونی اشیاء و مدل‌ها رو به شکل واقعی‌تر و از زوایای مختلف ببینی.

به درد کیا میخوره ؟ 💡

درسته که سایت های سه بعدی خیلی جذابن ولی خیلی مهمه که بدونیم به درد هر کسی نمیخوره.

درواقع این قابلیت بیشتر برای بازی های سه بعدی تحت وب و وبسایت های فروشگاهی که دیدن محصولاتشون از زوایای مختلف مهمه، مثل لوازم خانگی، مبلمان یا حتی طراحی‌های معماری.

❗important 🔺

چجوری میشه سایت 3D ساخت ؟ 🎥

➊ مدل‌سازی سه‌بعدی

اول از همه مدل‌های سه‌بعدی باید با استفاده از نرم‌افزارهای مخصوص مثل Blender، Maya و 3ds Max با دقت بالا ساخته بشن.

البته مدل‌ها حتما باید به فرمت‌های مناسب وب (مثل glTF یا OBJ) تبدیل بشن تا در مرورگرها قابل استفاده باشند !

❗important 🔺

➋ نمایش مدل ها ( WebGL API )

برای نمایش مدل‌های سه‌بعدی در فرانت‌اند میتونیم از کتابخانه‌هایی مثل Three.js استفاده کنیم.

این کتابخانه‌ها به کمک WebGL ( API برای رندر گرافیک سه‌بعدی در مرورگر) عمل می‌کنند و محتوای سه‌بعدی رو مستقیماً روی صفحات وب به نمایش می‌گذارند.

➌ اضافه کردن انیمیشن‌ها و تعامل‌سازی

و در نهایت باید با استفاده از جاوااسکریپت، ویژگی‌های تعاملی و انیمیشنی مثل چرخش، زوم و ... رو به مدل های 3D اعمال کنی 💥

➍ افزودن انیمیشن های تعاملی به باقی المان ها

درسته که در سایت های سه‌بعدی مدل های 3D خیلی مهم هستند ولی برای ایجاد حس بهتر در کاربران بهتره که به باقی المان های وبسایت انیمشن های تعاملی و خلاقانه اضافه کنید.

یکی از بهترین و قدرتمند ترین لایبرری ها برای ایجاد این نوع از وبسایت ها Framer Motion هست ( پست معرفی framer motion )

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #WhatsThat | #3D | #WebGL | #threejs

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

ماشین بازی آنلاین تحت وب، بزنید و لذت ببرید 😍🔥

شاید براتون سوال پیش بیاد که چجوری یه همچین وبسایتی رو ساختن با این کیفیت ⁉️

درواقع این وبسایت های با WebGL API مرور گر ایجاد شدن که میتونن مدل های سه بعدی رو رندر کنن و و شما به صورت تعاملی باهاشون کار بکنید، توی این پست کامل راجبش توضیح دادم میتونیم بخونید 🔻

https://t.me/coolycode/651

سه مدل وسیله نقلیه و تنظیمات خیلی حالبی داره، البته توی فیلم صدا میوت بود ولی حتما خودتون تستش کنید 🤩👇

🌐 https://slowroads.io

#threejs #3D #WebGL

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

➖➖➖➖➖➖➖➖➖