سرور مجازی NVMe

ایجاد تجربیات WebVR با A-Frame

طراحی و توسعه نرم افزار

توسط تیم تولید محتوا آخرین بروزرسانی دی ۱۷, ۱۴۰۲

سرفصلهای مطلب

زمان لازم برای مطالعه: 8 دقیقه

ایجاد تجربیات WebVR با A-Frame

WebVR یک راه شگفت انگیز برای ایجاد تجربیات واقعیت مجازی سه بعدی همهجانبه در مرورگر است. این یک ویژگی آزمایشی از Javascript API است و دارای حامیان و افراد زیادی است که آن را به جلو سوق می‌دهند، که موزیلا بخش بزرگی از آن است. با انفجار هدست های واقعیت مجازی که به بازار می آیند و موارد دیگر روی افق، اکنون زمان بسیار خوبی برای آزمایش است و ببینید چه چیزهای شگفت انگیزی می توانید در WebVR ایجاد کنید. وب باز در حال تبدیل شدن به یک کانون هیجان انگیز از تجربیات VR، شامل بازی های ماورایی، کاربردهای نقاشی و تجربیات فراگیر. همانطور که فناوری WebVR بالغ می شود و تجهیزات VR در دسترس تر می شوند، چه کسی می داند افراد چه تجربیات دیگری می توانند ایجاد کنند.

A-Frame چیست؟

همانطور که اشاره کردم موزیلا یک نیروی محرکه بزرگ در WebVR در حال حاضر است و آنها به ایجاد آن کمک کردند یک قاب، یک چارچوب وب برای ایجاد تجربیات واقعیت مجازی. از آن زمان به یکی از بزرگترین و هیجان انگیزترین پروژه های منبع باز شکوفا شد و به سرعت در حال رشد و تکامل است. A-Frame یکی از ساده ترین فریم ورک هایی است که من از کار کردن با آن لذت برده ام، اما چیزهایی که می توانید با آن ایجاد کنید شگفت انگیز هستند. راه اندازی آن ساده است، درک آن آسان و در عین حال بسیار قدرتمند است. به قول خود A-Frame:

A-Frame مبتنی است روی بالای HTML ، و شروع آن ساده است. اما A-Frame فقط یک نمودار صحنه سه بعدی یا یک زبان نشانه گذاری نیست. هسته یک چارچوب نهاد-مولفه قدرتمند است که ساختاری اعلامی، توسعه پذیر و قابل ترکیب را برای three.js.

چرا باید محتوای WebVR درست کنم؟

بیایید یک چیز را واضح بگوییم: WebVR و A-Frame هنوز در همه جا قابل استفاده نیستند. این فناوری به سرعت در حال حرکت است، اما هنوز کاملاً آزمایشی است. همچنین WebVR در حال حاضر (حداقل نه برای مدتی) جایگزین روش ساخت وب سایت های ما نخواهد شد. من پیش‌بینی می‌کنم که نمایش‌های دوبعدی با نمایشگرها و صفحه‌نمایش‌های معمولی همچنان روش غالب ما برای مدت طولانی مصرف محتوا باشد. بنابراین فکر می کنم دلیل اصلی ساخت محتوای WebVR سرگرمی است. این یک فناوری جدید و هیجان‌انگیز است و ما می‌توانیم چیزهای واقعاً بسیار جالبی با آن بسازیم. برخی از این پروژه‌ها می‌توانند به پروژه‌های مشتری تبدیل شوند، یک موزه می‌تواند شما را استخدام کند تا یک تور مجازی برای آنها ایجاد کنید، یا یک بازی می‌تواند شروع به کار کند و شما می‌توانید برای آن پول دریافت کنید. اما در اصل باید سرگرم باشیم و چیزهای هیجان انگیزی با WebVR و A-Frame خلق کنیم.

بیایید چیزی بسازیم

به نظر من بهترین راه برای هیجان زده شدن در مورد چارچوبی مانند A-Frame، کرک کردن است روی و چیزی بسازم ما قصد داریم یک گالری هنری واقعیت مجازی نسبتاً ساده بسازیم و شما را با برخی از عملکردهای اصلی A-Frame آشنا کنیم.

