با کتابخانه Zdog سه بعدی طراحی کنید

Zdog چیست؟

DeSandro در وب‌سایت اختصاصی کتابخانه Zdog این‌گونه نوشته است:

Zdog یک موتور جاوا اسکریپت سه بعدی برای تگ‌هایی مثل <svg> و <canvas> است. به‌وسیله Zdog می‌توانید مدل‌های ساده سه بعدی را در صفحات وب طراحی و رندر کنید. Zdog یک موتور شبه سه بعدی است. ویژگی‌های هندسی آن در فضای سه بعدی وجود دارند، اما به‌صورت اشکال مسطح ارائه می‌شوند. این امر Zdog را ویژه کرده است.

به عبارت دیگر شما می‌توانید به‌وسیله Zdog تگ‌هایی مثل <svg> و <canvas> را طراحی کنید؛ نمایش دهید و آن‌ها را انیمیشنی کنید.

Zdog حجم کمی دارد. کلاً ۲۱۰۰ خط کد جاوا اسکریپت و ۲۸ کیلوبایت در نسخه فشرده حجم دارد. بسیار مناسب برنامه نویسان است چون به‌راحتی می‌توانند به پروژه‌هایشان اضافه کنند و همچنین نحوه استفاده از آن آسان است.

شروع کار با Zdog

مثل خیلی از کتابخانه‌های جاوا اسکریپت می‌توانید Zdog را به پروژه‌هایتان اضافه کنید. سه راه برای این امر وجود دارد:

• به‌راحتی می‌توانید از طریق این لینک https://unpkg.com//dist/zdog.dist.min.js فایل Zdog را دانلود کنید و به پروژه خودتان بیفزایید.
• استفاده از لینک‌ https://unpkg.com//dist/zdog.dist.min.js به عنوان CDN
• اگر از npm نیز استفاده می‌کنید، کار آسان است. کافی است دستور npm install zdog را در کنسول تایپ کنید.

در این قسمت می‌خواهم یک دمو در حد Hello World به شما نشان دهم تا کمی با سبک و سیاق این کتابخانه و کاری که می‌توانید انجام دهید آشنا شوید.

Zdog چگونه کار می‌کند؟

اجازه دهید کار را با ساخت یک تگ <svg> شروع کنیم. در بخش HTML ما فقط یک سری تگ svg یا canvas داریم که به‌عنوان نگهدارنده شکل از آن استفاده می‌کنیم. اگر شما علاقه‌مند به استفاده از canvas به‌جای svg هستید هیچ مشکلی نیست. می‌توانید از canvas استفاده کنید. به مثال زیر توجه کنید:

<svg id="circle" width="100" height="100"></svg>

حال این svg را به‌وسیله css کمی استایل می‌دهیم.

#circle {
    background-color: #081d3f;
    width: 100vw;
    height: 100vh;
}

و در نهایت در قسمت جاوا اسکریپت داریم:

// Illustration نمونه ای از کلاس 
let circle = new Zdog.Illustration({
    element: '#circle'
})

// ایجاد دایره با کلاس ellipse
new Zdog.Ellipse({
    addTo: circle,
    diameter: 20,
    stroke: 20,
    color: '#ccc'
})

// رندر کردن دایره
circle.updateRenderGraph()

برای طراحی تصاویر، شما نیاز دارید تا یک نمونه از کلاس‌های zdog ایجاد کنید. Illustration یک کلاس سطح بالا است که با تگ های svg  و canvas سر و کار دارد. تمامی شکل‌های شما که در صفحه نمایش داده می‌شوند فرزند نمونه کلاس Illustration هستند.

Ellipse کلاس شکل است. شما شکل موردنظر را به‌وسیله این کلاس می‌سازید و به‌وسیله متد addTo به نگهدارنده موردنظر که در اینجا circle است اضافه می‌کنید.

Zdog شکل‌های از پیش نوشته شده زیادی دارد مثل چند ضلعی و مربع و ... برای ساخت شکل‌های جدید باید از کلاس shape استفاده می‌کنیم و در داخلش نقاط موردنظر شکل را قرار می‌دهیم. همچنین شما می‌توانید ویژگی‌های دیگری مثل قطر «diameter» یا ضخامت شکل «stroke» یا رنگ را نیز بیفزایید. برای ویژگی‌های دیگر می‌توانید مستندات مربوط را که در «این لینک» قرار گرفته است مطالعه بفرمایید.

