الواقع المعزّز باستخدام <model-viewer>

يمكن استخدام مكوّن الويب <model-viewer> لعرض التصاميم الثلاثية الأبعاد على الويب والتفاعل معها، كما أنّه ينتقل بسلاسة إلى وضع تلك النماذج الثلاثية الأبعاد والتفاعل معها في تقنية الواقع المعزّز على الويب.

عند عرض مكوّن <model-viewer> مع السمة ar على جهاز Android متوافق مع ARCore، فهو يعرض زرًا كما هو موضّح في المثال التالي:

لقطة شاشة عارض النماذج

سيؤدي النقر على هذا الزر في الأجهزة المتوافقة مع ARCore إلى عرض النموذج باستخدام وظيفة WebXR من Chrome أو تطبيق Scene Viewer بناءً على قيمة السمة ar-modes.

يمكن تخصيص مظهر زر "الواقع المعزّز" باستخدام خانات مكوّنات الويب. يمكنك الرجوع إلى <model-viewer> documentation للاطّلاع على مثال. يمكنك أيضًا مراجعة Scene Viewer لمعرفة مزيد من المعلومات حول عرض النماذج الثلاثية الأبعاد التفاعلية في الواقع المعزّز من تطبيق أو متصفح Android.

بدء استخدام "<model-viewer>"

توضّح الخطوات التالية كيفية بدء استخدام "<model-viewer>" على أي صفحة ويب.

إضافة التبعية <model-viewer>

من شبكة توصيل المحتوى غير المضغوطة (CDN)

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

من npm

npm install @google/model-viewer

بعد ذلك، أضِف <model-viewer> على node_modules/model-viewer/dist/model-viewer.min.js باستخدام حزمة الحزمة المفضّلة لديك،

تضمين العلامة <model-viewer>

إضافة مكوِّن الويب <model-viewer> إلى مستند HTML:

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

ضبط العلامة <model-viewer>

يمكن ضبط طريقة عرض النموذج من خلال تغيير السمات في العلامة <model-viewer>. وتعرض هذه الخصائص خيارات مثل حركة الكاميرا والرسوم المتحركة للنماذج ومعلومات عن البيئة. تتضمّن مستندات <model-viewer> جميع السمات التي يمكن ضبطها. يمكن لأداة محرّر النماذج إنشاء علامة HTML <model-viewer> وضبط خصائص مثل موضع الكاميرا والإضاءة.

لقطة شاشة لمحرر النماذج

توافق النموذج

النماذج بتنسيق الملف gltf وglb متوافقة مع <model-viewer>. يمكنك الرجوع إلى three.js GLTFLoader documentation للاطّلاع على قائمة بإضافات glTF المتوافقة.

ولضمان عرض النموذج بشكل صحيح، راجع النموذج في محرر النماذج.

المتصفِّحات والأجهزة المتوافقة

يمكن استخدام <model-viewer> لعرض نماذج ثلاثية الأبعاد في صفحة ويب في جميع المتصفحات التي لا يبطُل رواجها. وننصح باستخدام polyfill :focus-visible لإخفاء حلقات التركيز عندما يكون العنصر مركّزًا.

تتطلب ميزات الواقع المعزّز جهازًا متوافقًا مع ARCore وتثبيت "خدمات Google Play للواقع المعزّز". في webxr وضع الواقع المعزّز، يُرجى الاطّلاع على توافق متصفّح WebXR. بشكل تلقائي، إذا لم يكن WebXR متوافقًا، سيتم استخدام Scene Viewer بدلاً من ذلك.

الخطوات التالية