<মডেল-দর্শক> ওয়েব উপাদান

একটি ওয়েবসাইটে 3D মডেল যোগ করা কঠিন হতে পারে; <model-viewer> HTML লেখার মতই সহজ।

জো মেডলি
Joe Medley

একটি ওয়েবসাইটে 3D মডেল যোগ করা কঠিন। 3D মডেলগুলি আদর্শভাবে একটি দর্শকের মধ্যে দেখানো হয় যা স্মার্টফোন, ডেস্কটপ বা এমনকি নতুন হেড-মাউন্ট করা ডিসপ্লে সহ সমস্ত ব্রাউজারে প্রতিক্রিয়াশীলভাবে কাজ করতে পারে। দর্শকের কর্মক্ষমতা এবং রেন্ডারিং মানের জন্য প্রগতিশীল বর্ধন সমর্থন করা উচিত। এটি পুরানো, নিম্ন-চালিত স্মার্টফোন থেকে শুরু করে নতুন ডিভাইস যা অগমেন্টেড রিয়েলিটি সমর্থন করে এমন সমস্ত ডিভাইসে ব্যবহারের ক্ষেত্রে সমর্থন করা উচিত। এটি বর্তমান প্রযুক্তির সাথে আপ টু ডেট থাকা উচিত। এটি কার্যকরী এবং অ্যাক্সেসযোগ্য হওয়া উচিত। যাইহোক, এই ধরনের ভিউয়ার তৈরির জন্য বিশেষ 3D প্রোগ্রামিং দক্ষতা প্রয়োজন, এবং ওয়েব ডেভেলপারদের জন্য একটি চ্যালেঞ্জ হতে পারে যারা তৃতীয় পক্ষের হোস্টিং পরিষেবা ব্যবহার করার পরিবর্তে তাদের নিজস্ব মডেলগুলি হোস্ট করতে চায়।

<model-viewer> ওয়েব কম্পোনেন্ট, যাইহোক, আপনার নিজের সাইটে মডেলটি হোস্ট করার সময় আপনাকে ঘোষণামূলকভাবে একটি ওয়েব পৃষ্ঠায় একটি 3D মডেল যোগ করতে দেয়। উপাদানটির লক্ষ্য হল অন্তর্নিহিত প্রযুক্তি এবং প্ল্যাটফর্মগুলি না বুঝে আপনার ওয়েবসাইটে 3D মডেল যোগ করা সক্ষম করা৷ ওয়েব কম্পোনেন্ট প্রতিক্রিয়াশীল ডিজাইনকে সমর্থন করে এবং কিছু ডিভাইসে অগমেন্টেড রিয়েলিটির মতো কেস ব্যবহার করে। এতে অ্যাক্সেসিবিলিটি, রেন্ডারিং কোয়ালিটি এবং ইন্টারঅ্যাক্টিভিটির বৈশিষ্ট্য রয়েছে।

একটি ওয়েব উপাদান কি?

একটি ওয়েব কম্পোনেন্ট হল একটি কাস্টম এইচটিএমএল উপাদান যা স্ট্যান্ডার্ড ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য থেকে তৈরি করা হয়। একটি ওয়েব উপাদান একটি আদর্শ উপাদানের মত সমস্ত উদ্দেশ্য এবং উদ্দেশ্যে আচরণ করে। এটির একটি অনন্য ট্যাগ রয়েছে, এটির বৈশিষ্ট্য এবং পদ্ধতি থাকতে পারে এবং এটি আগুন লাগাতে পারে এবং ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে পারে। সংক্ষেপে, কোনো ওয়েব কম্পোনেন্ট ব্যবহার করার জন্য আপনার বিশেষ কিছু জানার দরকার নেই, অনেক কম <model-viewer>

এই নিবন্ধটি <model-viewer> এর জন্য বিশেষ বৈশিষ্ট্যগুলি কভার করে। আপনি যদি ওয়েব উপাদান সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে শুরু করার জন্য webcomponents.org একটি ভাল জায়গা।

<model-viewer> কি করতে পারে?

নিম্নলিখিত উদাহরণগুলি <model-viewer> এর কিছু ক্ষমতা প্রদর্শন করে।

মৌলিক 3D মডেল

একটি 3D মডেল এম্বেড করা নিম্নলিখিত মার্কআপের মতোই সহজ৷ Glb ফাইল ব্যবহার করে, এই উপাদানটি যেকোনো বড় ব্রাউজারে কাজ করবে।

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
  id="mv-shark"
   src="shark.glb"
  camera-controls
></model-viewer>

সেই কোডটি এইরকম রেন্ডার করে:

গতি এবং ইন্টারঅ্যাক্টিভিটি যোগ করুন

auto-rotate এবং camera-controls বৈশিষ্ট্যগুলি গতি এবং ব্যবহারকারী নিয়ন্ত্রণ প্রদান করে। এগুলিই একমাত্র সম্ভাব্য বৈশিষ্ট্য নয়। বৈশিষ্ট্যগুলির একটি সম্পূর্ণ তালিকার জন্য ডকুমেন্টেশন দেখুন।

<model-viewer src="shark.glb" auto-rotate camera-controls>

পোস্টার ইমেজ সঙ্গে লোড বিলম্বিত

সমস্ত 3D মডেল লোড হতে সময় নেয়, একটি poster অ্যাট্রিবিউট যোগ করার অর্থ হল মডেলটি ব্যবহারের জন্য প্রস্তুত না হওয়া পর্যন্ত একটি চিত্র দেখানো হবে৷ একটি পোস্টার ইমেজ যা 3D রেন্ডারের অনুরূপ দেখাবে তা এডিটর ব্যবহার করে তৈরি করা যেতে পারে।

<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">

প্রতিক্রিয়াশীল নকশা

কম্পোনেন্টটি মোবাইল এবং ডেস্কটপ উভয়ের জন্য কিছু ধরণের প্রতিক্রিয়াশীল ডিজাইন পরিচালনা করে। এটি একটি পৃষ্ঠায় একাধিক দৃষ্টান্ত পরিচালনা করতে পারে এবং একটি মডেল দৃশ্যমান না হলে ব্যাটারি শক্তি এবং GPU চক্র সংরক্ষণ করতে ইন্টারসেকশন অবজারভার ব্যবহার করে৷

একটি পোস্টার ইমেজ তৈরি করার জন্য পূর্বে বর্ণিত এডিটর ব্যবহার করে সেই একক ছবিকে 3D রেন্ডারের সাথে মেলে, এমনকি <model-viewer> এর আকৃতির অনুপাত বিভিন্ন স্ক্রীন আকারে সাড়া দেয়।

প্রতিক্রিয়াশীলতার প্রতিনিধিত্বকারী একাধিক স্পেসসুট চিত্র।
প্রতিক্রিয়াশীলতার প্রতিনিধিত্বকারী একাধিক স্পেসসুট চিত্র।

আরো বৈশিষ্ট্য

আরও উন্নত বৈশিষ্ট্যের ডেমোর জন্য <model-viewer> ডকুমেন্টেশন অন্বেষণ করুন। এর মধ্যে রয়েছে একটি গ্রাউন্ড-প্রজেক্টেড স্কাইবক্স যোগ করার ক্ষমতা এবং অ্যানিমেটেড টেক্সচার এবং হটস্পট তৈরি করার ক্ষমতা।