Forwarded from LearnPOV | لرن پی او وی
🌐 سایتهای سهبعدی چی هستند و چگونه کار میکنند ؟
🔸 به سایتهایی که از مدلهای سهبعدی استفاده میکنند و به کاربر این امکان رو میدن تا با محتوای داخل سایت به صورت تعاملی کار بکنه، سایت سهبعدی میگن.
یعنی چی دقیقا ؟ ⁉️🤔
به درد کیا میخوره ؟ 💡
چجوری میشه سایت 3D ساخت ؟ 🎥
➊ مدلسازی سهبعدی
➋ نمایش مدل ها ( WebGL API )
➌ اضافه کردن انیمیشنها و تعاملسازی
➍ افزودن انیمیشن های تعاملی به باقی المان ها
امیدوارم از این مطلب لذت برده باشید، با ریاکشنای خودتون بهمون انرژی بدید ❤️🔥
🔸 به سایتهایی که از مدلهای سهبعدی استفاده میکنند و به کاربر این امکان رو میدن تا با محتوای داخل سایت به صورت تعاملی کار بکنه، سایت سهبعدی میگن.
یعنی چی دقیقا ؟ ⁉️🤔
یعنی اینکه توی سایتهای سهبعدی، به جای دیدن تصاویر و المان های ساده و ثابت، میتونی اشیاء و مدلها رو به شکل واقعیتر و از زوایای مختلف ببینی.
به درد کیا میخوره ؟ 💡
درسته که سایت های سه بعدی خیلی جذابن ولی خیلی مهمه که بدونیم به درد هر کسی نمیخوره.
درواقع این قابلیت بیشتر برای بازی های سه بعدی تحت وب و وبسایت های فروشگاهی که دیدن محصولاتشون از زوایای مختلف مهمه، مثل لوازم خانگی، مبلمان یا حتی طراحیهای معماری.
❗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
🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟 | 𝗚𝗥𝗢𝗨𝗣
Forwarded from CleverDevs (Mammad)
اگه میخواید بین کاراتون یه چند دقیقه ای استراحت کنید و گیمی هم ندارید میتونید با slowroads آنلاین رانندگی کنید
https://slowroads.io
با استفاده از کتابخونه three.js توسعه داده شده
#game #threejs
@CleverDevs - @CleverDevsGp
https://slowroads.io
با استفاده از کتابخونه three.js توسعه داده شده
#game #threejs
@CleverDevs - @CleverDevsGp
Forwarded from LearnPOV | لرن پی او وی (Mohammad hossein)
Media is too big
VIEW IN TELEGRAM
ماشین بازی آنلاین تحت وب، بزنید و لذت ببرید 😍🔥
شاید براتون سوال پیش بیاد که چجوری یه همچین وبسایتی رو ساختن با این کیفیت ⁉️
سه مدل وسیله نقلیه و تنظیمات خیلی حالبی داره، البته توی فیلم صدا میوت بود ولی حتما خودتون تستش کنید 🤩👇
🌐 https://slowroads.io
➖➖➖➖➖➖➖➖➖
شاید براتون سوال پیش بیاد که چجوری یه همچین وبسایتی رو ساختن با این کیفیت ⁉️
درواقع این وبسایت های با WebGL API مرور گر ایجاد شدن که میتونن مدل های سه بعدی رو رندر کنن و و شما به صورت تعاملی باهاشون کار بکنید، توی این پست کامل راجبش توضیح دادم میتونیم بخونید 🔻
https://t.iss.one/coolycode/651
سه مدل وسیله نقلیه و تنظیمات خیلی حالبی داره، البته توی فیلم صدا میوت بود ولی حتما خودتون تستش کنید 🤩👇
🌐 https://slowroads.io
#threejs #3D #WebGL
𝗖𝗛𝗔𝗡𝗡𝗘𝗟 | 𝗚𝗥𝗢𝗨𝗣
➖➖➖➖➖➖➖➖➖