دستورالعمل هایی برای ساخت یک کامپوننت وب وجود دارد که به ما اجازه می­دهد با استفاده از BabylonJS یک مدل سازی سه بعدی را در وب سایت قرار دهیم. این مدل سه بعدی می­تواند معرف هر آن چیزی باشد که در ذهن شما نقش بسته است. یک متن بلد شده، محصولی مشخص و یا یک لوگو موشن برجسته و متحرک! حتی می­توانید یک نمایه ساختمانی با رندر نرمال داشته باشید.

مدل سازی سه بعدی سریع و آسان

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

طی کردن این مراحل کمک می­کند تا یک مدل سه بعدی را در یک صفحه وب قرار دهیم. این مدل می­تواند سفارشی از سوی شما باشد و یا طرح پیشنهادی از سوی مجموعه! برای این منظور ما به اجزای وب، موتور سه بعدی و برخی از فناوری­های مرتبط دیگر نیاز داریم.

مدل سازی سه بعدی

با مرور سریع اجزای وب می­توانیم آن­ها را با کمک Custom Elements ، Shadow DOM  و الگوهای HTML به صورت مدل سازی سه بعدی ایجاد کنیم. به عنوان مثال ما یک عنصر سفارشی  model-3d  را تعریف خواهیم کرد. سپس از Shadow DOM برای ایجاد ساختار زیرسازی برای نمایشگر مدل 3D استفاده خواهیم کرد.

موتور سه بعدی

ما BabylonJS را به عنوان موتور سه بعدی انتخاب کرده­ایم. گرچه ممکن است برای چنین مولفه ساده­ای کمی زیاد باشد، اما می­خواهیم به تدریج ویژگی­های جدیدی را به وب سایت شما اضافه کنیم. در نتیجه به ابزاری قدرتمند نیاز داریم. همچنین سهولت در ایجاد یک صحنه پیش فرض حایز اهمیت است.

فرمت در مدل سازی سه بعدی

فرمت­های مدل سه بعدی زیادی وجود دارد، اما به طور معمول از مدل­های GLTF استفاده می­شود. این فرمی است که حول انتقال کارآمد ایده و بارگذاری صحنه­ ها و مدل­های سه بعدی توسط برنامه ­ها طراحی شده است. با این وجود قطعا از لودر داخلی استفاده خواهیم کرد که می­تواند قالب­های دیگر مانند OBJ را نیز مدیریت کند. می­توانید اشیا را از Microsoft 3D Remix ، Google’s Poly یا Sketchfab بدست آورید.

اطلاعات بیشتر
سفارش دهید

وعده‌های JS

این وعده­ها در مدل سازی سه بعدی اشیائی هستند که نمایانگر اتمام یک عملیات ناهمزمان هستند. در پشت صحنه نیاز به یک بوم با زمینه وبگل خواهیم داشت. اینجا BabylonJS است که روشی آسان برای تنظیم آن را فراهم می­کند! برای استفاده از BabylonJS باید اسکریپت­ها را از قبل به صفحه اضافه کنیم.

برای استفاده از قابلیت­های خاص مانند توانایی تعامل با صفحه­ های لمسی، باید ما به کمک یک کد embed فایل 3D را به سایت شما پیوند می‌دهیم. ما با اضافه کردن خود فایل­ها و تنظیم محیط به گونه ای که مدل سه بعدی را به بهترین شکل نمایش دهد، کاربر را از انجام این کار به صورت دستی نجات می­دهیم.

۱
۲
۳
۴
۵
میانگین امتیازات ۵ از ۵
از مجموع ۵ رای