خواندن ۱ دقیقه·۴ سال پیش

محیط 3D در HTML

قابلیت طراحی صفحات و منظره های 3D در HTML و حتی استفاده از ان در VR !!!!!

با فریم ورک A-Frame

شما با استفاده از تگ <a-scene> می تونید محیطی برای ساخت اشکال به وجود بیارید را به وجود بی اوردید

به نمونه کد زیر توجه کنید

<html>
  <head>
    <meta charset=&quotutf-8&quot>
    <script src=&quothttps://aframe.io/releases/0.8.0/aframe.min.js&quot>
  </head>
  <body>
    <a-scene>
      <a-box position=&quot-1 0.5 -3&quot rotation=&quot0 45 0&quot color=&quot#4CC3D9&quot></a-box>
      <a-sphere position=&quot0 1.25 -5&quot radius=&quot1.25&quot color=&quot#EF2D5E&quot></a-sphere>
      <a-cylinder position=&quot1 0.75 -3&quot radius=&quot0.5&quot height=&quot1.5&quot color=&quot#FFC65D&quot></a-cylinder>
      <a-plane position=&quot0 0 -4&quot rotation=&quot-90 0 0&quot width=&quot4&quot height=&quot4&quot color=&quot#7BC8A4&quot></a-plane>
      <a-sky color=&quot#BBBBBB&quot></a-sky>
    </a-scene>
  </body>
</html>

خروجی کد به شکل زیر است

این فریمورک خیلی قابلیت های بیشتری دارد و این فقط یک نمونه است

اما ماجرا به همین جا ختم نمی شود تا وقتی که شرکت موزیلا hubs را منتشر می کند

https://hubs.mozilla.com/

همان طور که می بینید موزیلا هاب محیطی تحت وب را فراهم می کند که شما می توانید در آن حرکت کنید و فعالیت های مختلفی انجام دهید. این می تواند به اعنوان یک محیط تفریحی یا اموزشی مثل مدرسه استفاده شود و یا حتی در زمینه های بازی سازی پیشرفت های چشمگیری انجام دهد و حتی می تواند تبدیل به زندگی روزمره افراد شود همان طور که در تصویر زیر مشاهده می کنید کلوپ های ورزشی و .. را می توان به این شکل بر گذار کرد

لینک داکیومت اصلی :

https://aframe.io/docs/1.1.0/introduction/

شاد و پیروز باشدی ;)

html a frame 3d webgl vr

علی نادری

اگه خواستی می تونیم با khod.naderi@gmail.com با هم در ارتباط باشیم ;)

شاید از این پست‌ها خوشتان بیاید