<মডেল-দর্শক> দিয়ে ওয়েবে 3D মডেল যোগ করুন

বর্তমানে লোকেরা তাদের পকেটে অগমেন্টেড রিয়েলিটি (AR) এবং ভার্চুয়াল রিয়েলিটি (VR) সক্ষম ডিভাইস বহন করা সাধারণ। ক্রমবর্ধমানভাবে, এই ডিভাইসগুলিতে আমরা একে অপরের সাথে যে সামগ্রী ভাগ করি তা হল 3D৷ এই কোড ল্যাবে আপনি শিখবেন কিভাবে আপনার ওয়েবসাইট বা প্রগ্রেসিভ ওয়েব অ্যাপে (PWA) 3D কন্টেন্ট যোগ করতে <model-viewer> নামে একটি ওয়েব কম্পোনেন্ট ব্যবহার করতে হয় যতটা সহজে আপনি HTML এর সাথে একটি ইমেজ যোগ করবেন!

যা আপনি নির্মাণ করবেন

AR হলোগ্রাম প্রদর্শনের ক্ষমতা সহ একটি ইন্টারেক্টিভ 3D মডেল ধারণকারী একটি ওয়েবসাইট

আপনি কি শিখবেন

  • কিভাবে আপনার ওয়েবসাইটে <model-viewer> ওয়েব কম্পোনেন্ট ইনস্টল করবেন
  • একটি স্ট্যান্ডার্ড ওয়েব লেআউটে একটি 3D মডেল উপস্থাপন করতে কিভাবে <model-viewer> ব্যবহার করবেন
  • উপস্থাপনায় ফ্লেয়ার যোগ করতে কিভাবে <model-viewer> কাস্টমাইজ করবেন

আপনি কি প্রয়োজন হবে

  • একটি ওয়েব ব্রাউজার। আমরা ক্রোমের পরামর্শ দিই, তবে যেকোনো আধুনিক ব্রাউজার (Firefox, Safari, Edge) কাজ করবে।
  • Node.js এবং একটি টেক্সট এডিটর, অথবা গ্লিচ- এ অ্যাক্সেস।
  • HTML, CSS, JavaScript, এবং Chrome DevTools এর প্রাথমিক জ্ঞান।

এই কোডল্যাব <model-viewer> এবং 3D মডেলের উপর দৃষ্টি নিবদ্ধ করে। অ-প্রাসঙ্গিক ধারণা এবং কোড ব্লকগুলিকে চকচকে করা হয়েছে এবং আপনাকে কেবল অনুলিপি এবং পেস্ট করার জন্য সরবরাহ করা হয়েছে।

বিকল্প 1 - ত্রুটি

আপনি আপনার প্রোজেক্ট হোস্ট করতে এবং পরিবর্তন দেখতে গ্লিচের মতো একটি অনলাইন কোড এডিটিং টুল ব্যবহার করতে পারেন।

গ্লিচের সাথে শুরু করতে, নিম্নলিখিত বোতামটি ক্লিক করুন:

আপনার প্রি-লোড করা গ্লিচ পরিবেশ খুলুন

এখান থেকে, আপনি আপনার ফাইলগুলি সংশোধন করতে Glitch-এ কোড এডিটর ব্যবহার করতে পারেন এবং আপনি প্রস্তুত হয়ে গেলে, "লাইভ দেখান" বোতামটি ব্যবহার করে আপনার অ্যাপ্লিকেশন পরিবেশন করা শুরু করুন৷ এখন এটি চেষ্টা করুন এবং আপনার নিম্নলিখিত পৃষ্ঠাটি দেখতে হবে:

বিকল্প 2 - স্থানীয় সার্ভার

একটি স্থানীয় সার্ভার আপনাকে আপনার পছন্দের কোড সম্পাদক ব্যবহার করতে দেবে।

সার্ভার ইন্সটল করুন

স্থানীয় ওয়েব পৃষ্ঠাগুলি পরিবেশন করার জন্য আমাদের একটি উপায় প্রয়োজন। একটি সহজ উপায় হল Node.js এবং serve , একটি সাধারণ স্ট্যাটিক কন্টেন্ট সার্ভারের মাধ্যমে।

