جدول المحتويات

amp-3d-gltf

Description

Displays GL Transmission Format (glTF) 3D models.

Required Scripts

<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item responsive

أمثلة

amp-3d-gltf

يعرض نماذج GL Transmission Format (glTF) ثلاثية الأبعاد.

النص البرمجي المطلوب	`<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>`
التنسيقات المعتمدة	fill وfixed وfixed-height وflex-item وresponsive
أمثلة	اطّلِع على مثال amp-3d-gltf في الموقع "AMP بالمثال".

الاستخدام

يعرض المكوِّن amp-3d-gltf نماذج ثلاثية الأبعاد بالتنسيق glTF.

ملاحظة: يجب استخدام متصفح متوافق مع WebGL لعرض هذه النماذج.

مثال

<amp-3d-gltf
    layout="responsive"
    width="320"
    height="240"
    alpha="true"
    antialiasing="true"
    src="path/to/model.glb"></amp-3d-gltf>

القيود

يعمل المكّوِن حاليًا مع 2.0 glTF فقط.

الميزات غير المتاحة:

الكاميرات المضمنة
الحركة

CORS

يرسل amp-3d-gltf طلب fetch من الأصل https://<random>.ampproject.net لذا يجب تعيين access-control-allow-origin: *.ampproject.net على رأس الاستجابة لنقطة النهاية المحددة على هيئة src. وتظهر الحاجة إلى استخدام حرف بدل لأن الأصل يحتوي على مكّوِن نطاق فرعي عشوائي.

السمات

src [مطلوبة]	سمة مطلوبة تحدد عنوان URL لملف gltf.
alpha [اختياريّة]	سمة Boolean تحدد ما إذا كانت المساحة الخالية في لوحة الرسم شفافة أم لا. يتم تلقائيًا ملء المساحة الخالية باللون الأسود. والقيمة التلقائية هي `false`.
antialiasing [اختياريّة]	سمة Boolean تحدد ما إذا سيتم تفعيل مضاد التشويش أم لا. والقيمة التلقائية هي `false`.
clearColor [اختياريّة]	سلسلة يجب أن تحتوي على لون CSS صالح سيتم استخدامه لملء المساحة الخالية في لوحة الرسم.
maxPixelRatio [اختياريّة]	قيمة رقمية تحدد الحد الأعلى لخيار عرض pixelRatio. والقيمة التلقائية هي `window.devicePixelRatio`.
autoRotate [اختياريّة]	سمة Boolean تحدد ما إذا كان سيتم تدوير الكاميرا تلقائيًا حول مركز النموذج أم لا. والقيمة التلقائية هي `false`.
enableZoom [اختياريّة]	سمة Boolean تحدد ما إذا كان يجب تفعيل التكبير/التصغير. القيمة التلقائية هي `true`.

الإجراءات

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax)

يحدد دوران النموذج علمًا بأن ترتيب الدوران هو ZYX.

x/y/z - رقم 0..1، يتم تعيينه تلقائيًا على القيمة السابقة لدوران النموذج.
min/max - الزاوية بالراديان، يتم تعيينه تلقائيًا على 0 / pi * 2 ويحدد النطاق المستهدف.

على سبيل المثال، سيغير setModelRotation(x=0.5, xMin=0, xMax=3.14) مكوِّن الدوران x إلى 1.57.

التحقق

اطِّلع على قواعد amp-3d-gltf في مواصفات مدقق AMP.

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow

هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub