ساخت انیمیشن های سه بعدی با جاوا اسکریپت + دوره آموزشی

با سلام و بنام خدا خدمت شما دنبال کنندگان گرامی

با یه آموزش دیگه رسیدیم خدمت شما که به علم شما در طراحی سایت اضافه کنیم

توی این قسمت قراره وارد مبحث , انیمیشن سازی با جاوا اسکریپت بشیم
ولی خب فرقش اینه که قراره انیمیشن سازی سه بعدی رو یاد بگریم
بریم که شروع کنیم

غیر ممکنه یه مدرکی تو هر سطحی از رشته ی کامپیوتر داشته باشید ولی با جاوااسکریپت

آشنا نشده باشید. تو هر زیر شاخه ای از رشته ی  کامپیوتر ، سر کله ی جاوااسکریپت همیشه

پیدا میشه از هک و امنیت بگیرید تا هوش مصنوعی . بعد اگه برید تحقیق کنید می فهمید

جاوااسکریپت زبان برنامه نویسی سمت کاربر هستش!! اخه با زبان برنامه نویسی سمت کلاینت میشه هک کرد ؟؟

یه زره فکر کنید . نه انصافا ، با زبان برنامه نویسی سمت کاربر میشه بک اند سایت رو نوشت ؟؟

اگه این زبان برنامه نویسی سمت کاربر پس چرا میشه باهاش هم هک کرد هم سرور کانفیگ کنید ؟

چرا اسم این زبان برنامه نویسی رو گزاشتن زبان برنامه نویسی سمت کاربر ؟ چرا نزاشتن زبان برنامه نویسی همه کاره ؟

(البته زبان برنامه نویسی همه کاره نیست چون نه بلده آشپزی کنه ، نه نون میخره

و از همه مهمتر Wi-Fi هم نداره اگه این آپشن هارم داشت شخصا خودم می رفتم خواستگاریش )

از این بهث های خل و چلانه یه زره دور بشیم ببخشید یه زره این نویسنده ی ما شیرین عقل هستش .

یه سوال اون بالا تر موند : چرا اسم این زبان برنامه نویسی رو گزاشتن زبان برنامه نویسی سمت کاربر ؟

چرا نزاشتن زبان برنامه نویسی همه کاره ؟ والا خودم هم نمی دونم اگه شما می دونید زیر همین مقاله جواب رو تو بخش نظرات بنویسید .

خوب اینجا ما قراره با یکی از آپشن های این زبان فول آپشن نه تقریبا فول آپشن

(فقط پراید فول آپشنه بخاطر همینه که همه عاشقش هستند ) آشنا بشیم یعنی همون ساخت انیمیشن ها ۳D .

اره درست خوندید انیمیشن های سه بعدی ، اخه یه زبان برنامه نویسی سمت کاربر رو به این جور چیزا .

خیلی از این امکاناتی که js داره اگه قرار بود با کد های خود جاوااسکریپت نوشته بشه خیلی طولانی میشه

و یادگیریش هم سخت میشد .

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

اگه جاوااسکریپت این همه کتابخونه واسش نوشته نمی شد شاید خیلی از ویژگی هاش شناخته نمی شد

و ما جاوااسکریپت رو همون در حد یه زبان برنامه نویسی سمت کاربر می شناختیم و تا این حد  جاوااسکریپت

رو یاد می گرفتیم که توی فرم ها تعداد کارکتر های پسورد کاربر بیش تر از ۶ حرف باشه . خوب فعلا که جاوااسکریپت

این همه واسش کتابخونه نوشته شده ما هم با خیلی هاشون آشنا هستیم . بریم سراغ موضوع اصلی :

چجوری با جاوااسکریپت میشه انیمیشن های سه بعدی ساخت ؟

و باید از کدوم یکی از کتابخونه هاش رو استفاده کنیم ؟

?

شما می تونید با استفاده از کتابخونه ی three.js انیمیشن های سه بعدی خودتون رو بسازید .

کتابخانه ای که با استفاده از اون میتونید انسان ، شی ، حیوان و هر چیزی رو که میبیند به صورت سه بعدی

روی مرورگرتون پیاده سازی کنید. البته این کتابخونه با کمک WebGL میتونه انیمیشن های سه بعدی بسازه .

WebGL دیگه چیه ؟

WebGL یا Web Graphics Library یک کتابخانه ی برنامه نویسی است که ساخت تصاویر

و انیمیشن های دو بعدی و سه بعدی را امکان پذیر میکنه. در اصل شما با three.js  و با کمک WebGL می توانید

تصاویر  دو بعدی و سه بعدی بسازید . حالا بریم سراغ اصلیه یعنی همون three.js   و بیشتر با این کتابخونه ی عجیب غریب آشنا بشیم .

اول بریم سراغ تاریخچه ی این کتابخونه :

به نقل از منبع بزرگ ویکی پدیا :Three.js یک کتابخانه متشکل از مرورگر JavaScript و رابط برنامه نویسی برنامه (API) است که برایایجاد و نمایش گرافیک کامپیوترهای متحرک سه بعدی در یک مرورگر وب استفاده می شود.Three.js از WebGL استفاده می کند. کد منبع در مخزنی در GitHub میزبانی می شود.

شما واسه این که که انیمیشن بسازید بیشتر نیاز به Three.js تا WebGL  دارید و در حد متوسط به پایین WebGL

رو بلد باشید واسه ساخت انیمیشن کافیه . منظورم اینه که حرف اصلی رو Three.js میزنه پس زیاد نگران WebGL  نباشید .

نمونه هایی از انیمیشن هایه سه بعدی با Three.js :

?

اگه می خواید مثال بالا رو کداش رو ببینید و خودتون امتحانش کنید ،به این لینک برید ➡ ➡

?

اینم مثال جالبی هستش . میتونید خودتون تو این لینک امتحانش کنید ➡ ➡

?

این انیمیشنم جالبه کداش هم تو این لینک هستش ➡ ➡

شاید خیلی عجیب باشه واسه شما که واقعا این انیمیشن ها با جاوااسکریپت درست شده ؟؟ ?

یعنی این انیمیشن ها کد هستند و کد ها به این شکل واقعا در میان ؟؟

جواب دو سوال شما بله هستش ولی عجیب تر اینه که این انیمیشن ها ۶۰Fps هستند ?

ولی انیمیشن سازی با جاوااسکریپت به اینجا فقط ختم نمیشه و کلی کتابخونه عجیب غریب واسه این کار ساخته شده

ولی اصل کاری که از همه مهم تر بود همین three.js بود. ولی من اینجا چند تا کتابخونه جاوااسکریپت دیگه واستون معرفی میکنم :

کتابخانه GSAP

?

کتابخانه GreenSock JS یا همون GSAP یکی دیگر از کتابخانه های انیمیشن سازی است که کامل بر روی کد

های جاوااسکریپت سوار است . این کتابخانه رو تمام مرورگر های جدید پشتیبانی میکنه و یه تیم دائما در حال برورزکردن این کتابخونه هستند.

این کتابخونه حتی میتونه با Three.js در انیمیشن سازی برابری کنه  چون GSAP انعطاف پذیر هستش

و با VueJS ، ReactJS ،  VanillaJS و Angular کار می کند.

کتابخون Typed.JS

?

یه چیزی که خیلی نظر ما رو جلب کرده تو خیلی از سایت ها تایپ شدن خودکار کلمات ؟؟!!

این تایپ خودکار کار یکی از کتابخونه های جاوااسکریپت به نام Typed.JS هستش که یکی از قابلیت هاش اینه که میتونید

سرعت تایپ رو کنترل کنید . کارکردن با این کتاب خونه خیلی راحته . شما میتونید متن مورد نظرتون رو تو تگ div

قرار بدید و از این کتابخونه بخواید که واستون تایپ کنه . به خاطر همینه که این کتابخونه تو گیت هاب ۶۰۰۰ ستاره داره .

متاسفانه آموزش فارسی واسه این کتابخونه ها وجود نداره  و بهترین منبع آموزشی انگلیسی اینا خود سایت کتابخونه هستش .

پیش نیاز یادگیری این کتابخونه ها جاوااسکریپت هستش و شما باید متوسط به بالا به JS مسلط باشید.

خوشبختانه ما آموزش جاوااسکریپت رو واستون تو سایتمون قرار دادیم که رایگان هستش .

اگه علاقه مند به یادگیری جاوا اسکریپت هستی رو این لینک کلیک کن (:

موفق باشید…