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

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

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

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

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

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

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

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

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

من Unpkg 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> وضبط سمات مثل موضع الكاميرا والإضاءة.

لقطة شاشة لأداة &quot;محرر النماذج&quot;

توافق الطراز

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

لضمان ظهور التصميم بشكل صحيح، تحقَّق منه في أداة تصميم النماذج.

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

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

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

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