আপনার অপারেটিং সিস্টেমে এটি কীভাবে ইনস্টল করবেন তার নির্দেশাবলীর জন্য Node.js ওয়েবসাইটটি দেখুন। Node.js ইন্সটল হওয়ার পর, সার্ভ ইনস্টল করতে এই কমান্ডটি চালান:

npm install -g serve

কোডটি ডাউনলোড করুন

সমস্ত নমুনা সম্পদ সহ একটি শুরু টেমপ্লেট ডাউনলোডের জন্য উপলব্ধ। নিম্নলিখিত লিঙ্কে ক্লিক করুন, এবং আপনি আপনার প্রকল্পটি ধারণ করতে চান এমন ডিরেক্টরিতে বিষয়বস্তুগুলি আনজিপ করুন:

সোর্স কোড ডাউনলোড করুন

বিকল্পভাবে, সংগ্রহস্থল ক্লোন করতে গিট ব্যবহার করুন:

git clone https://github.com/googlecodelabs/model-viewer-codelab.git

সার্ভার চলমান

উপরে তোলা টেমপ্লেট ডিরেক্টরি থেকে (বা ক্লোন করা ডিরেক্টরির ভিতরে, যদি আপনি গিট ব্যবহার করেন), একটি ওয়েব সার্ভার শুরু করতে serve কমান্ডটি চালান:

একটি খুব সাধারণ সূচনা পয়েন্ট দেখতে সেই ঠিকানাটি দেখুন (উপরের স্ক্রিনশটে, এটি http://localhost:5000 , কিন্তু এটি আপনার মেশিনে ভিন্ন হতে পারে)

আমরা index.html ফাইলটি সম্পাদনা করে শুরু করব, হয় Glitch ওয়েব সম্পাদকের মাধ্যমে অথবা - যদি আপনি স্থানীয় সার্ভার ব্যবহার করেন - আপনার প্রিয় কোড সম্পাদক৷

<model-viewer> লাইব্রেরি যোগ করুন

<model-viewer> ব্যবহার করার জন্য আমাদের জাভাস্ক্রিপ্ট ফাইলগুলির একটি সেট অন্তর্ভুক্ত করতে হবে।

নিম্নলিখিত বিভাগটি আপনার পৃষ্ঠায় <model-viewer> লাইব্রেরি যোগ করে। নিচের কোডটি <body> এর শেষে পেস্ট করুন।

<!-- 💁 Include both scripts below to support all browsers! -->

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>

আমরা বিষয়বস্তু পরিবর্তন না করেই লাইব্রেরি যোগ করেছি - যদি আপনি আপনার পৃষ্ঠাটি রিফ্রেশ করেন, আপনি একই বিষয়বস্তু দেখতে পাবেন। আপনি যদি DevTools কনসোল খোলেন, তাহলে আপনি অনুপস্থিত WebXR API সম্পর্কে কিছু সতর্কতা দেখতে পাবেন, কিন্তু সেই API সম্পূর্ণরূপে প্রকাশ না হওয়া পর্যন্ত এগুলি প্রত্যাশিত।

সর্বোচ্চ সামঞ্জস্যতা

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

আমাদের সম্পূর্ণ প্রস্তাবিত সেট নীচে আছে. এগুলি আপনাকে সমস্ত আধুনিক ব্রাউজারে একটি দুর্দান্ত অভিজ্ঞতা সমর্থন করতে সহায়তা করবে। আরও তথ্যের জন্য <মডেল-ভিউয়ার> পলিফিলস ডকুমেন্টেশন দেখুন।

নিচের কোডটি <head> এ পেস্ট করুন।

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
    
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->

<মডেল-দর্শক> যোগ করুন

এখন পৃষ্ঠায় প্রকৃত <model-viewer> ট্যাগ যোগ করা যাক যাতে আমরা কিছু 3D দেখতে পারি! বিদ্যমান <p> উপাদানটিকে নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              alt="A 3D model of an astronaut">
</model-viewer>

এখানে উল্লেখ করার জন্য শুধুমাত্র দুটি বৈশিষ্ট্য আছে:

  • 3D মডেল কোথা থেকে লোড করতে হবে তা src অ্যাট্রিবিউট নির্দিষ্ট করে। এই উদাহরণে, আমরা Poly দ্বারা একটি মহাকাশচারী মডেল ব্যবহার করেছি যা CC-BY লাইসেন্সের অধীনে উপলব্ধ করা হয়েছে৷
  • alt অ্যাট্রিবিউটে অ্যাক্সেসযোগ্যতার জন্য মডেলের একটি বিকল্প পাঠ্য বিবরণ রয়েছে।

আপনি লক্ষ্য করতে পারেন যে এই দুটি বৈশিষ্ট্যেরই img ট্যাগের বৈশিষ্ট্যগুলির সাথে শক্তিশালী সমান্তরাল রয়েছে।

একটি পুনরায় লোড মহাকাশচারী দেখাবে:

চমৎকার! আপনার ওয়েবে একটি 3D মডেল আছে!


নিম্নলিখিত ধাপে, আমরা আরও ইন্টারঅ্যাক্টিভিটি এবং গতি নিয়ে পরীক্ষা করব, উপাদানটির চেহারা পরিবর্তন করব এবং আমাদের পায়ের আঙুলগুলিকে AR-তে ডুবিয়ে দেব।

মডেলটিতে একটু ইন্টারঅ্যাকটিভিটি যোগ করা যাক। আমাদের কাছে ডিফল্টভাবে মডেল স্পিন থাকবে, ব্যবহারকারীদের একটি ইঙ্গিত দিতে যে মডেলটি ইন্টারেক্টিভ (এবং এটি দেখানোর জন্যও), এবং তারপরে আমরা নিয়ন্ত্রণগুলি সক্ষম করব যাতে ব্যবহারকারীরা তাদের মাউস দিয়ে বা স্পর্শের মাধ্যমে মডেলটিকে নিজেরাই সরাতে পারে৷

এটি করার জন্য, <মডেল-দর্শক> উপাদানটিতে auto-rotate এবং camera-controls বৈশিষ্ট্যগুলি যোগ করুন।

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              auto-rotate camera-controls
              alt="A 3D model of an astronaut">
</model-viewer>

আপনি যখন পৃষ্ঠাটি রিফ্রেশ করবেন, তখন মহাকাশচারী ধীরে ধীরে ঘুরতে থাকবে। আপনি যদি মডেলটি টেনে আনার চেষ্টা করেন (হয় মাউসটি ক্লিক করে এবং সরানোর মাধ্যমে, অথবা আপনি যদি আপনার আঙুল টেনে একটি স্পর্শ-সক্ষম ডিভাইসে থাকেন), মডেলটি ঘুরবে৷

সম্মিলিতভাবে, এই বৈশিষ্ট্যগুলি ব্যবহারকারীকে একটি ইঙ্গিত দেয় যে এটি কেবল একটি স্থির চিত্রের চেয়ে বেশি, এবং ইন্টারঅ্যাক্টিভিটির অনুভূতি যাতে তারা জড়িত বোধ করে (এবং যাতে তারা আপনার মডেলের পিছনে দেখতে পারে!)

এখন যেহেতু আমাদের কিছু গতি আছে, আসুন মডেলটিকে সত্যিই আকর্ষক করতে চেহারাটি টুইক করার বিষয়ে দেখি।

মডেল আপডেট করুন

এর মধ্যে কিছু (বিশেষ করে আলোর পরিবর্তন) নির্দিষ্ট মডেলের সাথে সেরা দেখাবে। প্রথমে, আসুন একটি নতুন মডেলের দিকে নির্দেশ করতে src অ্যাট্রিবিউট আপডেট করি: third_party/DamagedHelmet/DamagedHelmet.gltf ( Sketchfab- এ ক্রিয়েটিভ কমন্স অ্যাট্রিবিউশন-অবাণিজ্যিক লাইসেন্সের অধীনে প্রকাশিত)। পুরো উপাদানটির উত্সটি এখন পড়তে হবে:

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

এই মডেলটি কিছু পরিবর্তন দেখাবে যা আমরা করতে যাচ্ছি!

পটভূমির রঙ পরিবর্তন করুন

প্রথমে, মডেলটিকে পৃষ্ঠার বিপরীতে পপ করতে পটভূমির রঙ পরিবর্তন করা যাক। আপনার <model-viewer> ট্যাগে নিম্নলিখিত বৈশিষ্ট্য যোগ করুন:

background-color="#70BCD1"

পরিবেশ মানচিত্র সেট করুন

পরিবেশ মানচিত্র মডেল থেকে প্রতিফলিত একটি ঘেরা দৃশ্য প্রদান করতে এবং আলো কনফিগারেশন নির্দিষ্ট করতে ব্যবহার করা হয়। ডিফল্ট আলো চমৎকার (এবং ARCore এর দৃশ্য দর্শকের আলোর সাথে সামঞ্জস্যপূর্ণ), কিন্তু কখনও কখনও আপনার একটি কাস্টম পরিবেশ থাকতে পারে বা আপনি যে ফলাফলগুলি অর্জন করার চেষ্টা করছেন তার জন্য নির্দিষ্ট আলোর প্রয়োজন হতে পারে। এনভায়রনমেন্ট-ইমেজ অ্যাট্রিবিউট উল্লেখ করা যাক ( studio_small_07_1k.hdr hdrihaven.com থেকে এসেছে)।

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

একটি ছায়া যোগ করুন

বস্তুটিকে ছায়া নিক্ষেপ করা দৃশ্যটিকে অতিরিক্ত গভীরতা দেয়। আমাদের <model-viewer> এলিমেন্টে যোগ করা হলে নিচের অ্যাট্রিবিউটটি একটি ছায়া ফেলবে: 

shadow-intensity="1"

আলোর তীব্রতা পরিবর্তন করুন

মডেলটি একটু অন্ধকার; চলুন একটু আলো জ্বালানো যাক যাতে আমরা আরও বিস্তারিত দেখতে পারি। ডিফল্ট স্টেজ লাইটিং এবং এনভায়রনম্যাপ ম্যাপ থেকে আমাদের যোগ করা আলো উভয়ই স্বাধীনভাবে সামঞ্জস্য করা যেতে পারে। এটি যোগ করুন: 

stage-light-intensity="3" environment-intensity="2"

এই পরিবর্তনগুলির প্রতিটিটি বেশ ছোট ছিল, কিন্তু মডেলটি এখন আরও ভাল দেখাচ্ছে!

পরবর্তীতে, আমরা কিছু বিকল্প প্রদর্শন মোড দেখব।

আরও বেশি সংখ্যক ডিভাইসে কিছু ধরণের অগমেন্টেড রিয়েলিটি (AR) উপলব্ধ রয়েছে। এই মোডগুলির মধ্যে কিছু ট্রিগার করা কঠিন বা বিশেষ কোডের প্রয়োজন, কিন্তু <model-viewer> আপনার জন্য সেই সমস্ত জটিলতা পরিচালনা করতে পারে!

ARCore এর দৃশ্য দর্শক

সমর্থিত ডিভাইসগুলিতে, <model-viewer> ARCore-এর দৃশ্য ভিউয়ারকে ট্রিগার করতে পারে। আপনার <model-viewer> এলিমেন্টে ar এট্রিবিউট যোগ করুন - এবং হ্যাঁ, এটিই আপনাকে করতে হবে!

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              ar
              auto-rotate camera-controls
              background-color="#70BCD1"
              shadow-intensity="1"
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

এখন আপনি যদি সাম্প্রতিক ARCore সহ একটি সমর্থিত ডিভাইসে এটি দেখেন, তাহলে আপনি একটি অতিরিক্ত আইকন দেখতে পাবেন (নিচের ছবির মতো)। যেটি ক্লিক করলে আপনার মডেলটি দৃশ্য এক্সপ্লোরার খুলবে!

অন্যান্য ডিভাইস - iOS কুইক লুক, ম্যাজিক লিপ, ওয়েবএক্সআর

অন্যান্য অনেক ডিভাইসে একটু বেশি কাজ করতে হবে।

iOS-এ, ios-src অ্যাট্রিবিউট 3D মডেলের একটি অতিরিক্ত USDZ সংস্করণ (যা iOS-এ প্রয়োজনীয়) নির্দিষ্ট করার অনুমতি দেয়। এই অ্যাট্রিবিউট দেওয়া হলে, সমর্থিত iOS ডিভাইসের মডেলে স্ট্যান্ডার্ড AR কুইক লুক আইকন দেখা যাবে। USDZ সম্পর্কে আরও তথ্যের জন্য Apple এর বিকাশকারী ডকুমেন্টেশন দেখুন।

ম্যাজিক লিপ ডিভাইসে, magic-leap অ্যাট্রিবিউট এআর সমর্থন সক্ষম করবে। মনে রাখবেন যে আপনাকে অবশ্যই prismatic.js লাইব্রেরি অন্তর্ভুক্ত করতে হবে (এটি অন্তর্ভুক্ত করা হয়েছে, তবে ঐচ্ছিক পলিফিলে মন্তব্য করা হয়েছে) এবং 3D মডেলটি অবশ্যই একটি .glb ফাইল (.gltf নয়) হতে হবে। 

<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>

ক্যামেরার প্রাথমিক কোণ এবং অবস্থান নিয়ন্ত্রণ করা যায়। এই নিয়ন্ত্রণ আমাদের ব্যবহারকারীদের হেলমেটের একটি ভাল ডিফল্ট ভিউ দেখাতে দেয়। আপনার <model-viewer> ট্যাগে নিম্নলিখিত স্নিপেট যোগ করুন: 

camera-orbit="-20deg 75deg 2m"

অবশ্যই এই মডেলগুলি প্রতিক্রিয়াশীল পৃষ্ঠাগুলি সহ আপনার অন্যান্য সামগ্রীর সাথে ব্যবহার করা যেতে পারে। একটি প্রতিক্রিয়াশীল ওয়েব পৃষ্ঠা তৈরি করা এই কোডল্যাবের সুযোগের বাইরে, তবে অতিরিক্ত তথ্যের জন্য প্রতিক্রিয়াশীল ওয়েব ডিজাইনের মৌলিক বিষয়গুলি দেখুন৷

আমরা আমাদের রেপোতে একটি নমুনা পৃষ্ঠা অন্তর্ভুক্ত করেছি। responsive.html দেখুন, ওয়াইডস্ক্রীনে (একটি ডেস্কটপের মতো):

একই পৃষ্ঠা, একটি সংকীর্ণ ভিউপোর্টে (যেমন একটি মোবাইল ডিভাইস):

আপনি ওয়েবে 3D সামগ্রীর একটি অংশ এমবেড করেছেন! চমৎকার কাজ!

এরপর কি?

আরও অনেক কনফিগারেশন বিকল্প বিদ্যমান। আরও তথ্যের জন্য আমাদের অনলাইন ডকুমেন্টেশন বা কোড দেখুন।

একবার আপনার মডেল শনাক্ত হয়ে গেলে, কিছু পরবর্তী পদক্ষেপ যা আপনি ভাবতে চাইতে পারেন:

  • কিছু মডেল বেশ বড় হতে পারে। এই ক্ষেত্রে, <model-viewer> এখনও চমৎকার অভিজ্ঞতা প্রদানের জন্য বিভিন্ন পদ্ধতি প্রদান করে। অলস লোডিং ডকুমেন্টেশন পৃষ্ঠায় আরও তথ্য রয়েছে।
  • অ্যানিমেটেড মডেল সত্যিই মজা হতে পারে! আপনার মডেলগুলিতে সংজ্ঞায়িত অ্যানিমেশনগুলি সক্ষম করা (এবং এর মধ্যে স্যুইচ করা) সম্পর্কে আরও তথ্যের জন্য আমাদের অ্যানিমেশন পৃষ্ঠাটি দেখুন৷
  • এবং এটি এখনও ওয়েব - মডেলগুলি আপনার বিষয়বস্তুর পরিপূরক করতে আপনার ওয়েব পৃষ্ঠাগুলিতে এম্বেড করা যেতে পারে!

আমাদের উন্নয়ন প্রক্রিয়া GitHub- এ উন্মুক্ত। আমরা আপনার কাছ থেকে শুনতে চাই!