تصاویر ساخته شده به‌وسیله این عبارات در صفحه نمایش داده نخواهد شد. برای اینکه تصاویر شما در صفحه رندر شود باید یک متد فراخوانی کنیم. نام این متد updateRenderGraph است. این متد را برای نمونه‌ای که از  Illustration ساختیم فراخوانی می‌کنیم. به‌صورت زیر:

circle.updateRenderGraph()

در زیر شکلی که ساختیم را مشاهده بفرمایید:

اضافه کردن انیمیشن و ویژگی Drag به Zdog

برای ساخت انیمیشن نیاز به نمونه circle داریم. چون در هر فریم باید دوباره رندر شود. برای این امر ما از تابع requestAnimationFrame استفاده می‌کنیم. به عبارت زیر توجه بفرمایید:

function animate() {
    /* اضافه کردن مقدار مشخص برای چرخش در محور عمودی */
    circle.rotate.y += 0.03;
    // رندر دوباره
    circle.updateRenderGraph();
    // درخواست برای انیمیشنی شدن      
    requestAnimationFrame(animate);
}

animate();

در این جا ما تابعی نوشتیم به اسم animate و آن را فراخوانی کردیم. در این تابع تنظیم کرده‌ایم که دایره ما حول محور y بچرخد. با اضافه شدن مقدار موردنظر به circle.rotate.y در هر بار فراخوانی این اتفاق رخ می‌دهد. سپس دستور دادیم دوباره رندر شود و در آخر از requestAnimationFrame برای انیمیشنی کردن آن استفاده کردیم.

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

برای این منظور ابتدا متغیری تعریف می‌کنیم که وضعیت فعال بودن انیمیشن را نشان می‌دهد.

let isSpinning = true;

حال می‌بایست به circle برگردیم و ویژگی dragRotate را فعال کنیم برای فعال کردن این ویژگی عبارت true را در مقابلش می‌نویسیم. علاوه بر این کار باید در متد onDragStart داخل circle مقدار عبارت isSpinning را false کنیم تا در هنگام drag انیمیشن متوقف شود. در متد onDragEnd نیز مقدار isSpinning را true می‌کنیم تا به‌محض رها کردن کلید ماوس، انیمیشن شروع شود. به عبارت زیر توجه بفرمایید:

let circle = new Zdog.Illustration({
    element: '#circle',
    dragRotate: true,
    onDragStart() {
        isSpinning = false;
    },
    onDragEnd() {
        isSpinning = true;
    }
});

و در آخر می‌بایست تابع animate را ویرایش کنیم تا مطابق مقدار isSpinning دستورات اعمال شود. برای این منظور کافی است از یک if در بالای عبارتی که مقداری به rotate.y اضافه می‌کند بنویسیم.  به عبارت زیر توجه بفرمایید:

if (isSpinning) {
    circle.rotate.y += 0.03
}

نسخه نمایشی کار در سایت codepen آپلود شده است به‌راحتی می‌توانید به‌صورت آنلاین آن را بررسی کنید:

منابع و دموهای بیشتر از Zdog

این تنها مثال کوچکی از گرافیک‌ها و انیمیشن‌های شگفت انگیزی است که می‌توانید با Zdog بسازید. شما می‌توانید این کتابخانه را با کتابخانه‌های دیگر انیمیشن مثل GreenSock ترکیب کنید که قدرت فوق‌العاده‌ای به شما می‌دهد.

• جایی که می‌توانید تمام جزئیات مربوط به API ، نسخه‌های دمو بیشتر و موارد دیگر را پیدا کنید سایت اصلی این کتابخانه یعنی «سایت رسمی Zdog» است.
• مجموعه‌ای از دموهایی که می‌توانید در وب‌سایت codepen پیدا کنید «اینجاست».

در نهایت توجه شما را به دمویی از سوپر ماریو با Zdog جلب می‌کنم.

امیدوارم از این مطلب استفاده کرده باشید. اگر نظر یا مشکلی دارید می‌توانید در قسمت نظرات عنوان بفرمایید.