
Movi.Kanti.Revo یک آزمایش حسی کروم جدید است که توسط Cirque du Soleil ساخته شده و توسط Subatomic Systems توسعه یافته است که شگفتی Cirque du Soleil را از طریق فناوریهای وب مدرن به وب میآورد.
ساخت دنیای سه بعدی
آزمایش فقط با استفاده از HTML5 ایجاد شد و محیط کاملاً با نشانه گذاری و CSS ساخته شده است. مانند قطعات روی صحنه، div
، img
، video
کوچک و عناصر دیگر با استفاده از CSS در یک فضای سه بعدی قرار می گیرند. با استفاده از getUserMedia
API جدید راه کاملا جدیدی برای تعامل با آزمایش را فعال کرد، به جای استفاده از صفحه کلید یا ماوس، یک کتابخانه تشخیص چهره جاوا اسکریپت سر شما را ردیابی می کند و محیط را همراه با شما حرکت می دهد.
همه وب یک مرحله است
برای ساختن این آزمایش، بهتر است مرورگر را به عنوان یک مرحله تصور کنید، و عناصری مانند <div>
، تصاویر، ویدیوها و عناصر دیگر را به عنوان قطعاتی که در فضای سه بعدی با استفاده از CSS قرار گرفته اند، تصور کنید. هر عنصر یا قطعه با اعمال یک تبدیل سه بعدی روی صحنه قرار می گیرد. اگر با تبدیل translate3d
آشنا نیستید، 3 پارامتر نیاز دارد، X، Y و Z. X عنصر را در امتداد یک خط افقی حرکت میدهد، Y عنصر را بالا و پایین میبرد و Z عنصر را نزدیکتر یا دورتر میکند. برای مثال، اعمال transform: translate3d(100px, -200px, 300px)
عنصر را 100 پیکسل به سمت راست، 200 پیکسل به پایین و 300 پیکسل نزدیکتر به سمت بیننده حرکت میدهد.
ساخت سالن
بیایید به آخرین صحنه نگاهی بیندازیم و ببینیم که چگونه با هم ترکیب شده است. همه صحنه ها به سه ظرف اصلی، ظرف جهان، ظرف پرسپکتیو و صحنه تقسیم می شوند. کانتینر جهان به طور موثر دوربین بینندگان را تنظیم می کند و از ویژگی perspective
CSS استفاده می کند تا به مرورگر بگوید بیننده از کجا به عنصر نگاه می کند. #perspective-container
برای تغییر دیدگاه ما با اعمال تبدیل های سه بعدی به آن استفاده می شود. در نهایت، صحنه شامل قطعات مجموعه واقعی است که روی صفحه قابل مشاهده خواهد بود.
<div id="world-container">
<div id="perspective-container">
<div id="stage">
</div>
</div>
</div>
#world-container {
perspective: 700px;
overflow: hidden;
}
#perspective-container {
{ % mixin transform-style: preserve-3d; % }
{ % mixin transform-origin: center center; % }
{ % mixin perspective-origin: center center; % }
{ % mixin transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); % }
}
تجسم صحنه
در داخل صحنه، هفت عنصر در صحنه پایانی وجود دارد. با حرکت از پشت به جلو، آنها شامل پس زمینه آسمان، یک لایه مه، درها، آب، بازتاب ها، یک لایه مه اضافی و در نهایت صخره های جلو هستند. هر آیتم با یک transform: translate3d(x, y, z)
خاصیت CSS که نشان می دهد کجا در فضای سه بعدی قرار می گیرد. ما از مقدار z به روشی مشابه استفاده کردیم که از z-index
استفاده میکردیم، اما با ویژگی translate3d
، میتوانیم یک واحد با مقدار نیز ارائه کنیم.

شکل 1 نشان میدهد که صحنه کوچکنمایی شده و تقریباً 90 درجه چرخیده است تا بتوانید نحوه قرارگیری هر یک از قطعات مختلف در صحنه را تجسم کنید. در پشت (دورترین سمت چپ)، می توانید پس زمینه، مه، درها، آب و در نهایت صخره ها را ببینید.
قرار دادن پس زمینه روی صحنه
بیایید با تصویر پس زمینه شروع کنیم. از آنجایی که دورترین قسمت عقب است، ما یک تبدیل -990px در محور Z اعمال کردیم تا آن را در پرسپکتیو خود به عقب برگردانیم (شکل 2 را ببینید).

همانطور که در فضا به عقب حرکت می کند، فیزیک می خواهد که کوچکتر شود، بنابراین باید اندازه آن را از طریق یک scale(3.3)
تغییر داد تا با نمای دید مطابقت داشته باشد و لبه بالایی با بالای نمای با یک translate3d
در محور y تراز شود. (شکل 3 را ببینید).
.background {
width: 1280px;
height: 800px;
top: 0px;
background-image: url(stars.png);
{ % mixin transform: translate3d(0, 786px, <b>-990px</b>) <b>scale(3.3)</b>; % }
}

مه، درها و صخرهها به همین ترتیب، هر کدام با اعمال یک translate3d
با موقعیت z و ضریب مقیاس مناسب (شکل 4 را ببینید). توجه کنید که چگونه مه پشت درها و پشت صخره ها انباشته شده است.

اضافه کردن دریا
برای ایجاد یک محیط واقعی تا حد ممکن، میدانستیم که نمیتوانیم به سادگی آب را روی یک صفحه عمودی قرار دهیم، معمولاً در دنیای واقعی چنین چیزی وجود ندارد. علاوه بر اعمال translate3d
برای قرار دادن آب روی صحنه، ما همچنین یک چرخش محور x (افقی) 60 درجه ( rotateX(60deg)
) اعمال می کنیم تا صاف و بافت دیده شود. چرخش مشابهی به بازتاب درب و مه ثانویه اضافه شد تا در صفحه صحیح ظاهر شود (شکل 5 را ببینید).
.sea {
bottom: 120px;
background-image: url(sea2.png);
width: 1280px;
height: 283px;
{ % mixin transform: translate3d(-100px, 225px, -30px) scale(2.3) <b>rotateX(60deg)</b>; % }
}

هر صحنه به روشی مشابه ساخته شد، عناصر در فضای سه بعدی یک صحنه تجسم شدند و یک تبدیل مناسب برای هر یک اعمال شد.