شروع شدن

اول از همه، ما به یک سرور محلی نیاز داریم. اگر قبلاً راهی برای انجام این کار دارید، عالی است. اگر نه، من توصیه می کنم راه اندازی a node سرور با سرور http. خوب، وقتی یک سرور محلی دارید، بیایید به A-Frame شیرجه بزنیم. ما با یک سند HTML اولیه به نام شروع می کنیم index.html و کتابخانه A-Frame را در سر سند بارگذاری کنید. A-Frame باید در هد بارگذاری شود تا قبل از بارگیری عناصر سفارشی که قرار است اضافه کنیم آماده شود.

<html>
 <head>
 <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
 </head>
 <body>
 </body>
</html>

اکنون A-Frame بارگذاری شده است، اجازه دهید سند HTML را برای یک صحنه A-Frame آماده کنیم. A-Frame مبتنی است روی بالای HTML است و از عناصر سفارشی استفاده می کند تا بسیاری از پیچیدگی ها را از بین ببرد. بیایید یک را قرار دهیم <صحنه> به سند. همه مولفه‌های A-Frame ما در این تگ a-scene اضافه می‌شوند، بنابراین این به جزء اصلی ما تبدیل می‌شود.

<html>
 <head>
 <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
 </head>
 <body>
 <a-scene>
 </a-scene>
 </body>
</html>

این همه کار ساختاری انجام شده است. میدونم درسته؟ فوق العاده ساده ما هنوز هیچ شیئی در صحنه نداریم، بنابراین فقط یک صفحه خالی می شود، اما می توانیم نمونه اشیاء را از آموزش A-Frame به سرعت اضافه کنیم.

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>

وای. بسیار خوب، شاید کاملاً عالی نباشد زیرا فقط برخی از اشکال است، اما هی، در چند سطر، تعدادی اشیاء سه بعدی در WebVR بارگذاری می شوند. در مرحله بعد شروع به ساخت گالری هنری واقعیت مجازی خود خواهیم کرد.

دانلود دارایی های ما

بنابراین فراموش نمی کنیم، تمام محتوا را از داخل صحنه خود پاک کنید، بنابراین اکنون فایل شما باید به شکل زیر باشد:

<html>
 <head>
 <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
 </head>
 <body>
 <a-scene>
 </a-scene>
 </body>
</html>

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

Google Blocks برنامه ای برای ایجاد مدل های سه بعدی در واقعیت مجازی است که در نوع خود بسیار عالی است. گالری جایی است که مردم خلاقیت های خود را به اشتراک می گذارند و ما مدل “گالری کوچک” را از آنجا دانلود خواهیم کرد. به سمت Google Blocks page برای این مدل و کلیک کنید روی دانلود. با این کار یک پوشه با دو فایل داخل آن دانلود می شود. آ model.obj و الف مواد.mtl. این دو فایل را در پوشه ای به نام گالری قرار دهید و این پوشه را در کنار خود قرار دهید index.html فایل. برای رندر صحیح مدل به هر دوی این فایل ها نیاز داریم و در مرحله بعد آنها را به A-Frame اضافه می کنیم.

پروژه شما در حال حاضر باید به شکل زیر باشد:

index.html
gallery/model.obj
gallery/materials.mtl

ایجاد فضای گالری VR

اکنون مدلی را که دانلود کرده ایم در پروژه خود بارگذاری می کنیم. A-Frame دارای یک داخلی است سیستم مدیریت دارایی، که دارایی های ما را از قبل بارگیری و ذخیره می کند. این یک ویژگی عالی است که یک مرحله واقعا مهم را از بین می برد و زندگی ما را بسیار آسان می کند. بیایید شی و مواد خود را در بارگذار دارایی بارگذاری کنیم:

<a-assets>
 <a-asset-item id="gallery-obj" src="https://www.webdesignerdepot.com/gallery/model.obj"></a-asset-item>
 <a-asset-item id="gallery-mtl" src="/gallery/materials.mtl"></a-asset-item>
</a-assets>

