AMP

amp-3d-gltf

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

النص البرمجي المطلوب<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 نماذج ثلاثية الأبعاد بالتنسيق gITF.

ملاحظة: يجب استخدام متصفح متوافق مع 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.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub