Movi Kanti Revo - Part 1 - Building the 3D World

پیت لی پیج

لوگوی Movi Kanti Revo.

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: مرحله از کنار
شکل 1: مرحله از کنار.

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

قرار دادن پس زمینه روی صحنه

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

مرحله، تنها با پس‌زمینه در -990 پیکسل
شکل 2: مرحله، تنها با پس‌زمینه در -990 پیکسل

همانطور که در فضا به عقب حرکت می کند، فیزیک می خواهد که کوچکتر شود، بنابراین باید اندازه آن را از طریق یک ویژگی 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>; % }
}
شکل 3: صحنه، با پس زمینه قرار گرفته و مقیاس شده.
شکل 3: صحنه، تنها با پس زمینه قرار گرفته و مقیاس شده است.

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

شکل 4: صحنه، با مه، درها و صخره در موقعیت و مقیاس قرار گرفته است
شکل 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>; % }
}
شکل 5: صحنه، با همه چیز در موقعیت و مقیاس.
شکل 5: صحنه، با همه چیز در موقعیت و مقیاس.
>

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

بیشتر خواندن