این به یک ویژگی id نیاز دارد که به این صورت است که هر دارایی را هدف قرار می دهیم، و یک ویژگی src که جایی است که فایل ها را بارگذاری می کنیم. اکنون می توانیم با استفاده از عنصر entity این شی را به صحنه اضافه کنیم. عنصر entity یکی از عناصر اصلی در A-Frame است و احتمالاً از آن استفاده خواهید کرد. همانطور که ما از آن به عنوان یک مکان نگهدار برای شی خود استفاده می کنیم، باید در واقع شی و ماده را در آن بارگذاری کنیم.

<a-entity obj-model="obj: #gallery-obj; mtl: #gallery-mtl"></a-entity>

اگر خود را تازه کنید page امیدواریم مدل را در مرکز صفحه ببینید. احتمالاً موقعیت یابی خاموش خواهد بود، اما باید بتوانید به اطراف نگاه کنید. بیایید اکنون با اضافه کردن یک عنصر دوربین به صورت دستی و قرار دادن آن موقعیت یابی را برطرف کنیم.

<a-entity id="camera" camera look-controls></a-entity>

همانطور که می بینید، عنصر دوربین در واقع یک جزء دوربین است که به یک عنصر موجود متصل شده است و ما می توانیم توانایی نگاه کردن به اطراف را با مولفه look-controls اضافه کنیم. اکنون عنصر دوربین را اضافه کرده ایم تا آن را در موقعیت قرار دهیم. موقعیت یابی سه مقدار X، Y و Z را می گیرد و با تنظیم پیش فرض 0 شروع می کنیم. روی هرکدام از اینها.

<a-entity id="camera" camera position="0 0 0" look-controls></a-entity>

همانطور که احتمالاً بلافاصله می توانید بگویید، تلاش برای قرار دادن مقادیر X، Y و Z فقط در کد کمی مشکل خواهد بود و دستور العملی برای سردرد است. خوشبختانه، ما به یک A-Frame Inspector عالی دسترسی داریم تا به شما در کار کمک کند. روی تجربیات VR شما می توانید A-Frame Inspector را با آن باز کنید + + i.

می توانیم کلیک کنیم روی دوربین موجود در لیست روی سمت چپ و موقعیت دوربین را یا با فلش ها یا ویژگی های موجود در منوی سمت راست پیدا کنید. با بازرس بازی کنید و ببینید چه کاری می توانید با آن انجام دهید. شما می توانید از تغییر ویژگی ها و آزمایش چیزهای زیادی بیاموزید، و این یکی از بهترین راه ها برای یادگیری موقعیت در فضای سه بعدی است.

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

<a-entity id="camera" camera position="0 0.5 -3.0” rotation="0 180 0" look-controls></a-entity>

افزودن پیام خوش آمد گویی

برای اینکه به گالری VR کمی بیشتر احساس خوشامدگویی بدهیم، پیام خوشامدگویی را با استفاده از جزء متنی A-Frame. افزودن متن به سادگی وارد کردن یک مقدار در مولفه متن است، با این حال مقادیر اضافی زیادی نیز وجود دارد که می توان آنها را تغییر داد. ما طبق معمول ویژگی های موقعیت و چرخش را به همراه برخی از گزینه های سفارشی سازی متن مانند فونت، تراز و رنگ داریم. ما هم یکی به نام داریم سمت. Side در واقع به A-Frame می گوید که کدام سمت متن را رندر کند. اگر بتوانید در صحنه خود حرکت کنید و نمی خواهید متن معکوس شده را ببینید، این کار مفید است. ما از دیدن آن خوشحالیم روی هر دو طرف.

<a-text
 value="VR Gallery"
 position="0.05 0.80 -2"
 rotation="0 180 0"
 font="mozillavr"
 color="#e43e31"
 side="double"
 align="center"
 width="6">
</a-text>

بنابراین ما متن را درست جلوی پنجره نشان می‌دهیم، اما هنوز از من استقبال نمی‌شود. بیایید کمی انیمیشن به آن اضافه کنیم تا چشم ها را به خود جلب کند و صحنه را جذاب تر کند.

متحرک کردن پیام خوش آمد گویی ما

