بازی مکعب روبیک
مکعب روبیک را میشناسی؟ همان مکعب رنگی که باید هر طرفش یکرنگ شود. اینجا بهجای مکعب پلاستیکی، یک مکعب سهبعدی داخل مرورگر داری. با انگشت یا ماوس میچرخانیاش و لایههایش را جابهجا میکنی.
پشت این بازی three.js نشسته؛ کتابخانهای که گرافیک سهبعدی را داخل صفحهٔ وب میآورد. 🧊
حالا خودت بازی کن
برای شروع، دو بار روی صفحه ضربه بزن یا کلید فاصله را فشار بده. انگشتت را روی خود مکعب بکش تا یک لایه بچرخد. بیرون مکعب بکش تا کل مکعب بچرخد. با کیبورد هم کلیدهای جهتدار لایه را میچرخانند. 🧊🎮
عجله نکن. اول یک طرف را کامل کن، بعد سراغ طرف بعدی برو. 🌟
مکعب از چه ساخته شده؟
مکعب روبیک یک جسم یکپارچه نیست. از چند مکعب کوچک ساخته شده که کنار هم چیده شدهاند. در حالت سه در سه ۲۷ خانه داری، ولی خانهٔ وسط پنهان است. پس ۲۶ مکعب کوچک میبینی که هرکدام شش وجه دارد و هر وجه یک رنگ.
حالا وقتی یک لایه را میچرخانی، برنامه همان مکعبهای کوچک را دور یک محور میچرخاند. بعد جای جدیدشان را ذخیره میکند. پس میتوانی اندازهٔ مکعب را از دو در دو تا پنج در پنج عوض کنی. فقط تعداد مکعبهای کوچک فرق میکند. 🧩
سهبعدی داخل مرورگر چطور کار میکند؟
صفحهٔ وب یک عنصر به نام بوم (canvas) دارد. بوم یک مستطیل خالی است که برنامه رویش نقاشی میکند. three.js روی همین بوم یک صحنهٔ سهبعدی میسازد. داخلش یک دوربین هست، چند نور، و اجسامی که در فضا جا دارند.
مرورگر در هر ثانیه دهها بار صحنه را از نو میکشد. هر بار که مکعب کمی میچرخد، یک تصویر تازه کشیده میشود. همین تصویرهای پشتسرهم، حرکت نرم را میسازند.
تنظیمهای بازی هم همین صحنه را عوض میکنند: اندازهٔ مکعب، طرح رنگ، و زاویهٔ دوربین. زاویهٔ دوربین دو حالت دارد: تخت و پرسپکتیو. جالب اینجاست که در حالت پرسپکتیو، ضلعهای دورتر کوچکتر دیده میشوند، درست مثل چشم خودت. 👁️
چقدر حواست بود؟
دو بخش قبل دیدی مکعب از چه ساخته شده و مرورگر چطور آن را میکشد. حالا این سوال را جواب بده.
این بازی مکعب سهبعدی را چطور داخل مرورگر نشان میدهد؟
مکعب یک تصویر آماده نیست. three.js مکعبهای کوچک را در یک فضای سهبعدی میچیند و هر فریم را روی بوم میکشد. برای همین میتوانی از هر زاویهای نگاهش کنی و لایههایش را بچرخانی. با تصویر یا جدول چنین چیزی ممکن نبود.