A-Frame دارای یک مؤلفه انیمیشن قدرتمند است که می تواند به اجزای دیگر متصل شود. ما آن را با تودرتو کردن آن در عنصری که می‌خواهیم متحرک کنیم، وصل می‌کنیم. این یک ویژگی واقعا قدرتمند است و بسیار فراتر از انیمیشن ها است. به این ترتیب می توانیم چندین شی را در کنار هم قرار دهیم. به عنوان مثالی از این که چگونه می توان از آن استفاده کرد، به یک صفحه نمایش در یک بازی یا زمین فکر کنید روی یک مدار به دور خورشید با ماه دنبال و به دور زمین می چرخد. ما در این آموزش قصد داریم آن را ساده نگه داریم و فقط متن را متحرک کنیم. ما باید خاصیتی را که می‌خواهیم متحرک کنیم انتخاب کنیم و آن را به‌عنوان یک تنظیم کنیم صفت ارزش. ما می خواهیم متن خود را بالا و پایین کنیم تا بخواهیم موقعیت را ویرایش کنیم. در مرحله بعد باید به انیمیشن بگوییم که این مؤلفه را به کجا متحرک می کند – فقط می خواهیم کمی به سمت بالا حرکت کند بنابراین باید مقدار موقعیت مولفه والد را کپی کنیم و تنظیم کنیم Y ارزش. همچنین می‌توانیم آسان‌سازی، مدت زمان، حلقه زدن و روش حلقه‌گذاری آن را تنظیم کنیم. ما می‌خواهیم انیمیشن خود را با چرخش به‌طور نامحدود در حالی که هر بار جهت را تغییر می‌دهیم بالا و پایین بچرخانیم.

<a-animation
 attribute="position"
 to="0.05 0.85 -2"
 dur="1000"
 direction="alternate"
 easing="ease-in-out"
 repeat="indefinite">
</a-animation>

ما آن را داریم. یک پیام خوشامدگویی خوب که بالا و پایین می پرد. این هم کد کامل:

<html>
 <head>
 <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
 </head>
 <body>
 <a-scene>
 <a-assets>
 <a-asset-item id="gallery-obj" src="https://www.webdesignerdepot.com/gallery/model.obj"></a-asset-item>
 <a-asset-item id="gallery-mtl" src="/gallery/materials.mtl"></a-asset-item>
 </a-assets>
 <a-entity obj-model="obj: #gallery-obj; mtl: #gallery-mtl"></a-entity>
 <a-entity id="camera" camera position="0 0.5 -3.0" rotation="0 180 0" look-controls></a-entity>
 <a-text
 value="VR Gallery"
 position="0.05 0.80 -2"
 rotation="0 180 0"
 font="mozillavr"
 color="#e43e31"
 side="double"
 align="center"
 width="6">
 <a-animation
 attribute="position"
 dur="1000"
 direction="alternate"
 to="0.05 0.85 -2"
 easing="ease-in-out"
 repeat="indefinite">
 </a-animation>
 </a-text>
 </a-scene>
 </body>
</html>

بسته بندی

ما آن را داریم، یک گالری هنری واقعیت مجازی در کمتر از 40 خط. شما با استفاده از مؤلفه موجودیت با اشیاء، دوربین، متن و انیمیشن ها، مقدمه ای برای بارگیری دارایی ها داشته اید. با این ابزار پتانسیل ها بی حد و حصر و سرگرم کننده هستند. WebVR هنوز در مراحل ابتدایی است، اما مردم در حال حاضر پتانسیل چیزهای عالی را با آن می بینند. این یک روش کاملا متفاوت برای تجربه محتوا است و زمان هیجان انگیزی برای درگیر شدن است. A-Frame راهی به ما می دهد تا به سرعت و به راحتی وارد آن شویم و مردم را وادار کنیم از خلاقیت های ما تا حد امکان در دستگاه های مختلف استفاده کنند.

(برچسب‌ها برای ترجمه t) توسعه وب

منتشر شده در 1403-01-07 22:20:03

منبع نوشتار

امتیاز شما به این مطلب

پیشنهاد می‌کنیم بخوانید: بایگانی VPS